Forum Discussion
SharePoint list and Galery view with links to filtered sub list
- Sep 22, 2022
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.
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.
- mziembaSep 26, 2022Copper Contributor
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" } ] } ] } ] } }