Forum Discussion
JSON to Format a SharePoint List
jdiorio you've spelt Customer incorrectly on line 84. Once you've corrected that it should be fine, I created a list with your JSON and it displayed with no problem.
Rob
Los Gallardos
Microsoft Power Automate Community Super User
jdiorio one thing to check is that your column names where you have spaces in the names actually are the internal names that JSON requires. For example in one of my lists the column is named Customer Data Requirements but the internal name is CustomerDataRequirements. To check this go to the List settings and select the column and look in the address bar where the internal name of the column is after Field=
If that isn't the problem I'll dive a bit deeper into the JSON asap.
Rob
Los Gallardos
Microsoft Power Automate Community Super User
Hi RobElliott ! Well, the 'good' news was that I did indeed have a Column reference misspelled. I corrected, and was really hoping that would correct, but even after that correction, when I paste the JSON into the List formatting I'm still getting presented with a blank List.
This problem only started after I created the DIV on Line 72 titled "_COMMENT_":"CUSTOMER INFO". It happened that the misspelled column reference was in this section on Line 84, but again, even after that correction I'm still getting the blank list. Before I messed around in that area however by trying to break out the 'FO, Machine and Customer' DIV from the 'CUSTOMER INFO' DIV, everything seemed to be working correctly and pulling in the appropriate SharePoint information 😞
Pasted below is the code with the Column reference correctly spelled. I went through and verified that the other column references are correctly referencing SharePoint Column names.
{"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json","hideSelection": true,"hideColumnHeader": true,"rowFormatter": {"elmType": "div","_comment_": "MAIN DIV","attributes": {"class":"ms-bgColor-neutralTertiaryAlt"},"style": {"display":"flex","flex-wrap":"wrap","align-items":"stretch","flex-direction":"row","padding":"20px","margin-bottom":"16px","max-width":"930px","border-radius":"8px"},"children": [{"elmType": "div","_comment_": "FO, Machine and Customer","style": {"flex-grow": "1","display": "flex","flex-direction": "column","flex-wrap": "nowrap","align-items": "left","max-width": "360px","min-width": "205px"},"children": [{"elmType": "div","_COMMENT_":"FO AND MACHINE","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent": "=[$Title]","style": {"display": "=if([$Title] == '', 'none', 'block')"},"attributes": {"class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"}},{"elmType": "span","txtContent": "[$MACHINE]","style": {"display": "=if([$MACHINE] == '', 'none', 'block')"}},{"elmType": "span","txtContent": "='CUSTOMER' + [$CUSTOMER]","style": {"display": "=if([$CUSTOMER] == '', 'none', 'block')","padding-top": "20px"}}]},{"elmType": "div","_COMMENT_":"CUSTOMER INFO","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent":"=[$CUSTOMER]","style":{"display":"=if([$CUSTOMER]=='','none','block","padding-top":"20px"}}]}]},{"elmType": "div","_comment_": "DIV TWO","style": {"flex-grow":"1","display":"flex","flex-direction":"column","flex-wrap":"nowrap","align-items":"stretch","max-width":"260px"}},{"elmType": "div","_comment_": "DIV THREE","style":{"flex-grow": "1","display": "flex","flex-direction": "column","align-items": "left","max-width": "310px","min-width": "155px"},"children": [{"elmType": "div","_COMMENT_":"Sales Approver","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent":"[$Sales_x0020_Approver]","style":{"padding-right":"5px"}},{"elmType": "span","txtContent":"[$Sales_x0020_Approval_x0020_Comme]","style":{"padding-right":"5px"}}]},{"elmType": "div","_COMMENT_":"Finance Approver","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent":"[$Finance_x0020_Approver]","style":{"padding-right":"5px"}},{"elmType": "span","txtContent":"[$Finance_x0020_Workflow_x0020_Com]","style":{"padding-right":"5px"}}]}]}]}}Also, following up on my above post that has the corrected Column Name but that still shows a blank List, the code below is my last version that does still work, just in case that help (??):
{"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json","hideSelection": true,"hideColumnHeader": true,"rowFormatter": {"elmType": "div","_comment_": "MAIN DIV","attributes": {"class":"ms-bgColor-neutralTertiaryAlt"},"style": {"display":"flex","flex-wrap":"wrap","align-items":"stretch","flex-direction":"row","padding":"20px","margin-bottom":"16px","max-width":"930px","border-radius":"8px"},"children": [{"elmType": "div","_comment_": "FO, Machine and Customer","style": {"flex-grow": "1","display": "flex","flex-direction": "column","flex-wrap": "nowrap","align-items": "left","max-width": "360px","min-width": "205px"},"children": [{"elmType": "div","_COMMENT_":"FO AND MACHINE","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent": "=[$Title]","style": {"display": "=if([$Title] == '', 'none', 'block')"},"attributes": {"class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"}},{"elmType": "span","txtContent": "[$MACHINE]","style": {"display": "=if([$MACHINE] == '', 'none', 'block')"}},{"elmType": "span","txtContent": "='CUSTOMER' + [$CUSTOMER]","style": {"display": "=if([$CUSTOMER] == '', 'none', 'block')","padding-top": "20px"}}]}]},{"elmType": "div","_comment_": "DIV TWO","style": {"flex-grow":"1","display":"flex","flex-direction":"column","flex-wrap":"nowrap","align-items":"stretch","max-width":"260px"}},{"elmType": "div","_comment_": "DIV THREE","style":{"flex-grow": "1","display": "flex","flex-direction": "column","align-items": "left","max-width": "310px","min-width": "155px"},"children": [{"elmType": "div","_COMMENT_":"Sales Approver","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent":"[$Sales_x0020_Approver]","style":{"padding-right":"5px"}},{"elmType": "span","txtContent":"[$Sales_x0020_Approval_x0020_Comme]","style":{"padding-right":"5px"}}]},{"elmType": "div","_COMMENT_":"Finance Approver","style":{"display":"block","font-size":"15px","font-weight":"normal"},"children": [{"elmType": "span","txtContent":"[$Finance_x0020_Approver]","style":{"padding-right":"5px"}},{"elmType": "span","txtContent":"[$Finance_x0020_Workflow_x0020_Com]","style":{"padding-right":"5px"}}]}]}]}}jdiorio you've spelt Customer incorrectly on line 84. Once you've corrected that it should be fine, I created a list with your JSON and it displayed with no problem.
Rob
Los Gallardos
Microsoft Power Automate Community Super User
