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:
You can see the web part settings on the list view here:
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:
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.
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.
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.