SP Formatter: Form Layouts support!

22 December 2021 Sergei-Sergeev Column Formatting

SP Formatter is a Chromium (supports Chrome and Edge) extension, which makes SharePoint Column, View and Form Layout JSON formatting a lot easier and faster. 

The most notable features: 

  • Live Preview as you type
  • Rich Intellisense (suggestions) based on JSON schema, including CSS styles, "@" tokens (@currentField, etc.), "$" (to insert field values)
  • VSCode integration mode - see the live preview of your formatting JSON as you type in VSCode
  • Easy and fun to use

Recently SP Formatter was updated and received Form Layouts support. More...

SharePoint Column Formatting tips: How to hide checked out documents

21 January 2021 Sergei-Sergeev Column Formatting

I had a need to hide all documents, which were checked out by users. With help of Column Formatting. When you check out documents, SharePoint sets a special field called CheckoutUser to be equal to a person, who checked out the document. The idea is to check if this field is null and hide a row in a view. 

However, the idea didn't work for some reason. The problem is, that CheckoutUser is a people field. In other words, it's a "complex" field and contains additional properties, like the user's email, id, etc. 

The trick was to use the email property of that field, to check if it's empty or not. In short:

"display": "=if([$CheckoutUser.email] != '', 'block', 'none')"

Having below full formatting JSON:

spoiler (click to show)
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "debugMode": true,
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-borderColor-neutralLight"
    },
    "style": {
      "box-sizing": "border-box",
      "display": "=if([$CheckoutUser.email] == '', 'block', 'none')",
      "width": "100%",
      "border-width": "1px",
      "border-style": "solid",
      "padding": "0 0 0 20px",
      "margin-bottom": "10px",
      "align-items": "stretch"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "display": "flex",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "1 0 300px",
              "box-sizing": "border-box",
              "padding": "10px"
            },
            "children": [
              {
                "elmType": "button",
                "attributes": {
                  "class": "ms-fontSize-xl"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "1em",
                  "border": "0",
                  "padding": "0px",
                  "color": "#0077ff",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "txtContent": "[$FileLeafRef]",
                "customRowAction": {
                  "action": "defaultClick"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-s"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "8px"
                },
                "txtContent": "='Modified by ' + [$Editor.title] + ', ' + toLocaleString([$Modified])"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "0 0 170px",
              "display": "flex",
              "flex-direction": "column"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "txtContent": "Edit Properties",
                "attributes": {
                  "class": "sp-row-button ms-bgColor-neutralLighter ms-fontWeight-semibold"
                },
                "style": {
                  "width": "145px",
                  "height": "32px",
                  "margin": "20px 0 10px 0"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

When applied, one checked out document was hidden:

Hope this little trick will help you build a little bit better column/view formatting experience. 

Title image credits - Solution Vectors by Vecteezy