Show/hide custom action with JSON Formatter in SharePoint based on file type

The Case

I had a customer case where they wanted to show or hide a setValue custom action (customRowAction) conditionally based on the type of document in a SharePoint document library. The custom action without any conditions applied looks like this:

The requirement was that they wanted to show this toggle button (setValue custom row action) only if the file type is a Word document (.docx).

The JSON for showing the toggle button without any conditions for hiding/showing the button looks as follows:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "width": "100%",
    "height": "100%",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "width": "48px",
        "height": "24px",
        "border-radius": "15px",
        "align-items": "center",
        "flex-direction": "row",
        "justify-content": "=if(@currentField , 'flex-end' , 'flex-start')",
        "cursor": "pointer"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "SkapaPDF": "=if(@currentField , '0' , '1' )"
        }
      },
      "attributes": {
        "class": "=if(@currentField , 'ms-bgColor-themePrimary' , 'ms-bgColor-neutralTertiaryAlt')"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "14px",
            "height": "14px",
            "margin-left": "6px",
            "margin-right": "6px",
            "border-radius": "50%"
          },
          "attributes": {
            "class": "ms-bgColor-white"
          }
        }
      ]
    }
  ]
}

The Solution

The solution is to make use of the file name by the “FileLeafRef” field of the document together with the indexOf operator. Replace the “display” property of the child div element with the following code:

"display": "=if(indexOf([$FileLeafRef], '.docx') > 0, 'flex', 'none')"
Change display

The result looks like this:

Leave a comment