Two JSON questions regarding formatting a Tile View for a SharePoint list

Brass Contributor

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:

Tile View.png

 

Any help is greatly appreciated!

2 Replies
Trying to bump this as I still need help if anyone can?

@Beth_Culpepper 

 

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:

SharePoint Online CSS Classes :rocket: (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.

Screenshot 2023-12-19 171412.png

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