Warn the user if a file is broken (not unzipped)

Learn how to warn the user if a file is broken (usually not unzipped) in a SharePoint library

The challenge

Drag and dropping files is a huge benefit of SharePoint libraries, but if the file dragged from a zipped file, it will look OK to the user, but actually it is not

The solution

Let’s create a JSON view formatting that warns the user by changing the color of a broken file to red

In the file name we will show a warning icon, and if the user hover the mouse over the icon we will tell them what is wrong

The code

To change the color of the broken file to red go to format current view

Insert following code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "additionalRowClass": "=if([$File_x0020_Size] == '0', 'sp-field-severity--blocked', '')"
}

To add the warning icon click on your column name -> column settings -> format this column

Insert following code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "transparent"
  },
  "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Warning",
        "class": "ms-font-l"
      },
      "style": {
        "padding-right": "6px",
        "display": "=if([$File_x0020_Size] == '0', 'inline', 'none')"
      },
      "customCardProps": {
        "openOnEvent": "hover",
        "formatter": {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "padding": "15px 45px 15px 15px"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "margin-bottom": "5px"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "bold"
                      },
                      "txtContent": "Your file is broken"
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "14px",
                        "margin-top": "10px"
                      },
                      "txtContent": "='Your file ' + @currentField + ' must be unzipped before uploading'"
                    }
                  ]
                }
              ]
            }
          ]
        },
        "directionalHint": "rightCenter",
        "isBeakVisible": true
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

There you go - we can now help/warn the users if they forgot to unzip a file

‎

The challenge

The solution

The code

See also