Gallery view
5 TopicsGallery view formatting to group in columns
I'd like to know if their is a trick or JSON view formatting I can change so I can group all the items on a list in gallery view are grouped vertically by a certain list value (in this case the region which is a choice field). The image I attached helps explain what I mean. I like the exact card width used because 6 options across works perfectly actually.9KViews0likes4CommentsDuplicated fields in List Gallery view
Hi, We found the SharePoint events/calendar webparts to be quite limiting, hence were happy to find a way of creating an events calendar using the List webpart and choosing Calendar or Gallery view. Things are generally working but there is a bug which I can't seem to find a cause or way around. When adding the list in a gallery view we created to a page, it seems to be repeating the [Title] and [Date] fields twice for each event. If I go to the list gallery view itself in Site Content, it doesn't display these duplicates. I've checked the list settings and and these 2 fields are duplicated in the list of columns and the duplicates are also ticked. If I untick them and save the list, when I go back to edit it after they are ticked again. Confused if it is a problem with the fields or if it a problem with the List webpart just duplicating the field, as, like I said, the duplication doesn't happen if I open the list via Site Content and select the gallery view in there. Happens on multiple SharePoint pages. I cant find anything online. Any ideas? Using SharePoint Online Thanks! --- Some pics: 1) View setup: 2) Gallery view on SharePoint page 3) Gallery view on List page via Site Contents2.6KViews0likes4CommentsSPO List Gallery view JSON: Split (or wrap) array of managed metadata column values across new lines
Hi All, I have an SPO List, using Gallery view. Of four columns of data that display on the cards, one is a managed metadata column called 'Values' (corporate values) that allows multiple selections (resulting in an array). These display on one line only and are truncated, so if all corporate values are selected, the last few are not visible on the gallery card. Ideally, I need some additional rows of JSON to split this array up and place each corporate value on a new line, and then introduce an icon prior to each corporate value. But I accept that might be a bit ambitious, so would settle for making the array wrap to two lines and not truncate. I tried this but this didn't work: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 500, "width": 310, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "button", "attributes": { "class": "sp-card-defaultClickButton", "role": "presentation" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Recipient.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Recipient]) == 0, '–', '')" }, { "forEach": "personIterator in [$Recipient]", "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([$Recipient]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Recipient]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Recipient]", "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([$Recipient]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle" }, "style": { "display": "=if(length([$Recipient]) == 1, '', 'none')" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Recipient.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Values.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Values]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Values] == '', '–', [$Values])", "style": { "word-break": "keep-all" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Rationale.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Rationale]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline" }, "txtContent": "=if ([$Rationale] == '', '–', [$Rationale])", "style": { "text-align": "justify", "height": "200px", "word-break": "keep-all" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Created.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$Created.displayValue] == '', '–', [$Created.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Created.displayValue] == '', '–', [$Created.displayValue])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!GMT_x0020_Edition.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$GMT_x0020_Edition]" } ] } ] } ] } ] } }Solved4KViews0likes2CommentsSharePoint List Card Designer
Hello, I have multiple columns in the list that are set to be a "Multi-line text" field. When I switched the list view to "Gallery," I noticed that none of the multi-line text fields showed up on the gallery/card view. I checked the card designer, and those columns are not even included in the options to be displayed in the gallery/card view. The only way to see those field is to click on the card and open the right side panel on the screen. Is there a way to include/show multi-line test column field in the card view?Solved9.8KViews1like1CommentSharePoint list formatting not working on Search Results page
I have a SharePoint list, formatted with JSON in the gallery view. If I search for an item, the format is not supported. Here the sample used: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-gallery-formatting However, if I use the list view. It's working well. I have to use the gallery view because there is about 1500 items and it seems the list view format can't display more than 100 items if the format causes the rows to be on the same line: https://github.com/pnp/List-Formatting/issues/108 The column view formatting is not supported in the search view: https://github.com/pnp/List-Formatting/issues/168. Is it the same for the gallery view? Thanks for help.Solved1.9KViews0likes1Comment