List View Format Stopping at 10 items

%3CLINGO-SUB%20id%3D%22lingo-sub-859822%22%20slang%3D%22en-US%22%3EList%20View%20Format%20Stopping%20at%2010%20items%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-859822%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20trying%20to%20implement%20the%20Profile%20Card%20view%20(%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Fprofile-card%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Fprofile-card%3C%2FA%3E)%20onto%20a%20list%20of%20people%20with%20about%20100%20items.%26nbsp%3B%20However%2C%20when%20I%20apply%20it%20it%20only%20loads%20the%20first%2010%20items.%20It%20works%20okay%20if%20I%20remove%20the%20float%3Aleft%20but%20then%20I%20just%20have%20one%20long%20column%2C%20which%20is%20not%20what%20I'm%20going%20for.%26nbsp%3B%20Has%20anyone%20else%20experienced%20this%3F%20I'm%20not%20a%20CSS%20master%20unfortunately.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20a%20shortened%20version%3A%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%22schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%0A%20%20%22hideSelection%22%3A%20true%2C%0A%20%20%22hideListHeader%22%3A%20true%2C%0A%20%20%22rowFormatter%22%3A%20%7B%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%22flex-wrap%22%3A%20%22wrap%22%2C%0A%20%20%20%20%20%20%22flex-direction%22%3A%20%22column%22%2C%0A%20%20%20%20%20%20%22align-items%22%3A%20%22center%22%2C%0A%20%20%20%20%20%20%22justify-content%22%3A%20%22space-around%22%2C%0A%20%20%20%20%20%20%22min-width%22%3A%20%22300px%22%2C%0A%20%20%20%20%20%20%22min-height%22%3A%20%22200px%22%2C%0A%20%20%20%20%20%20%22border-radius%22%3A%20%228px%22%2C%0A%20%20%20%20%20%20%22margin-right%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%22margin-bottom%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%22box-shadow%22%3A%20%222px%202px%204px%20darkgrey%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%22class%22%3A%20%22ms-bgColor-neutralLighterAlt%20ms-bgColor-neutralLight--hover%20ms-fontColor-themePrimary--hover%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22img%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22block%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%22auto%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22max-height%22%3A%20%2296px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22max-width%22%3A%20%2296px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%2250%25%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22src%22%3A%20%22%3D%20%40currentWeb%20%2B%20'%2F_layouts%2F15%2Fuserphoto.aspx%3Fsize%3DL%26amp%3Baccountname%3D'%20%2B%20%5B%24Person.email%5D%20%2B%20'%26amp%3BUA%3D0%26amp%3Bsize%3DHR48x48'%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22%5B%24Person.title%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-weight%22%3A%20%22500%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22font-size%22%3A%20%221.5rem%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24Person.title%5D%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-859822%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECSS%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-860019%22%20slang%3D%22en-US%22%3ERe%3A%20List%20View%20Format%20Stopping%20at%2010%20items%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-860019%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4572%22%20target%3D%22_blank%22%3E%40Courtney%20Prothero%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20is%20one%20of%20the%20more%20complicated%20view%20formats.%20I%20can't%20do%20much%20to%20debug%20the%20code%20but%20I%20can%20confirm%20that%20it%20is%20working%20with%20a%20list%20with%20more%2010%20items.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F132232iA0691CD6EAC993AE%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Capture.PNG%22%20title%3D%22Capture.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EI%20followed%20the%20instructions%20provided%20on%20the%20GitHub%20site.%26nbsp%3BI%20know%20its%20not%20much%20help%20but%20it%20does%20work%20as%20described.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENorm%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-873146%22%20slang%3D%22en-US%22%3ERe%3A%20List%20View%20Format%20Stopping%20at%2010%20items%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-873146%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20trying.%20It%20worked%20slightly%20better%20on%20a%20brand%20new%20communication%20site%20(my%20other%20site%20was%20an%20older%20site).%20But%20still%20had%20weird%20behavior.%20I%20ended%20up%20just%20giving%20up%20and%20creating%20a%20PowerApp%20with%20the%20look%20I%20wanted.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-873176%22%20slang%3D%22en-US%22%3ERe%3A%20List%20View%20Format%20Stopping%20at%2010%20items%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-873176%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4572%22%20target%3D%22_blank%22%3E%40Courtney%20Prothero%3C%2FA%3E%26nbsp%3Bsorry%20it%20didn't%20work%20out.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENorm%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

I am trying to implement the Profile Card view (https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/profile-card) onto a list of people with about 100 items.  However, when I apply it it only loads the first 10 items. It works okay if I remove the float:left but then I just have one long column, which is not what I'm going for.  Has anyone else experienced this? I'm not a CSS master unfortunately.

 

Here is a shortened version: 

{
  "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "flex-direction": "column",
      "align-items": "center",
      "justify-content": "space-around",
      "min-width": "300px",
      "min-height": "200px",
      "border-radius": "8px",
      "margin-right": "10px",
      "margin-bottom": "10px",
      "box-shadow": "2px 2px 4px darkgrey"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "height": "auto",
              "max-height": "96px",
              "max-width": "96px",
              "border-radius": "50%"
            },
            "attributes": {
              "src": "= @currentWeb + '/_layouts/15/userphoto.aspx?size=L&accountname=' + [$Person.email] + '&UA=0&size=HR48x48'",
              "title": "[$Person.title]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.5rem"
            },
            "txtContent": "[$Person.title]"
          }
        ]
      }
    ]
  }
}

 

3 Replies

Hi @Courtney Prothero,

 

That is one of the more complicated view formats. I can't do much to debug the code but I can confirm that it is working with a list with more 10 items.

Capture.PNG

I followed the instructions provided on the GitHub site. I know its not much help but it does work as described. 

 

Norm

Thanks for trying. It worked slightly better on a brand new communication site (my other site was an older site). But still had weird behavior. I ended up just giving up and creating a PowerApp with the look I wanted. 

@Courtney Prothero sorry it didn't work out.

 

Norm