Forum Discussion
Two JSON questions regarding formatting a Tile View for a SharePoint list
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])"
}
]
}
]
}
]
}
}