Forum Discussion

jdiorio's avatar
jdiorio
Copper Contributor
Jun 21, 2020
Solved

JSON to Format a SharePoint List

Hi everyone, and thanks in advance for any help you may have.  It is very much appreciated!   I am VERY much a novice to using JSON for formatting, and am not a coder by trade.  That being said, I'...
SharePoint Online
  • RobElliott's avatar
    RobElliott
    Jun 22, 2020

    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's avatar
jdiorio
Copper Contributor
Jun 21, 2020

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"
                    }
                  }
                ]
              }
            ]
        }
    ]
   }
}
jdiorio's avatar
jdiorio
Copper Contributor
Jun 21, 2020

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"
                    }
                  }
                ]
              }
            ]
        }
    ]
   }
}
  • RobElliott's avatar
    RobElliott
    Silver Contributor
    Jun 22, 2020

    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's avatar
      jdiorio
      Copper Contributor
      Jun 22, 2020

      Hi RobElliott !  Along with misspelling Customer, I also had completely screwed up the syntax of the rest of that line.  My original code left off the last parens after block on line 84 and I believe a single quote, along with misspelling CUSTOMER.

       

      Thanks for pointing me in the right direction.....works great now!!

       

Resources