Forum Discussion
SharePoint list and Galery view with links to filtered sub list
Hi, I've created an SharePoint list of programs and have a separate list of projects, where each project refers to a program (it has a lookup column to a program list). I have found an inspiratio...
Michal_Z Below JSON works for multiple fields:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 123, "width": 254, "hideSelection": true, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none" }, "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer", "target": "_top", "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Title.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Title]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Title] == '', '–', [$Title])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!URL.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$URL]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$URL] == '', '–', [$URL])" } ] } ] } ] } }Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
mziemba I think there is some problem with my above JSON. Please remove the above JSON and use your initial JSON you provided above.
I will try to reproduce same scenario as yours tomorrow and will provide working JSON. I was not having all the columns in my list same as your columns. So, I was not able to reproduce the exact same JSON as yours earlier.
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
ganeshsanap you can provide a JSON based on your setup. I can try it out on my side and if works I can add all columns later.
Hi ganeshsanap
Thank you for the sample.
Based on that I was able to make it work on my list.
Here is the working JSON file if anyone is curious.
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 660, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "a", "attributes": { "class": "sp-card-defaultClickButton", "role": "presentation", "target": "_top", "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'" }, "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": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Program_owner.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Program_owner]) == 0, '–', '')" }, { "forEach": "personIterator in [$Program_owner]", "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([$Program_owner]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Program_owner]", "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([$Program_owner]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle" }, "style": { "display": "=if(length([$Program_owner]) == 1, '', 'none')" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Program_owner.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!ProgramID.DisplayName]" }, { "elmType": "p", "attributes": { "title": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Title.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Title]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Title] == '', '–', [$Title])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Sponsor.DisplayName]" }, { "elmType": "div", "attributes": { "class": "ms-fontColor-neutralPrimary sp-card-userContent ", "title": "[$Sponsor.title]" }, "children": [ { "elmType": "p", "txtContent": "=if(length([$Sponsor]) == 0, '–', '')" }, { "forEach": "personIterator in [$Sponsor]", "elmType": "p", "defaultHoverField": "[$personIterator]", "style": { "display": "=if(loopIndex('personIterator') >= 1, 'none', '')" }, "txtContent": "[$personIterator.title]" }, { "elmType": "p", "txtContent": "=if(length([$Sponsor]) > 1, ', +' + (length([$Sponsor]) - 1) , '')" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Senior_Users.DisplayName]" }, { "elmType": "div", "attributes": { "class": "ms-fontColor-neutralPrimary sp-card-userContent ", "title": "[$Senior_Users.title]" }, "children": [ { "elmType": "p", "txtContent": "=if(length([$Senior_Users]) == 0, '–', '')" }, { "forEach": "personIterator in [$Senior_Users]", "elmType": "p", "defaultHoverField": "[$personIterator]", "style": { "display": "=if(loopIndex('personIterator') >= 1, 'none', '')" }, "txtContent": "[$personIterator.title]" }, { "elmType": "p", "txtContent": "=if(length([$Senior_Users]) > 1, ', +' + (length([$Senior_Users]) - 1) , '')" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Project_Change_Authority.DisplayName]" }, { "elmType": "div", "attributes": { "class": "ms-fontColor-neutralPrimary sp-card-userContent ", "title": "[$Project_Change_Authority.title]" }, "children": [ { "elmType": "p", "txtContent": "=if(length([$Project_Change_Authority]) == 0, '–', '')" }, { "forEach": "personIterator in [$Project_Change_Authority]", "elmType": "p", "defaultHoverField": "[$personIterator]", "style": { "display": "=if(loopIndex('personIterator') >= 1, 'none', '')" }, "txtContent": "[$personIterator.title]" }, { "elmType": "p", "txtContent": "=if(length([$Project_Change_Authority]) > 1, ', +' + (length([$Project_Change_Authority]) - 1) , '')" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Program_type.DisplayName]" }, { "elmType": "div", "attributes": { "class": "sp-card-content " }, "children": [ { "elmType": "p", "txtContent": "=if(length([$Program_type]) == 0, '–', '')" }, { "forEach": "lookupIterator in [$Program_type]", "elmType": "a", "attributes": { "target": "_blank", "class": "ms-fontColor-neutralPrimary sp-card-urlContent sp-card-lookupInlineValues sp-card-keyboard-focusable ", "href": { "operator": "+", "operands": [ "&ID=", "[$lookupIterator.lookupId]" ] } }, "txtContent": "[$lookupIterator.lookupValue]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "div", "style": { "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px", "width": "70px", "justify-content": "center" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Overall]", "Green" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Overall]", "Yellow" ] }, "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Overall]", "Red" ] }, "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "Overall" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "div", "style": { "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px", "width": "70px", "justify-content": "center" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Progress]", "Green" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Progress]", "Yellow" ] }, "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Progress]", "Red" ] }, "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "Progress" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "div", "style": { "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px", "width": "70px", "justify-content": "center" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Resources]", "Green" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Resources]", "Yellow" ] }, "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Resources]", "Red" ] }, "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "Resources" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "div", "style": { "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px", "width": "70px", "justify-content": "center" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Economy]", "Green" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Economy]", "Yellow" ] }, "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Economy]", "Red" ] }, "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "Economy" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "div", "style": { "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px", "width": "70px", "justify-content": "center" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Risk]", "Green" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Risk]", "Yellow" ] }, "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Risk]", "Red" ] }, "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "Risk" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "div", "style": { "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px", "width": "70px", "justify-content": "center" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Gains]", "Green" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Gains]", "Yellow" ] }, "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$KPI_Gains]", "Red" ] }, "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "Gains" } ] } ] } ] } }Michal_Z Below JSON works for multiple fields:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 123, "width": 254, "hideSelection": true, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none" }, "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer", "target": "_top", "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Title.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Title]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Title] == '', '–', [$Title])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!URL.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$URL]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$URL] == '', '–', [$URL])" } ] } ] } ] } }Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
ganeshsanap Thank you for your help so far.
The title only works like a charm.
But when I try to add the rest of the fields I run into the empty screen like before.
Can you paste an example of the JSON format with at least two properties in the tile, please? I.e. Title and additional fields like date or ID.
I will be trying to get it to work on my end as well.
For my setup, below JSON code works for me:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 73, "width": 254, "hideSelection": true, "fillHorizontally": true, "formatter": { "elmType": "a", "style": { "text-decoration": "none" }, "attributes": { "class": "sp-card-container", "target": "_top", "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'" }, "children": [ { "elmType": "div", "style": { "background-color": "lightblue" }, "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Title.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Title]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Title] == '', '–', [$Title])" } ] } ] } ] } }Output:
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
