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.
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.
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"
}
]
}
]
}
]
}
}
