Having difficulty with JSON View which only shows 30 records but view configured to show 100

Copper Contributor

New to SharePoint admin/development so please bear with me. 

 

SharePoint Online

 

I am trying to apply a formatting view to a sharepoint list that normally will only have about 100 items per day (the list gets wiped every evening to be ready for next day). The view is formatted to show 100 records in a batch FWIW. 

 

To make it beautiful, I found how to use JSON formatting. The problem is while the view renders with the JSON code, it only returns 30 records even though the list has more than that. If I view the list as normal then I see all 60 records (today's count) but the JSON formatting returns only 30.

 

I am using the JSON to show each record next to each other, as opposed to row per line if that makes sense.

With this code, records show next to each other but only show 30 regardless of what I do

 

{
  "$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": "row",
      "align-items": "stretch",
      "padding": "16px",
      "margin-bottom": "16px",
      "min-height": "140px",
      "max-height": "140px",
      "min-width": "110px",
      "max-width": "110px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px darkgrey"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "flex-direction": "column",
          "align-items": "stretch",
          "max-width": "120px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100px",
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "50%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "='/_layouts/15/userphoto.aspx?size=L&accountname=' + [$EmployeeName.email]",
                      "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                    },
                    "style": {
                      "position": "relative",
                      "top": "50%",
                      "left": "50%",
                      "width": "100%",
                      "height": "auto",
                      "margin-left": "-50%",
                      "margin-top": "-50%"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-weight": "450",
              "font-size": "0.6rem"
            },
            "txtContent": "=if([$EmployeeName.title] == '', [$Full_x0020_Name], '')"
          },
          {
            "elmType": "div",
            "style": {
              "font-weight": "450",
              "color": "red",
              "font-size": "0.6rem"
            },
            "txtContent": "[$channel]"
          }
        ]
      }
    ]
  }
}

 

 

With this JSON, each record is on it's own line but then does show all records

 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideSelection": true,
    "hideColumnHeader": true,
    "rowFormatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "align-items": "stretch",
        "flex-direction": "row",
        "padding": "20px",
        "margin-bottom": "16px",
        "min-height": "100px",
        "max-height": "100px",
        "min-width": "110px",
        "max-width": "110px",
        "border-radius": "8px",
        "box-shadow": "4px 4px 8px darkgrey"
      },
      "attributes": {
        "class": "ms-bgColor-neutralLighter"
      },
      "children": [
        {
          "elmType": "div",
          "_comment_": "DIV ONE",
          "style": {
            "flex-grow": "1",
            "display": "flex",
            "flex-direction": "column",
            "flex-wrap": "wrap",
            "align-items": "stretch",
            "max-width": "50px"
          },
          "children": [
            {
              "elmType": "img",
              "style": {
                "display": "block",
                "height": "auto",
                "margin-top": "10px",
                "margin-left": "50%",
                "min-height": "60px",
                "max-height": "60px",
                "border-radius": "50%"
              },
              "attributes": {
                "src": "='/_layouts/15/userphoto.aspx?size=M&accountname=' + [$EmployeeName.email]"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "text-align": "center",
            "padding": "5px",
            "margin": "auto"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "font-weight": "450",
                "font-size": "0.6rem"
              },
              "txtContent": "=if([$EmployeeName.title] == '', [$Full_x0020_Name], '')"
            },
            {
              "elmType": "div",
              "style": {
                "color": "red",
                "font-weight": "500",
                "font-size": "0.7em",
                "overflow": "hidden",
                "max-width": "280px",
                "white-space": "wrap"
              },
              "txtContent": "[$channel]"
            }
          ]
        }
      ]
    }
  }

 

 

What exact part of the JSON section could defines how it renders by row or by column. Apologies for my stupid question. I've read as much as I can but as a newbie to JSON, etc - i finally gave up and have decided to ask for help :)

 

4 Replies

@ManishH did you find a solution for this? Experiencing the same issue here.

@Joshua Mohr Nevermind I found a solution myself. You have to create a new view but as gallery view. Then you can put your JSON in there with some adjustments and it should work well even with more than 30 items.

What adjustments did you make? I'm following what you did...more items do show; however, my styling is completely ignored.

@jsmileyb 

 

Sorry didn't realise there were replies to this post recently.

 

I've been using it like this now:

ManishH_0-1657269387208.png

with this JSON and it is working perfectly fine. This is a blast from the past!!

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "300px",
      "max-height": "120px",
      "border-radius": "8px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "div",
        "_comment_": "DIV ONE",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "50px"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "height": "auto",
              "margin-top": "10px",
              "min-height": "60px",
              "max-height": "60px",
              "border-radius": "50%"
            },
            "attributes": {
              "src": "='/_layouts/15/userphoto.aspx?size=M&accountname=' + [$Person.email]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center",
          "padding": "5px",
          "margin": "auto"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "0.9rem"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "0.7em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "wrap"
            },
            "txtContent": "[$JobTitle]"
          },
          {
            "elmType": "div",
            "txtContent": "[$OfficePhoneNumber]"
          },
          {
            "elmType": "div",
            "txtContent": "[$MobilePhoneNumber]"
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$Person.email]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer",
                  "color": "purple"
                },
                "attributes": {
                  "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover",
                  "iconName": "TeamsLogo",
                  "href": "='https://teams.microsoft.com/l/chat/0/0?users=' + [$Person.email]",
                  "title": "Teams"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "row",
                  "margin": "0px 2px"
                }
              },
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer",
                  "color": "darkblue"
                },
                "attributes": {
                  "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover",
                  "iconName": "OutlookLogo",
                  "href": "='mailto:' + [$Person.email]",
                  "title": "Email"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}