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
{
"$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"
}
}
]
}
]
}
}