Column formattingSharePoint Online

Generic Super Type

This sample demonstrates recreating the `Type` column (folder/file icons) and adds meaningful hover panels.

Get this format View on GitHub

Shared by Chris Kent
Updated Nov 9, 2023

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style":{
    "display": "flex",
    "justify-content": "center"
  },
  "children": [
    {
      "📌COMMENT": "Folder Icon",
      "elmType": "div",
      "style": {
        "position": "relative",
        "display": "=if(startsWith([$ContentTypeId],'0x0120'),'','none')"
      },
      "children": [
        {
          "elmType": "svg",
          "attributes": {
            "viewBox": "0 0 32 32"
          },
          "style": {
            "width": "21px",
            "height": "21px",
            "padding-top": "4px"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
              },
              "style": {
                "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')"
              }
            },
            {
              "elmType": "path",
              "attributes": {
                "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
              },
              "style": {
                "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')"
              }
            },
            {
              "elmType": "path",
              "attributes": {
                "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z"
              },
              "style": {
                "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')"
              }
            },
            {
              "elmType": "path",
              "attributes": {
                "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z"
              },
              "style": {
                "fill": "#FFFFFF",
                "opacity": "0.4"
              }
            }
          ]
        },
        {
          "📌COMMENT": "Click Target for Folder",
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "right": "0",
            "bottom": "0"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "formatter": {
              "elmType": "div",
              "style": {
                "width": "172px",
                "height": "123px",
                "position": "relative"
              },
              "children": [
                {
                  "📌COMMENT": "Hides the edges of the big folder best we can",
                  "elmType": "div",
                  "style": {
                    "overflow": "hidden",
                    "position": "absolute",
                    "top": "0",
                    "bottom": "0",
                    "left": "0",
                    "right": "0"
                  },
                  "children": [
                    {
                      "📌COMMENT": "Big Folder!",
                      "elmType": "svg",
                      "attributes": {
                        "viewBox": "0 0 32 32"
                      },
                      "style": {
                        "width": "196px",
                        "height": "196px",
                        "position": "absolute",
                        "top": "-37px",
                        "left": "-12px"
                      },
                      "children": [
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
                          },
                          "style": {
                            "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')"
                          }
                        },
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
                          },
                          "style": {
                            "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')"
                          }
                        },
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z"
                          },
                          "style": {
                            "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')"
                          }
                        },
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z"
                          },
                          "style": {
                            "fill": "#FFFFFF",
                            "opacity": "0.4"
                          }
                        }
                      ]
                    }
                  ]
                },
                {
                  "📌COMMENT": "Folder Details",
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "top": "0",
                    "bottom": "0",
                    "left": "0",
                    "right": "0",
                    "display": "flex",
                    "flex-direction": "column",
                    "color": "white"
                  },
                  "children": [
                    {
                      "📌COMMENT": "Child Counts",
                      "elmType": "div",
                      "style": {
                        "display": "flex",
                        "font-size": "10px",
                        "justify-content": "space-around",
                        "width": "70px",
                        "line-height": "22px",
                        "cursor": "pointer"
                      },
                      "customRowAction": {
                        "action": "defaultClick"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "txtContent": "='📁 ' + [$FolderChildCount]",
                          "attributes": {
                            "title": "Total subfolders"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "='📄 ' + [$ItemChildCount]",
                          "attributes": {
                            "title": "Total items"
                          }
                        }
                      ]
                    },
                    {
                      "📌COMMENT": "Folder Name",
                      "elmType": "div",
                      "txtContent": "[$FileLeafRef]",
                      "style": {
                        "font-size": "20px",
                        "padding": "4px 4px 0 4px",
                        "font-weight": "bold"
                      }
                    },
                    {
                      "📌COMMENT": "Description",
                      "elmType": "div",
                      "style": {
                        "padding": "0 8px"
                      },
                      "children": [
                        {
                          "📌COMMENT": "No description",
                          "elmType": "div",
                          "style": {
                            "font-weight": "lighter",
                            "font-size": "10px",
                            "font-style": "italic",
                            "display": "=if(@currentField, 'none', 'flex')",
                            "align-items": "center",
                            "opacity": "0.8"
                          },
                          "children": [
                            {
                              "elmType": "div",
                              "attributes": {
                                "iconName": "Add"
                              },
                              "style": {
                                "font-size": "8px",
                                "padding-right": "4px"
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "To add a description, edit this folder in grid view"
                            }
                          ]
                        },
                        {
                          "elmType": "div",
                          "txtContent": "@currentField",
                          "style": {
                            "display": "=if(@currentField,'','none')",
                            "font-size": "12px",
                            "overflow": "auto",
                            "height": "64px"
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    },
    {
      "📌COMMENT": "Anything not a folder",
      "elmType": "div",
      "style": {
        "position": "relative",
        "display": "=if(startsWith([$ContentTypeId],'0x0120'),'none','')"
      },
      "children": [
        {
          "elmType": "filepreview",
          "filePreviewProps": {
            "fileTypeIconStyle": {
              "width": "22px",
              "background-color": "transparent",
              "top": "1px"
            },
            "brandTypeIconStyle": {
              "display": "none"
            }
          }
        },
        {
          "📌COMMENT": "Click Target for Document",
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "right": "0",
            "bottom": "0"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "formatter": {
              "elmType": "filepreview",
              "style": {
                "width": "172px"
              },
              "attributes": {
                "src": "@thumbnail.172"
              }
            }
          }
        }
      ]
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style":{
    "display": "flex",
    "justify-content": "center"
  },
  "children": [
    {
      "📌COMMENT": "Folder Icon",
      "elmType": "div",
      "style": {
        "position": "relative",
        "display": "=if(startsWith([$ContentTypeId],'0x0120'),'','none')"
      },
      "children": [
        {
          "elmType": "svg",
          "attributes": {
            "viewBox": "0 0 32 32"
          },
          "style": {
            "width": "21px",
            "height": "21px",
            "padding-top": "4px"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
              },
              "style": {
                "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')"
              }
            },
            {
              "elmType": "path",
              "attributes": {
                "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
              },
              "style": {
                "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')"
              }
            },
            {
              "elmType": "path",
              "attributes": {
                "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z"
              },
              "style": {
                "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')"
              }
            },
            {
              "elmType": "path",
              "attributes": {
                "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z"
              },
              "style": {
                "fill": "#FFFFFF",
                "opacity": "0.4"
              }
            }
          ]
        },
        {
          "📌COMMENT": "Click Target for Folder",
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "right": "0",
            "bottom": "0"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "formatter": {
              "elmType": "div",
              "style": {
                "width": "172px",
                "height": "123px",
                "position": "relative"
              },
              "children": [
                {
                  "📌COMMENT": "Hides the edges of the big folder best we can",
                  "elmType": "div",
                  "style": {
                    "overflow": "hidden",
                    "position": "absolute",
                    "top": "0",
                    "bottom": "0",
                    "left": "0",
                    "right": "0"
                  },
                  "children": [
                    {
                      "📌COMMENT": "Big Folder!",
                      "elmType": "svg",
                      "attributes": {
                        "viewBox": "0 0 32 32"
                      },
                      "style": {
                        "width": "196px",
                        "height": "196px",
                        "position": "absolute",
                        "top": "-37px",
                        "left": "-12px"
                      },
                      "children": [
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M15 8L13.732 6.732C13.2631 6.26319 12.6271 5.99988 11.964 6H3.5C2.67157 6 2 6.67157 2 7.5V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
                          },
                          "style": {
                            "fill": "=if([$_ColorHex]=='1','#D62E1F',if([$_ColorHex]=='2','#E56000',if([$_ColorHex]=='3','#33852C',if([$_ColorHex]=='4','#037D81',if([$_ColorHex]=='5','#036DC9',if([$_ColorHex]=='6','#7E54B8',if([$_ColorHex]=='7','#BC4293',if([$_ColorHex]=='8','#96A3A7',if([$_ColorHex]=='9','#F58076',if([$_ColorHex]=='10','#FF8E3D',if([$_ColorHex]=='11','#5BC26B',if([$_ColorHex]=='12','#5DC6C9',if([$_ColorHex]=='13','#73B3EB',if([$_ColorHex]=='14','#BA90F5',if([$_ColorHex]=='15','#ED87CB','#F5B800')"
                          }
                        },
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M15 8L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V24.5C2 25.3284 2.67157 26 3.5 26H28.5C29.3284 26 30 25.3284 30 24.5V9.5C30 8.67157 29.3284 8 28.5 8H15Z"
                          },
                          "style": {
                            "fill": "=if([$_ColorHex]=='1','#e53d28',if([$_ColorHex]=='2','#f27813',if([$_ColorHex]=='3','#3C9D49',if([$_ColorHex]=='4','#2B9993',if([$_ColorHex]=='5','#1D83CF',if([$_ColorHex]=='6','#9E63C9',if([$_ColorHex]=='7','#CD54B8',if([$_ColorHex]=='8','#B1B8BA',if([$_ColorHex]=='9','#FFADA6',if([$_ColorHex]=='10','#FFA96B',if([$_ColorHex]=='11','#89D08D',if([$_ColorHex]=='12','#77CECB',if([$_ColorHex]=='13','#88C9F8',if([$_ColorHex]=='14','#D3AEF6',if([$_ColorHex]=='15','#F8ABE9','#ffce3d')"
                          }
                        },
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M3.00014 25.5C2.71414 25.5 2.45014 25.416 2.22314 25.277C2.48614 25.709 2.95714 26 3.50014 26H28.5001C29.0431 26 29.5141 25.709 29.7771 25.277C29.5437 25.4216 29.2748 25.4988 29.0001 25.5H3.00014Z"
                          },
                          "style": {
                            "fill": "=if([$_ColorHex]=='1','#590700',if([$_ColorHex]=='2','#6B2500',if([$_ColorHex]=='3','#053B00',if([$_ColorHex]=='4','#003133',if([$_ColorHex]=='5','#032F54',if([$_ColorHex]=='6','#370086',if([$_ColorHex]=='7','#5C003D',if([$_ColorHex]=='8','#575757',if([$_ColorHex]=='9','#BD2113',if([$_ColorHex]=='10','#A14200',if([$_ColorHex]=='11','#0B6E1A',if([$_ColorHex]=='12','#07676B',if([$_ColorHex]=='13','#1F64A1',if([$_ColorHex]=='14','#7A2AD2',if([$_ColorHex]=='15','#B8148C','#B64D07')"
                          }
                        },
                        {
                          "elmType": "path",
                          "attributes": {
                            "d": "M14.129 9.621L15.75 8H15L13.732 9.268C13.2631 9.73681 12.6271 10.0001 11.964 10H2V10.5H12.007C12.8029 10.5001 13.5663 10.1839 14.129 9.621Z"
                          },
                          "style": {
                            "fill": "#FFFFFF",
                            "opacity": "0.4"
                          }
                        }
                      ]
                    }
                  ]
                },
                {
                  "📌COMMENT": "Folder Details",
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "top": "0",
                    "bottom": "0",
                    "left": "0",
                    "right": "0",
                    "display": "flex",
                    "flex-direction": "column",
                    "color": "white"
                  },
                  "children": [
                    {
                      "📌COMMENT": "Child Counts",
                      "elmType": "div",
                      "style": {
                        "display": "flex",
                        "font-size": "10px",
                        "justify-content": "space-around",
                        "width": "70px",
                        "line-height": "22px",
                        "cursor": "pointer"
                      },
                      "customRowAction": {
                        "action": "defaultClick"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "txtContent": "='📁 ' + [$FolderChildCount]",
                          "attributes": {
                            "title": "Total subfolders"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "='📄 ' + [$ItemChildCount]",
                          "attributes": {
                            "title": "Total items"
                          }
                        }
                      ]
                    },
                    {
                      "📌COMMENT": "Folder Name",
                      "elmType": "div",
                      "txtContent": "[$FileLeafRef]",
                      "style": {
                        "font-size": "20px",
                        "padding": "4px 4px 0 4px",
                        "font-weight": "bold"
                      }
                    },
                    {
                      "📌COMMENT": "Description",
                      "elmType": "div",
                      "style": {
                        "padding": "0 8px"
                      },
                      "children": [
                        {
                          "📌COMMENT": "No description",
                          "elmType": "div",
                          "style": {
                            "font-weight": "lighter",
                            "font-size": "10px",
                            "font-style": "italic",
                            "display": "=if(@currentField, 'none', 'flex')",
                            "align-items": "center",
                            "opacity": "0.8"
                          },
                          "children": [
                            {
                              "elmType": "div",
                              "attributes": {
                                "iconName": "Add"
                              },
                              "style": {
                                "font-size": "8px",
                                "padding-right": "4px"
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "To add a description, edit this folder in grid view"
                            }
                          ]
                        },
                        {
                          "elmType": "div",
                          "txtContent": "@currentField",
                          "style": {
                            "display": "=if(@currentField,'','none')",
                            "font-size": "12px",
                            "overflow": "auto",
                            "height": "64px"
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    },
    {
      "📌COMMENT": "Anything not a folder",
      "elmType": "div",
      "style": {
        "position": "relative",
        "display": "=if(startsWith([$ContentTypeId],'0x0120'),'none','')"
      },
      "children": [
        {
          "elmType": "filepreview",
          "filePreviewProps": {
            "fileTypeIconStyle": {
              "width": "22px",
              "background-color": "transparent",
              "top": "1px"
            },
            "brandTypeIconStyle": {
              "display": "none"
            }
          }
        },
        {
          "📌COMMENT": "Click Target for Document",
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "right": "0",
            "bottom": "0"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "formatter": {
              "elmType": "filepreview",
              "style": {
                "width": "172px"
              },
              "attributes": {
                "src": "@thumbnail.172"
              }
            }
          }
        }
      ]
    }
  ]
}

Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

/children/0 must NOT have additional properties

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample demonstrates recreating the Type column (folder/file icons) and adds meaningful hover panels. Shows you how to take advantage of SharePoint folder colors by referencing the [$_ColorHex] field. Additionally, demonstrates 2 different ways of using the filepreview element to show a file type icon and also a thumbnail preview of the file.

screenshot of the sample

Folder Colors

Color	_ColorHex value
Yellow	Empty or 0
Dark red	1
Dark orange	2
Dark green	3
Dark teal	4
Dark blue	5
Dark purple	6
Dark pink	7
Grey	8
Light red	9
Light orange	10
Light green	11
Light teal	12
Light blue	13
Light purple	14
Light pink	15

View requirements

This format can be applied to any column in your Document Library.

Sample

Solution	Author(s)
generic-supertype.json	Chris Kent

Version history

Version	Date	Comments
1.0	November 9, 2023	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Get this format

How to use this sample

Summary

Folder Colors

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Missing Information Callout

Publishing Status

Open Office Documents in View Mode