SharePoint List - Card View Headers - JSON

Question

Hello -

I am trying to format the card view on my SharePoint list, and despite using the exact same code on the "Decorator Status" and "Contact Method" (highlighted in yellow) - I am not getting the column header nor the formatted bubble for the Contact Method choice.

Please note, because of the way this list was imported, Field_1 is the Decorator ID; Field_2 is the Decorator Tier; Field_3 is the Decorator Status; and ContactMethod was the recently created Contact Method column.

I'd appreciate any insight!

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json",
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container sp-card-container-noPadding"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
				"style": {
				  "text-align": "center"
				},
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          }, 
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "justify-content": "space-between"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "=if ([$field_1.displayValue] == '','none', '')"
                },
                "children": [
				  {
					"elmType": "p",
					"attributes": {
					  "class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText"
					},
					"txtContent": "[!field_1.DisplayName]"
                  },
                  {
					"elmType": "p",
					"attributes": {
					  "title": "=if ([$field_1.displayValue] == '', '–', [$field_1.displayValue])",
					  "class": "ms-fontColor-neutralPrimary sp-card-content "
					},
					"txtContent": "=if ([$field_1.displayValue] == '', '–', [$field_1.displayValue])"
                  }
                ]
              }, 
              {
                "elmType": "div",
                "style": {
                  "display": "=if ([$field_2.displayValue] == '','none', '')"
                },
                "children": [
				  {
					"elmType": "p",
					"attributes": {
					  "class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText"
					},
					"txtContent": "[!field_2.DisplayName]"
                  },
                  {
					"elmType": "p",
					"style":  {
					  "text-align":"center"
					},
					"attributes": {
					  "title": "=if ([$field_2.displayValue] == '', '–', [$field_2.displayValue])",
					  "class": "ms-fontColor-neutralPrimary sp-card-content "
					},
					"txtContent": "=if ([$field_2.displayValue] == '', '–', [$field_2.displayValue])"
                  }
                ]
              } 
            ]
          }, 
		  {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "justify-content": "space-between"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "=if ([$field_3.displayValue] == '','none', '')"
                },
                "children": [
				  {
					"elmType": "p",
					"attributes": {
					  "class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText"
					},
					"txtContent": "[!field_3.DisplayName]"
				  },
				  {
					"elmType": "div",
					"attributes": {
					  "class": "sp-card-content sp-card-formatterRef"
					},
					"children": [
					  {
						"columnFormatterReference": "[$field_3]"
					  }
					]
				  }
                ]
              }, 
              {
                "elmType": "div",
                "style": {
                  "display": "=if ([$ContactMethod.displayValue] == '','none', '')"
                },
                "children": [
				  {
					"elmType": "p",
					"attributes": {
					  "class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText"
					},
					"txtContent": "[!ContactMethod.DisplayName]"
				  },
				  {
					"elmType": "div",
					"attributes": {
					  "class": "sp-card-content sp-card-formatterRef"
					},
					"children": [
					  {
						"columnFormatterReference": "[$ContactMethod]"
					  }
					]
				  }
                ]
              } 
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

Hi @Joni Minter ,

I'm glad to hear you solve the problem, if you have any issue about SharePoint, you are welcome to raise a ticket in this forum.

I would make a brief summary of this thread:

Issue Symptom:

When formatting a card view in a SharePoint list, the column headings and contents of the contact method selection column disappear(using the exact same code).

Current status:

The issue has been solved. The solution is: There was some internal issue with that particular view. Deleted what list had and started over and it worked.

You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!

---

Answer 2

Hi @Joni Minter ,

Thank you for posting in this community.

1.The reason your Contact Method header isn't showing up should be that the name used in the code is not the internal name of the Contact Method. Please check that the internal name matches in the code. When you create a column in SharePoint it will automatically replace the space by "x0020". Maybe spaces are ignored in code?

Click List setting->click column name->Internal name in url

2.You mean your Contact Method: "Phone" doesn't have a green bubble like Decorator Status: "Active", right?

Please check the column type of Contact Method, only the “choice” column will have color bubble.

Everything works fine for me with your code(Contact method column Type is choice).

Hope the information can help you. And if there have any unclear or misunderstanding, please feel free to post back and we’ll continue to help you all the time!

Your understanding and patience will be highly appreciated! Hope you have a good day and keep safe!

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

UPDATE

Despite not making any changes to it this morning - the Contact Method has disappeared completely