Forum Discussion
Modifications to Json Code for a Modern SharePoint List Gallery View
I am hoping someone can help me. I have a list view that is displayed in the gallery format. I would like for the label for the Executive Assistant column to change to Administrative Assistant if a particular display name is selected. Is it possible to modify this json code to accomplish this? I'd also like for the name of the Professional to appear Bold:
{
"height": 158,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"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",
"font-weight": "bold"
},
"txtContent": "[!Professional.DisplayName]"
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$Professional]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Professional]",
"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([$Professional]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$Professional]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$Professional]",
"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([$Professional]) - (4))"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-userTitle"
},
"style": {
"display": "=if(length([$Professional]) == 1, '', 'none')"
},
"defaultHoverField": "[$personIterator]",
"txtContent": "[$Professional.title]"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Executive_x0020_Assistant.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$Executive_x0020_Assistant]"
}
]
}
]
}
]
}
]
}
}
Try using JSON like below:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 158, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" }, "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", "font-weight": "bold" }, "txtContent": "[!Professional.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Professional]) == 0, '–', '')" }, { "forEach": "personIterator in [$Professional]", "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([$Professional]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Professional]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Professional]", "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([$Professional]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle" }, "style": { "display": "=if(length([$Professional]) == 1, '', 'none')", "font-weight": "bold" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Professional.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "Administrative Assistant" }, { "elmType": "div", "attributes": { "class": "sp-card-content sp-card-formatterRef" }, "children": [ { "columnFormatterReference": "[$Executive_x0020_Assistant]" } ] } ] } ] } ] } }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, I think there has to be an if statement on line 153. I need the label to be Executive Assistant, but if it is a particular display name i.e. Jane Doe, I want it to display "Administrative Assistant".
I've tried: "txtContent": "=if([$Executive_x0020_Assistant.title] == 'Jane Doe', 'Administrative Assistant', 'Executive Assistant ' + [$Executive_x0020_Assistant.title])"
}
But it doesn't appear to work.What is the column type of Executive Assistant column, person/people or single line of text or something else?
If it is a person column, this should work for you:
"txtContent": "=if([$Executive_x0020_Assistant.title] == 'Jane Doe', 'Administrative Assistant', 'Executive Assistant ' + [$Executive_x0020_Assistant.title])"Make sure you are using correct internal name of your columns in JSON. Also, make sure you are using correct user name, case-sensitive texts, etc.
You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?
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.
