This code is a JSON definition for a SharePoint column...

September 3, 2025 at 07:27 PM

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "cursor": "pointer",
    "min-height": "24px",
    "min-width": "130px",
    "display": "=if([$FSObjType] == '1', 'none', 'inline-flex')",
    "align-items": "center",
    "text-overflow": "ellipsis",
    "overflow": "hidden",
    "white-space": "nowrap",
    "box-sizing": "border-box",
    "padding": "4px 8px 5px 8px",
    "margin": "9px 0px 9px 0px",
    "border-radius": "14px",
    "border-width": "=if(@currentField == 0, '1px', '0')",
    "border-style": "solid"
  },
  "attributes": {
    "role": "button",
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "0"
          ]
        },
        "sp-css-borderColor-neutralTertiaryAlt sp-css-backgroundColor-BgLightGray--hover",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "1"
              ]
            },
            "sp-css-backgroundColor-BgMauve sp-css-backgroundColor-BgViolet--hover sp-css-color-MauveFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "2"
                  ]
                },
                "sp-css-backgroundColor-errorBackground30 sp-css-backgroundColor-errorBackground30--hover sp-css-color-CoralFont",
                "sp-css-backgroundColor-successBackground30 sp-css-backgroundColor-successBackground30--hover sp-css-color-MintGreenFont"
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "flex": "auto"
      },
      "txtContent": "@currentField.display"
    },
    {
      "elmType": "span",
      "attributes": {
        "iconName": "OpenInNewWindow",
        "class": "=if(@currentField == 0, 'sp-css-color-themePrimary', '')"
      }
    }
  ],
  "customRowAction": {
    "action": "openApprovalDialog"
  }
}

This code is a JSON definition for a SharePoint column formatting configuration. Column formatting in SharePoint uses JSON to customize how fields in lists or document libraries are displayed.

Here’s what this specific code does:

JSON Schema Definition:
- The value for "$schema" points to the Microsoft SharePoint column formatting schema, ensuring the JSON follows SharePoint's rules for formatting.
Element Type and Styling:
- The overall element type (elmType) is defined as a <div> element.
- Various styles, such as minimum height, width, cursor type, display mode, and alignment, are applied to the <div>.
- Conditional logic is used for some styles:
  - For example, display is set to "none" if the item is a folder ([$FSObjType] == '1'), meaning folders will not display this formatting, and "inline-flex" for other items.
  - The border-width is "1px" if the field value (@currentField) is 0, and 0 otherwise.
Accessibility Role & Class Assignment:
- The role attribute is set to "button", making the <div> act and accessible as a button.
- Conditional logic is used to apply specific CSS classes to the button based on the value of the field (@currentField):
  - "0" applies one set of styles.
  - "1" applies another set (e.g., mauve/violet hover colors with specific text colors).
  - "2" applies error-related styles such as coral text, and other values default to success styles such as mint green.
Child Elements:
- The children array contains two child elements:
  - The first child is a <span> displaying the text content of @currentField.display, styled flexibly to fill available space.
  - The second child is another <span> used to display an icon named "OpenInNewWindow". Conditional logic applies the class assigning a primary color to the icon only if @currentField equals 0.
Custom Row Action:
- A custom action is defined using customRowAction. When the user interacts with the formatted field, it performs a specific action (openApprovalDialog). This might represent triggering an approval dialog box.

Summary:

This JSON configuration is used to create a visually styled, interactive column for a SharePoint list item or document library. The style, appearance, and behavior dynamically change based on the value of the field (@currentField) and whether the item is a folder. It includes hover effects, icons, conditional coloring, and an action to open an approval dialog when the field is clicked.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr