jsonlistviewformatsharepoint-2019

SharePoint Contact Card List View formatting is not displaying content


I am trying to format a list view into a contact card format by tailoring the samples available on github. I have managed to get the contact cards displaying as gray boxes but cannot get the item details to display within the box.

Tried many different things. Changed column names, only included json for one column to get that right. Tried as divs and spans. No spaces in column names. Spaces in column names. % where there is a space in a column name. the best I have gotten is object Object or the last child as an "a" elmtype showing as a hyperlink but no other fields. Also cannot have the column heading display in the card above the entries also.

{
    "$schema":"https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideSelection":true,
    "hideListHeader":true,
    "rowFormatter":{
        "elmType":"div",
        "style":{
            "float":"left",
            "display":"flex",
            "flex-wrap":"wrap",
            "flex-direction":"column",
            "align-items":"stretch",
            "justify-content":"space-around",
            "min-width":"600px",
            "min-height":"486px",
            "border-radius":"8px",
            "margin-right":"10px",
            "margin-bottom":"10px",
            "box-shadow":"2px 2px 4px darkgrey"
        },
        "attributes":{
            "class":"ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
        },
        "children":[
            {
                "elmType":"div",
                "txtContent":"[$FirstName]",
                "style":{
                    "color":"black",
                    "font-style":"normal",
                    "font-size":"10px",
                    "display":"block",
                    "width":"250px",
                    "height":"50px",
                    "border-radius":"50%",
                    "word-wrap":"initial",
                    "white-space":"nowrap",
                    "flex-grow":"1",
                    "flex-direction":"column",
                    "flex-wrap":"wrap"
                }
            }
        ]
    }
}

The above example is just one of my column headings in my original list view. The FirstNames' of the entries are not appearing in the boxes


Solution

  • {
    "$schema":"https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideSelection":true,
    "hideListHeader":true,
    "rowFormatter":{
        "elmType":"div",
        "style":{
            "float":"left",
            "flex-wrap":"wrap",
            "flex-direction":"row",
            "width":"600px",
            "height":"900px",
            "border-radius":"8px",
            "margin-right":"10px",
            "margin-bottom":"10px",
            "box-shadow":"2px 2px 4px darkgrey"
        },
        "attributes":{
            "class":"ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
        },
        "children":[
            {
                "elmType":"div",
                "__comment:":"DIV 1",
                "style":{
                    "flex-grow":"1",
                    "display":"flex",
                    "flex-direction":"column",
                    "flex-wrap":"nowrap"
                },
                "children":[
                    {
                        "elmType":"div",
                        "txtContent":"=[$FullName]",
                        "style":{
                            "display":"block",
                            "font-size":"16px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Job Title",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$JobTitle]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-color":"red",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Career Interests",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px",
                            "margin-top":"10px",
                            "margin-bottom":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$CareerInterests]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Beginner",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$SkillLevelBeginner]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Intermediate",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$SkillLevelIntermediate]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Advanced",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$SkillLevelAdvanced]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Previous Roles",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$PreviousRoles]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Qualifications",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Primary Qualifications",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"20px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$PrimaryQualifications]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$PrimaryDisciplineMajor]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"Additional Qualifications",
                        "style":{
                            "display":"block",
                            "font-size":"14px",
                            "font-weight":"bold",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType":"div",
                        "txtContent":"=[$AdditionalQualifications]",
                        "style":{
                            "display":"block",
                            "font-size":"12px",
                            "font-weight":"normal",
                            "padding-top":"10px",
                            "margin-left":"10px",
                            "margin-right":"10px"
                        }
                    },
                    {
                        "elmType": "a",
                            "style": {
                            "border": "none",
                            "padding-top": "15px",
                            "background-color": "transparent",
                            "color": "#0078d7",
                            "margin-left":"10px",
                            "margin-bottom": "20px",
                            "text-align": "left",
                            "cursor": "pointer",
                            "display": "=if([$LinkedIn]=='','none','')"
                        },
                        "attributes": {
                            "target": "_blank",
                            "iconName": "LinkedInLogo",
                            "href": "[$LinkedIn]"
                        }
                    },
                    {
                        "elmType": "a",
                            "style": {
                            "border": "none",
                            "display":"float",
                            "padding-top": "15px",
                            "background-color": "transparent",
                            "color": "#0078d7",
                            "margin-left":"10px",
                            "margin-bottom": "20px",
                            "text-align": "left",
                            "cursor": "pointer"
                        },
                        "attributes": {
                            "target": "_blank",
                            "iconName": "CreateMailRule",
                            "href": "[$FullName.email]",
                            "title": "Email"
                        }
                    }
                ]
            }
        ]
    }
    

    }