JSON Formatting on Sharepoint List Web Part Not Working Correctly

%3CLINGO-SUB%20id%3D%22lingo-sub-427602%22%20slang%3D%22en-US%22%3EJSON%20Formatting%20on%20Sharepoint%20List%20Web%20Part%20Not%20Working%20Correctly%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-427602%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20SharePoint%20list%20with%20a%20bunch%20of%20contacts.%20I%20have%20setup%20the%20list%20to%20have%20some%20JSON%20formatting%20done%20so%20the%20list%20will%20appear%20in%20card%20view.%20I%20get%20things%20looking%20correctly%20within%20the%20list%20just%20fine%2C%20however%2C%20when%20I%20go%20to%20add%20the%20webpart%20and%20pick%20my%20formatted%20view%2C%20the%20cards%20display%20correctly%20all%20except%20the%20very%20first%20row%20(see%20attached).%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20came%20across%20the%20following%20post%20for%20JSON%20formatting%20on%20SharePoint%20and%20there%20is%20a%20known%20bug%2C%20I%20wondered%20if%20this%20could%20be%20related%20or%20if%20I%20have%20something%20wrong%20in%20my%20JSON.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint%2FJSON-Formatting-on-Sharepoint-start-site%2Fm-p%2F309777%23M25246%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint%2FJSON-Formatting-on-Sharepoint-start-site%2Fm-p%2F309777%23M25246%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20also%20having%20a%20problem%20when%20referencing%20the%20People%20field%20(User%20in%20my%20case)%2C%20I%20do%20not%20return%20the%20user's%20title.%20So%20in%20my%20example%20below%20%24User.jobTitle%20should%20pull%20in%20the%20user's%20title%2C%20but%20i%20get%20nothing.%20%24User.email%20and%20%24User.title%20work%20just%20fine.%20Any%20ideas%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22hideSelection%22%3A%20true%2C%3CBR%20%2F%3E%22hideListHeader%22%3A%20true%2C%3CBR%20%2F%3E%22rowFormatter%22%3A%20%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22float%22%3A%20%22left%22%2C%3CBR%20%2F%3E%22display%22%3A%20%22flex%22%2C%3CBR%20%2F%3E%22flex-wrap%22%3A%20%22wrap%22%2C%3CBR%20%2F%3E%22flex-direction%22%3A%20%22column%22%2C%3CBR%20%2F%3E%22align-items%22%3A%20%22center%22%2C%3CBR%20%2F%3E%22justify-content%22%3A%20%22space-around%22%2C%3CBR%20%2F%3E%22min-width%22%3A%20%22245px%22%2C%3CBR%20%2F%3E%22min-height%22%3A%20%22286px%22%2C%3CBR%20%2F%3E%22border-radius%22%3A%20%228px%22%2C%3CBR%20%2F%3E%22margin-right%22%3A%20%2210px%22%2C%3CBR%20%2F%3E%22margin-bottom%22%3A%20%2210px%22%2C%3CBR%20%2F%3E%22box-shadow%22%3A%20%222px%202px%204px%20darkgrey%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%22ms-bgColor-neutralLighter%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22img%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22block%22%2C%3CBR%20%2F%3E%22height%22%3A%20%22auto%22%2C%3CBR%20%2F%3E%22max-height%22%3A%20%22144px%22%2C%3CBR%20%2F%3E%22max-width%22%3A%20%22144px%22%2C%3CBR%20%2F%3E%22border-radius%22%3A%20%2250%25%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22src%22%3A%20%22%3Dif(%5B%24Picture%5D%20%3D%3D%20''%2C%20%40currentWeb%20%2B%20'%2F_layouts%2F15%2Fuserphoto.aspx%3Fsize%3DM'%2C%20%5B%24Picture%5D)%22%2C%3CBR%20%2F%3E%22title%22%3A%20%22%3Dif(%5B%24Picture%5D%20%3D%3D%20''%2C%20'No%20picture%20available'%2C%20%5B%24Picture.desc%5D)%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22text-align%22%3A%20%22center%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22font-weight%22%3A%20%22500%22%2C%3CBR%20%2F%3E%22font-size%22%3A%20%221.5rem%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%5B%24User.title%5D%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22font-weight%22%3A%20%22500%22%2C%3CBR%20%2F%3E%22font-size%22%3A%20%221.1em%22%2C%3CBR%20%2F%3E%22overflow%22%3A%20%22auto%22%2C%3CBR%20%2F%3E%22max-width%22%3A%20%22200px%22%2C%3CBR%20%2F%3E%22white-space%22%3A%20%22normal%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%5B%24User.email%5D%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22span%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22height%22%3A%20%222rem%22%2C%3CBR%20%2F%3E%22width%22%3A%20%222rem%22%2C%3CBR%20%2F%3E%22font-size%22%3A%20%222em%22%2C%3CBR%20%2F%3E%22cursor%22%3A%20%22pointer%22%2C%3CBR%20%2F%3E%22margin%22%3A%20%220px%205px%22%2C%3CBR%20%2F%3E%22vertical-align%22%3A%20%22text-bottom%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22a%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22cursor%22%3A%20%22pointer%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%22ms-fontColor-themePrimary%22%2C%3CBR%20%2F%3E%22iconName%22%3A%20%22CreateMailRule%22%2C%3CBR%20%2F%3E%22href%22%3A%20%22%3D'mailto%3A'%20%2B%20%5B%24User.email%5D%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F107554i0BE390A6851810AB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Annotation%202019-04-10%20094712.jpg%22%20title%3D%22Annotation%202019-04-10%20094712.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1700211%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Formatting%20on%20Sharepoint%20List%20Web%20Part%20Not%20Working%20Correctly%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1700211%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F260499%22%20target%3D%22_blank%22%3E%40dmowry%3C%2FA%3E%26nbsp%3BShouldn't%20schema%20have%20a%20%24%20before%20it%3F%20as%20in...%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%2C%0A%20%20%20%20%22hideSelection%22%3A%20true%2C%0A%20%20%20%20%22hideColumnHeader%22%3A%20true%2C%0A%20%20%20%20%22rowFormatter%22%3A%20%7B....%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
Contributor

I have a SharePoint list with a bunch of contacts. I have setup the list to have some JSON formatting done so the list will appear in card view. I get things looking correctly within the list just fine, however, when I go to add the webpart and pick my formatted view, the cards display correctly all except the very first row (see attached). 

 

I came across the following post for JSON formatting on SharePoint and there is a known bug, I wondered if this could be related or if I have something wrong in my JSON.

https://techcommunity.microsoft.com/t5/SharePoint/JSON-Formatting-on-Sharepoint-start-site/m-p/30977...

 

I am also having a problem when referencing the People field (User in my case), I do not return the user's title. So in my example below $User.jobTitle should pull in the user's title, but i get nothing. $User.email and $User.title work just fine. Any ideas?

 

{
"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": "center",
"justify-content": "space-around",
"min-width": "245px",
"min-height": "286px",
"border-radius": "8px",
"margin-right": "10px",
"margin-bottom": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"attributes": {
"class": "ms-bgColor-neutralLighter"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "img",
"style": {
"display": "block",
"height": "auto",
"max-height": "144px",
"max-width": "144px",
"border-radius": "50%"
},
"attributes": {
"src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
"title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
}
}
]
},
{
"elmType": "div",
"style": {
"text-align": "center"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.5rem"
},
"txtContent": "[$User.title]"
},
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.1em",
"overflow": "auto",
"max-width": "200px",
"white-space": "normal"
},
"txtContent": "[$User.email]"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"height": "2rem",
"width": "2rem",
"font-size": "2em",
"cursor": "pointer",
"margin": "0px 5px",
"vertical-align": "text-bottom"
},
"children": [
{
"elmType": "a",
"style": {
"cursor": "pointer"
},
"attributes": {
"class": "ms-fontColor-themePrimary",
"iconName": "CreateMailRule",
"href": "='mailto:' + [$User.email]"
}
}
]
}
]
}
]
}
}

 

Annotation 2019-04-10 094712.jpg

1 Reply

@dmowry Shouldn't schema have a $ before it? as in... 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideSelection": true,
    "hideColumnHeader": true,
    "rowFormatter": {....