SOLVED

JSON to Format a SharePoint List

Copper Contributor

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've been using JSON to format a SharePoint On-Line list that I have.  Up until my current version, things had been progressing towards what I wanted.  This included having multiple DIVs underneath a DIV towards the end of my code.  However when I tried to do the same thing at the beginning, the List now completely blanks out.  

 

I'm pretty sure it's a stupid rookie mistake somewhere towards the beginning of the code, but I've been wholly unsuccessful in tracking it down.  

 

Does anything pop out at anyone here on what may be causing the issue?  

 

{
"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([$CUSOMTER]=='','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"
                    }
                  }
                ]
              }
            ]
        }
    ]
   }
}
6 Replies

BTW, it was when I added the _CUSTOMERINFO_ DIV towards the beginning when the list all of a sudden would just be completely blank.  

 

 

@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.

 

{
"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 (??):

 

{
"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"
                    }
                  }
                ]
              }
            ]
        }
    ]
   }
}
best response confirmed by jdiorio (Copper Contributor)
Solution

@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.

 

techMachine.png

 

Rob

Los Gallardos
Microsoft Power Automate Community Super User

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!!

 

Annotation 2020-06-22 061335.jpg

1 best response

Accepted Solutions
best response confirmed by jdiorio (Copper Contributor)
Solution

@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.

 

techMachine.png

 

Rob

Los Gallardos
Microsoft Power Automate Community Super User

View solution in original post