Forum Discussion
Two JSON questions regarding formatting a Tile View for a SharePoint list
I have a SharePoint list that I have formatted to display in a tile view and because of my lack of knowledge of JSON structure and how it works, I'm not sure how or where to add what I need to bold the column headers and to put a border around each tile.
My tiles are very simple and have just three columns I want displayed. I know how to change the sp-card info for the class to get a bolder look but it's bolding the entire column (title AND contents).
And there's a soft grey border around each tile and I would like to change the color and bold that as well if possible?
Here's what I currently have:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 413,
"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-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
},
"txtContent": "[!Nominees.DisplayName]",
"style": {
"white-space": "normal",
"word-break": "break-word",
"font-size": "13px"
}
},
{
"elmType": "p",
"attributes": {
"title": "[$Nominees]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Nominees] == '', '–', [$Nominees])",
"style": {
"-webkit-line-clamp": "2",
"white-space": "normal",
"word-break": "break-word",
"font-size": "13px",
"height": "30px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Why_x0020_have_x0020_they_x0020_.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Why_x0020_have_x0020_they_x0020_]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline"
},
"txtContent": "=if ([$Why_x0020_have_x0020_they_x0020_] == '', '–', [$Why_x0020_have_x0020_they_x0020_])",
"style": {
"-webkit-line-clamp": "2",
"white-space": "normal",
"word-break": "break-word",
"font-size": "13px",
"height": "250px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Nominator.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "[$Nominator]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Nominator] == '', '–', [$Nominator])"
}
]
}
]
}
]
}
}
And here's what it looks like:
Any help is greatly appreciated!
2 Replies
You could try this. I have made some slight changes and I believe it should make the column headers bold, black and slightly bigger.
It should also change the color of the border around the tile.
As I am far from an expert, I hope it works to that extent. I'm not sure how to make the tile-border bold yet (I'm not usually using tiles).
I have pulled the particular expressions from this website:
https://zerg00s.github.io/sp-modern-classes/ (zerg00s.github.io)
You can, for example, pick a different color for the border by looking through the (many) examples and finding a similar expression for a different color. I hope that makes sense.
Im also attaching a (low quality) screenshot where I have highlighted where exactly I have made changes. The first one describes the border color, the other three each format the column title.
Hope it helps!
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 413, "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-DarkPurpleText sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-css-color-black sp-field-bold sp-field-fontSize17" }, "txtContent": "[!Nominees.DisplayName]", "style": { "white-space": "normal", "word-break": "break-word", "font-size": "13px" } }, { "elmType": "p", "attributes": { "title": "[$Nominees]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Nominees] == '', '–', [$Nominees])", "style": { "-webkit-line-clamp": "2", "white-space": "normal", "word-break": "break-word", "font-size": "13px", "height": "30px" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-css-color-black sp-field-bold sp-field-fontSize17" }, "txtContent": "[!Why_x0020_have_x0020_they_x0020_.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Why_x0020_have_x0020_they_x0020_]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline" }, "txtContent": "=if ([$Why_x0020_have_x0020_they_x0020_] == '', '–', [$Why_x0020_have_x0020_they_x0020_])", "style": { "-webkit-line-clamp": "2", "white-space": "normal", "word-break": "break-word", "font-size": "13px", "height": "250px" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-css-color-black sp-field-bold sp-field-fontSize17" }, "txtContent": "[!Nominator.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Nominator]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Nominator] == '', '–', [$Nominator])" } ] } ] } ] } }- Trying to bump this as I still need help if anyone can?
