Gallery view
6 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.8.3KViews0likes4CommentsDuplicated 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.2KViews0likes4CommentsHyperlink/Picture Column suddenly breaks external images in Gallery/Card Designer
We use a Flow with an API connection to grab image links from an external vendor and populate that data to the Hyperlink or Picture column of a SharePoint list. We then add JSON formatting to display the image links in a Gallery view. The Hyperlink or Picture Column is set to display as Picture. The external images still display fine in the list item view, just not the Gallery/Card view. This was working fine for several months, but something seems to have changed over the last weekend, causing externally linked images in Picture/Hyperlink Columns to break. I setup a simple test list to display this behavior using a public domain image. External Image link: https://www.publicdomainpictures.net/pictures/20000/velka/computer-memory-chips.jpg Internal Image link: https://[mydomain].sharepoint.com/sites/WebDev/SiteAssets/Lists/[LIST-ID/computer-memory-chips.jpg Here is an All Items List View sample: Here is a Gallery/Card Designer View sample of the same list: No JSON used in these examples, just the default Gallery / Card Designer: I've experimented with the Image column, which doesn't seem to exhibit this issue, but unfortunately that column is not available in the Create Items step of the Flow so I assume it cannot be dynamically populated.Solved2.1KViews1like2CommentsSPO 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]" } ] } ] } ] } ] } }Solved3.6KViews0likes2CommentsSharePoint 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.2KViews1like1CommentSharePoint 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