Possible to use column formatting in Tile view?

[JoeyD67]

I have a library that uses Document Sets and there are column son the Document Set content type.

I want to display the library using the Tile format like this:

For the columns at the bottom, I want to use a JSON custom formatter. But it doesn't seem to use them. It's using my formatter when I look at the details or in the grid view but not in the Tile view. Is there a way to customize the Tile view?

[#2]

@JoeyD67 

You can refer the JSON column formatting for the columns in Tiles view using columnFormatterReference.

You will have to open the Tile/Gallery view JSON in advanced mode and make the changes accordingly.

For example: Here is the JSON I used for DocSetColumn in the document library: 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "color": "red"
  },
  "txtContent": "@currentField"
}

Output: 

Here is the JSON I used for Tile/Gallery view in the document library: 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 323,
  "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": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "filepreview",
                    "attributes": {
                      "src": "@thumbnail.512x432"
                    },
                    "style": {
                      "height": "200px"
                    },
                    "filePreviewProps": {
                      "fileTypeIconClass": "sp-fileTypeIcon-cardDesigner",
                      "brandTypeIconClass": "sp-brandTypeIcon-cardDesigner"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!FileLeafRef.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-keyboard-focusable"
                },
                "txtContent": "[$FileLeafRef]",
                "defaultHoverField": "[$FileLeafRef]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!DocSetColumn.DisplayName]"
              },
              {
                "columnFormatterReference": "[$DocSetColumn]"
              }
            ]
          }
        ]
      }
    ]
  }
}

Note: You have to pass the internal name of your column to columnFormatterReference property. You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Output: 

---

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.