Forum Discussion

ManishH's avatar
ManishH
Copper Contributor
Sep 03, 2020

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

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 🙂

 

    • MoshJohr's avatar
      MoshJohr
      Copper Contributor

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

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

Resources