Contact-card Sample not updating with data

[mcgg87]

Sample – List-Formatting / view-samples / contact-cards /

Question – When I set the contact-cards JSON view as the default view for my list and refresh the page the list stops displaying the dynamic data for dynamic columns. The only way to get the data to display in the cards is to change the list view to All Items and then back to the JSON list view. Is there something I am doing wrong or is this how JSON formatted views are supposed to work?

The troubled Columns – IfDay1, IfDay2, IfDay3, IfDay4 and Day1_TeamName, Day2_TeamName, Day3_TeamName, Day4_TeamName

My Altered JSON { "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": true, "hideListHeader": true, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "align-items": "stretch", "padding": "8px", "margin-bottom": "16px", "max-width": "930px", "border-radius": "8px", "box-shadow": "4px 4px 8px darkgrey" }, "attributes": { "class": "ms-bgColor-neutralLighter" }, "children": [ { "elmType": "div", "style": { "flex-grow": "1", "display": "flex", "flex-wrap": "wrap", "align-items": "stretch", "max-width": "310px" }, "children": [ { "elmType": "div", "style": { "flex": "none" }, "children": [ { "elmType": "div", "style": { "width": "100px", "height": "100px", "overflow": "hidden", "border-radius": "50%", "margin-right": "8px" }, "children": [ { "elmType": "img", "attributes": { "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])", "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])" }, "style": { "position": "relative", "top": "50%", "left": "50%", "width": "100%", "height": "auto", "margin-left": "-50%", "margin-top": "-50%" } } ] } ] }, { "elmType": "div", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "stretch", "max-width": "200px" }, "children": [ { "elmType": "div", "style": { "flex-grow": "1" }, "children": [ { "elmType": "span", "txtContent": "[$Title]", "style": { "display": "block" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary" } }, { "elmType": "span", "txtContent": "[$JobTitle]", "style": { "display": "=if([$JobTitle] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$Department]", "style": { "display": "=if([$Department] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary" } } ] }, { "elmType": "div", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "row", "flex-wrap": "wrap", "align-items": "flex-end" }, "children": [ { "elmType": "a", "style": { "display": "=if([$Email] == '', 'none', 'block')", "width": "100%" }, "attributes": { "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover", "href": "='mailto:' + [$Email] + '?body=Dear ' + [$Title] + ',\r\n'" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Mail", "class": "ms-fontColor-themePrimary" }, "style": { "padding-right": "6px" } }, { "elmType": "span", "txtContent": "[$Email]" } ] }, { "elmType": "span", "style": { "display": "=if([$Phone] == '', 'none', 'block')", "width": "100%" }, "attributes": { "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Phone", "class": "ms-fontColor-themePrimary" }, "style": { "padding-right": "6px" } }, { "elmType": "span", "txtContent": "[$Phone]" } ] } ] } ] } ] }, { "elmType": "div", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "stretch", "max-width": "310px", "min-width": "205px", "margin-top": "8px" }, "children": [ { "elmType": "div", "style": { "flex-grow": "1", "text-align": "center" }, "children": [ { "elmType": "a", "attributes": { "class": "ms-fontWeight-semibold ms-fontSize-m" }, "txtContent": "Days Attended:" } ] }, { "elmType": "div", "style": { "flex-grow": "1", "text-align": "center" }, "children": [ { "elmType": "span", "txtContent": "[$IfDay1]", "style": { "display": "=if([$IfDay1] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$IfDay2]", "style": { "display": "=if([$IfDay2] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$IfDay3]", "style": { "display": "=if([$IfDay3] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$IfDay4]", "style": { "display": "=if([$IfDay4] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } } ] } ] }, { "elmType": "div", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "max-width": "310px", "min-width": "155px" }, "children": [ { "elmType": "div", "style": { "flex-grow": "1" }, "children": [ { "elmType": "div", "style": { "display": "block" }, "attributes": { "class": "ms-fontWeight-semibold ms-fontSize-m" }, "txtContent": "Teams:" }, { "elmType": "span", "txtContent": "[$Day1_TeamName]", "style": { "display": "=if([$Day1_TeamName] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$Day2_TeamName]", "style": { "display": "=if([$Day2_TeamName] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$Day3_TeamName]", "style": { "display": "=if([$Day3_TeamName] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } }, { "elmType": "span", "txtContent": "[$Day4_TeamName]", "style": { "display": "=if([$Day4_TeamName] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary" } } ] }, { "elmType": "div", "style": { "flex": "none", "display": "flex", "flex-direction": "row-reverse", "flex-wrap": "nowrap" }, "children": [ { "elmType": "button", "customRowAction": { "action": "share" }, "attributes": { "title": "Share", "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover" }, "style": { "border": "none", "background-color": "transparent", "cursor": "pointer" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Share" } } ] }, { "elmType": "button", "customRowAction": { "action": "delete" }, "attributes": { "title": "Delete", "class": "ms-fontColor-neutralPrimary ms-fontColor-red--hover" }, "style": { "border": "none", "background-color": "transparent", "cursor": "pointer" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Delete" } } ] }, { "elmType": "button", "customRowAction": { "action": "editProps" }, "attributes": { "title": "Edit", "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover" }, "style": { "border": "none", "background-color": "transparent", "cursor": "pointer" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Edit" } } ] }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "attributes": { "title": "See more details", "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover" }, "style": { "border": "none", "background-color": "transparent", "cursor": "pointer" }, "children": [ { "elmType": "span", "attributes": { "iconName": "ContactInfo" } } ] } ] } ] } ] } }

[Fedes365]

@mcgg87

"The only way to get the data to display in the cards is to change the list view to All Items and then back to the JSON list view"

Quick tip: I came across this weird behaviour frequently and from my testing I always had to check a custom view had all the required columns enabled (List settings page).

Is this your case?

[mcgg87]

@Fedes365

I can't believe it let a response to you sit for so long. Sorry for leaving you hanging. Your quick tip helped me fix the issue. Thank you so much!