Document library json formatting filetype icon for folder

Question

I've created some custom formatting for a document library view.

I'm displaying file type icons depending on file type.

My problem is identifying when the item is actually a folder rather than a file - currently folders use my fallback generic image so aren't identifiable. if([$File_x0020_Type] doesn't seem to accept folder or directory - guessing this isn't the right approach anyway.

Any help much appreciated.

Relevant bit of json

"children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "= 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20240610.001/assets/item-types/20/' + if([$File_x0020_Type] == 'png', 'photo.svg', if([$File_x0020_Type] == 'docx', 'docx.svg', if([$File_x0020_Type] == 'doc', 'docx.svg', if([$File_x0020_Type] == 'ppt', 'pptx.svg', if([$File_x0020_Type] == 'pptx', 'pptx.svg', if([$File_x0020_Type] == 'xls', 'xlsx.svg', if([$File_x0020_Type] == 'xlsx', 'xlsx.svg', if([$File_x0020_Type] == 'pdf', 'pdf.svg', if([$ItemType] == 'Folder', 'folder.svg',  'genericfile.svg'))",
                      "alt": "file icon"
                    },
                    "style": {
                      "width": "20px",
                      "max-width": "20px",
                      "height": "20px",
                      "margin-right": "10px"
                    }
                  },
                  {
                    "elmType": "a",
                    "txtContent": "[$FileLeafRef]",
                    "style": {
                      "text-decoration": "none",
                      "width": "100%"
                    },
                    "attributes": {
                      "href": "= [$FileRef]",
                    }
                  }
                ]

Full json

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-List-cell"
        },
        "style": {
          "display": "=if(@rowIndex == 0, 'flex', 'none')",
          "font-weight": "bold",
          "font-size": "14px",
          "font-family": "Public Sans",
          "width": "100%",
          "border-bottom": "1px solid #ddd"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "File",
            "style": {
              "width": "70%",
              "padding": "8px 5px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Modified",
            "style": {
              "width": "30%",
              "padding": "8px 5px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-row-listpadding"
        },
        "style": {
          "border-bottom": "1px solid #ddd",
          "font-family": "Public Sans",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "left"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "float": "left",
                  "font-size": "14px",
                  "padding": "8px 5px",
                  "width": "70%",
                  "display": "flex"
                },
                "attributes": {
                  "class": "sp-row-listPadding"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "= 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20240610.001/assets/item-types/20/' + if([$File_x0020_Type] == 'png', 'photo.svg', if([$File_x0020_Type] == 'docx', 'docx.svg', if([$File_x0020_Type] == 'doc', 'docx.svg', if([$File_x0020_Type] == 'ppt', 'pptx.svg', if([$File_x0020_Type] == 'pptx', 'pptx.svg', if([$File_x0020_Type] == 'xls', 'xlsx.svg', if([$File_x0020_Type] == 'xlsx', 'xlsx.svg', if([$File_x0020_Type] == 'pdf', 'pdf.svg', if([$ItemType] == 'Folder', 'folder.svg',  'genericfile.svg'))",
                      "alt": "file icon"
                    },
                    "style": {
                      "width": "20px",
                      "max-width": "20px",
                      "height": "20px",
                      "margin-right": "10px"
                    }
                  },
                  {
                    "elmType": "a",
                    "txtContent": "[$FileLeafRef]",
                    "style": {
                      "text-decoration": "none",
                      "width": "100%"
                    },
                    "attributes": {
                      "href": "= [$FileRef]"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "txtContent": "=toLocaleDateString([$Modified])",
                "style": {
                  "float": "left",
                  "font-size": "14px",
                  "padding": "8px 5px"
                },
                "attributes": {
                  "class": "sp-row-listPadding"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

You can identify folder based on either content type or FSObjType column while using JSON formatting. Check: sharepoint.stackexchange.com/questions/310791/… — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jan 30 at 8:40

Ganesh Sanap - MVP · Accepted Answer · 2025-01-30 09:52:12Z

In JSON formatting, you can identify folder based on either "Content Type" or "FSObjType" column (FSObjType='1' for folders and FSObjType='0' for files) in the SharePoint online document library.

Check: JSON formatting for downloading documents but only viewing folders.

Example:

Here is JSON view formatting example based on simple conditions:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-List-cell"
        },
        "style": {
          "display": "=if(@rowIndex == 0, 'flex', 'none')",
          "font-weight": "bold",
          "font-size": "14px",
          "font-family": "Public Sans",
          "width": "100%",
          "border-bottom": "1px solid #ddd"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "File",
            "style": {
              "width": "70%",
              "padding": "8px 5px"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Modified",
            "style": {
              "width": "30%",
              "padding": "8px 5px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-row-listpadding"
        },
        "style": {
          "border-bottom": "1px solid #ddd",
          "font-family": "Public Sans",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "left"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "float": "left",
                  "font-size": "14px",
                  "padding": "8px 5px",
                  "width": "70%",
                  "display": "flex"
                },
                "attributes": {
                  "class": "sp-row-listPadding"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "= 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20240610.001/assets/item-types/20/' + if([$FSObjType] == '1', 'folder.svg', [$File_x0020_Type] + '.svg')",
                      "alt": "file icon"
                    },
                    "style": {
                      "width": "20px",
                      "max-width": "20px",
                      "height": "20px",
                      "margin-right": "10px"
                    }
                  },
                  {
                    "elmType": "a",
                    "txtContent": "[$FileLeafRef]",
                    "style": {
                      "text-decoration": "none",
                      "width": "100%"
                    },
                    "attributes": {
                      "href": "= [$FileRef]"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "txtContent": "=toLocaleDateString([$Modified])",
                "style": {
                  "float": "left",
                  "font-size": "14px",
                  "padding": "8px 5px"
                },
                "attributes": {
                  "class": "sp-row-listPadding"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Output:

Realising I have another issue - with json-formatted view like this clicking folders takes the user out of the current view and back to the default view. Is there any workaround for this? — sjc
– sjc, Commented Jan 31 at 0:32
As a workaround, you could set the current view as default view. — Emily Du - MSFT
– Emily Du - MSFT, Commented Jan 31 at 9:03
Try using defaultClick customRowAction, it should work for you. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Feb 1 at 10:30
Good idea Emily, thanks. Unfortunately that won't work for me as I only need this view in some instances in this use case. — sjc
– sjc, Commented Feb 3 at 23:39
Just to follow this up I wasn't able to use the defaultClick customRowAction as this looks to only work with "elmType": "button". Instead I just used css to hide the entire row if it has a folder: "display": "=if( ([$FSObjType] == '0' ), 'block', 'none')" — sjc
– sjc, Commented Feb 6 at 6:05

Stack Exchange Network

Document library json formatting filetype icon for folder

1 Answer 1

Your Answer

Linked

Hot Network Questions

Document library json formatting filetype icon for folder

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions