Using rowFormatter with a default gallery view in a SPO Site Page web part is not working

New Contributor

There is a thread out there about the column formatter not working as designed, however the issue I am seeing is that the rowFormatter does not allow you to select the list type - List, Collapsed List, Gallery when creating a new web part list view.  I need this in order to use the awesome custom list view that I have created in a SharePoint Online Modern Site Page.  

 

What I am looking to create on my site page is this:

 

Screen Shot 2020-11-16 at 4.52.01 PM.png

 

You can see the web part settings on the list view here:

 

Screen Shot 2020-11-16 at 4.48.44 PM.png

I know I can change it as a viewer to the gallery/tiles view, however I need this to default to the gallery view, and not show the control options (which I have turned off in the web part) as shown above.

 

In the web part, the view automatically chooses List every time as you can see here:  

Screen Shot 2020-11-16 at 4.51.32 PM.png

 

On the list itself, I have chosen Gallery as the view, and you can see the JSON below which I have edited to remove some columns, and column names.  Some customization, but not much.  Customization or not, the same issue occurs.

Screen Shot 2020-11-16 at 4.43.07 PM.png

The auto-generated JSON here:

 

 

{
  "height": 158,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Name]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Name]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Name]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Name]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Name]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Name]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Name]) == 1, '', 'none')"
                    },
                    "txtContent": "[$Name.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-userContent ",
                  "title": "[$Department.title]"
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Department]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Department]",
                    "elmType": "p",
                    "defaultHoverField": "[$personIterator]",
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
                    },
                    "txtContent": "[$personIterator.title]"
                  },
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Department]) > 1, ',  +' + (length([$Department]) - 1) , '')"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Bio]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content",
                  "style": "white-space:wrap"
                },
                "txtContent": "=if ([$Bio] == '', '–', [$Bio])"
              }
            ]
          }
        ]
      }
    ]
  }
}

 

 

No matter what I have tried, the view is ALWAYS a list view, rather than a gallery view, and I am unable to change it to a gallery view without allowing the command bar to be shown, and the user switch it from list to gallery/tiles view.  Below is as close as I have been able to get to the view I'm looking for, but it's always a single list, never a wrapped tile/gallery view.

 

Screen Shot 2020-11-16 at 4.55.39 PM.png

 

With that being said, I CAN use a person widget, however that does not take the person from a list, you must create each person individually, and then you will not necessarily get the view I'm specifically looking for, which allows for wrapping of the departments names and titles.

 

Any help would be greatly appreciated.

 

 

 

 

 

0 Replies