JSON formatting in SharePoint Online

🚧

Here are some code snippets of column formatting I have used in SharePoint Online. I will add more snippets over time.

List Formatting Samples

You can use List Formatting to customize how fields and views in SharePoint lists and libraries are displayed. List Formatting is applied by constructing a JSON object that describes the elements that are displayed for a field or view and the styles to be applied to those elements.

pnp.github.io

Here you will find some token to use (@currentWeb or @currentField)

Formatting syntax reference

learn.microsoft.com

Here are all available UI icons for buttons or flows. Copy the friendly name with a right-click.

Office UI Fabric Icons

uifabricicons.azurewebsites.net

List/view formatting

Command bar formatting

This syntax is always put into the view formatting.

You can set a specific button as primary (usually its the new button)
You can rename existing button and decide in what selection mode they are available, or what position they are in
Hide or show buttons depending on the selected view

{
  "commandBarProps": {
    "commands": [
      {
        "key": "upload",
        "primary": true
      },
      {
        "key": "newFolder",
        "text": "Create new folder",
        "iconName": "FabricNewFolder",
        "selectionModes": [
          "NoSelection"
        ],
        "position": 1
      },
      {
        "key": "new",
        "hide": true
      }
    ]
  }
}

‣

Hide all possible values (last check 15.11.2024)

Column formatting

Default syntax

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    //PUT YOUR BUTTONS AND FORMATS HERE
		//{CHILD1},{CHILD2}
  ]
}

Set the current date to a date column

With a text as a button.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent":"Set todays date",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "fileCloseDate": "=toDateString(@now)",
          "FileStatus": "Closed"
        }
      }
		}
  ]
}

Set a choice value with a button

Button is an icon, not a text.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
		{
      "elmType": "button",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "StatusPersonal": "Archiviert"
        }
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "style": {
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer",
        "font-size": "20px",
        "display": "block"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Archive"
          },
          "style": {
            "padding-right": "6px"
          },
          "customCardProps": {
            "formatter": {
              "elmType": "div",
              "txtContent": "Antrag archivieren",
              "style": {
                "font-size": "12px",
                "padding": "5px"
              }
            },
            "openOnEvent": "hover",
            "directionalHint": "bottomCenter",
            "isBeakVisible": true,
            "beakStyle": {
              "backgroundColor": "white"
            }
          }
        }
      ]
    }
  ]
}

Split semicolon separated text into individual https links

The column in multiline and multiple https links are pasted into the column and seperated by a semicolon. The code split the texts, then formats it as a clickable link and then adds a number depending on the position of the link.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "style": {
        "font-size": "12px",
        "display": "block",
        "padding-left":"5px"
      },
  "children": [
    {
      "elmType": "div",
      "forEach": "value in split(@currentField,';')",
      "children": [
        {
          "elmType": "a",
          "txtContent": "=if(length(@currentField) == 0,'','Image ' + toString(indexOf(split(@currentField,';'),[$value]) + 1) + ' ;')",
          "attributes": {
            "href": "[$value]",
            "target": "_blank"
          },
          "style": {
            "display": "block",
            "margin-bottom": "5px"
          }
        }
      ]
    }
  ]
}

Edit button with pencil icon

With the theme primary colors.

{
      "elmType": "button",
      "customRowAction": {
        "action": "editProps"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "style": {
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer",
        "font-size": "20px",
        "display": "block"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "EditSolid12"
          },
          "style": {
            "padding-right": "6px"
          },
          "customCardProps": {
            "formatter": {
              "elmType": "div",
              "txtContent": "Eigenschaften bearbeiten",
              "style": {
                "font-size": "12px",
                "padding": "5px"
              }
            },
            "openOnEvent": "hover",
            "directionalHint": "bottomCenter",
            "isBeakVisible": true,
            "beakStyle": {
              "backgroundColor": "white"
            }
          }
        }
      ]

Run a flow

It technically doesnt matter if the flow is not connected to that list. As long as the trigger is “For a selected item” or “manual” the flow will give basic information to the trigger like the item id or library.

Users need at least Edit Permissions in the list to be able to trigger the flow OR share the flow as run-only with users or groups.

🚨

Be aware that flows might have different IDs if you access them directly from “My flows” or through a solution. Use the direct access ID.

{
      "elmType": "button",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"FLOWID\"}"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "style": {
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer",
        "font-size": "20px",
        "display": "block"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "UpdateRestore"
          },
          "style": {
            "padding-right": "6px"
          },
          "customCardProps": {
            "formatter": {
              "elmType": "div",
              "txtContent": "Restart",
              "style": {
                "font-size": "12px",
                "padding": "5px"
              }
            },
            "openOnEvent": "hover",
            "directionalHint": "bottomCenter",
            "isBeakVisible": true,
            "beakStyle": {
              "backgroundColor": "white"
            }
          }
        }
      ]
    }

Running a flow from a different environment

Users need at least Edit Permissions in the list to be able to trigger the flow OR share the flow as run-only with users or groups.

🚨

Be aware that flows might have different IDs if you access them directly from “My flows” or through a solution. Use the direct access ID.

"customRowAction": {
            "action": "executeFlow",
            "actionParams": "{\"id\": \"v1/ENVIRONMENT-ID/FLOW-ID\"}"
}

Word Wrap

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style":{
        "white-space":"wrap"
  },
  "txtContent": "@currentField"
}

Remove file extension

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=substring('@currentField',0,indexOf('@currentField', '[$File_x0020_Type]')-1)",
  "style": {
    "font-size": "14px"
  },
  "attributes": {
    "class": "ms-fontColor-themeSecondary ms-fontColor-neutralPrimary--hover ms-fontWeight-semibold"
  },
  "customRowAction": {
    "action": "defaultClick"
  }
}

Build a number based of ID and the year of creation

This is based on a english format date with this format “month/day/year”

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  },
  "txtContent": "=substring(toLocaleDateString([$Created]),lastIndexOf(toLocaleDateString([$Created]),'/') + 1,32) + '-' + [$ID]"
}

Links to filtered views

This was based on a number column that was the ID in the other list, that this link will go to.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "='Assessment-Id: ' + @currentField",
   "attributes": {
      "target": "_blank",
      "href": "=@currentWeb + '/Lists/Assessments/AllItems.aspx?FilterField1=ID&FilterValue1=' + @currentField +  '&FilterType1=Counter'"
   }
}

Check if field values are empty

String	`[$cmsContractOwner] = ''`
Managed Meta Data Lookup	`toString([$cmsContractStatus]) = ''`
Date	`Number([$cmsContractStartDate]) = 0`

Putting buttons in a hover card that set values

You can see the example in the picture. In this case three values will be set based on the selected button.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
{
      "elmType": "div",
      "style": {
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer",
        "font-size": "20px",
        "display": "=if([$vmsStatus] == 'In Arbeit','block','none')",
        "padding-right": "6px"
      },
      "attributes": {
        "iconName": "RemoveEvent",
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "style": {
            "flex-directon": "row",
            "justify-content": "left",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "Aufwand auswählen",
              "style": {
                "font-size": "14px",
                "padding": "5px",
                "font-weight": "bold"
              }
            },
            {
              "elmType": "button",
              "style": {
                "margin": "5px",
                "border-radius": "5px",
                "text-align": "center",
                "height": "25px",
                "width": "30px",
                "cursor": "pointer"
              },
              "txtContent": "S",
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontWeight-semibold ms-fontSize-14 ms-bgColor-themeLight--hover"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "vmsAktenschliessung": "=toDateString(@now)",
                  "vmsStatus": "Geschlossen",
                  "vmsAufwand": "S (30min -2h)"
                }
              }
            },
            {
              "elmType": "button",
              "txtContent": "M",
              "style": {
                "margin": "5px",
                "border-radius": "5px",
                "text-align": "center",
                "height": "25px",
                "width": "30px",
                "cursor": "pointer"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontWeight-semibold ms-fontSize-14 ms-bgColor-themeLight--hover"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "vmsAktenschliessung": "=toDateString(@now)",
                  "vmsStatus": "Geschlossen",
                  "vmsAufwand": "M (bis 5h)"
                }
              }
            },
            {
              "elmType": "button",
              "txtContent": "L",
              "style": {
                "margin": "5px",
                "border-radius": "5px",
                "text-align": "center",
                "height": "25px",
                "width": "25px",
                "cursor": "pointer"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontWeight-semibold ms-fontSize-14 ms-bgColor-themeLight--hover"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "vmsAktenschliessung": "=toDateString(@now)",
                  "vmsStatus": "Geschlossen",
                  "vmsAufwand": "L (bis 10h)"
                }
              }
            },
            {
              "elmType": "button",
              "txtContent": "XL",
              "style": {
                "margin": "5px",
                "border-radius": "5px",
                "text-align": "center",
                "height": "25px",
                "width": "35px",
                "cursor": "pointer"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontWeight-semibold ms-fontSize-14 ms-bgColor-themeLight--hover"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "vmsAktenschliessung": "=toDateString(@now)",
                  "vmsStatus": "Geschlossen",
                  "vmsAufwand": "XL (bis 30h)"
                }
              }
            },
            {
              "elmType": "button",
              "txtContent": "XXL",
              "style": {
                "margin": "5px",
                "border-radius": "5px",
                "text-align": "center",
                "height": "25px",
                "width": "40px",
                "cursor": "pointer"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontWeight-semibold ms-fontSize-14 ms-bgColor-themeLight--hover"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "vmsAktenschliessung": "=toDateString(@now)",
                  "vmsStatus": "Geschlossen",
                  "vmsAufwand": "XXL (über 30h)"
                }
              }
            }
          ]
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
}

Create links from lookup values to site pages

If you have a lookup column, that points to a site page in your site collection the link actually navigates to the item and not the page itself. Pretty inconvenient, if you ask me. Here is a way to fix this (Lookup column is multi-select and references the title). As long as title and url are the same we are good to go with this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block"
  },
  "children": [
    {
      "elmType": "div",
      "forEach": "item in @currentField",
      "children": [
        {
          "elmType":"a",
          "txtContent": "[$item.lookupValue]",
      "attributes": {
      "target": "_blank",
      "href": "=@currentWeb + '/SitePages/' + replaceAll([$item.lookupValue],' ','-') + '.aspx'"
   }
        }
      ]
    }
  ]
}

Form formatting

Conditionally display columns based on other columns

In the properties pane of an item, click on edit columns, then on the three dots next to the column that you want to show dynamically. Click “Edit conditional formula” and use the example. The result of the formula should always be either true or false.

//If category is a text field
=if([$Category] == 'Product Management', 'true', 'false')
//If checkbox is a boolean 
=if([$checkbox],'true', 'false')

Be aware that there are limitations: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-conditional-show-hide

⛔

If the column you decide to hide is required but empty, this will not work as required columns are still required even if hidden. The conditional hiding will also not work in the creation screen of document sets.

Wrap all properties

Paste the code into the body section of the list form.

It will wrap all properties in the “Edit all” form like this:

{
  "sections": [
    {
      "fields": []
    }
  ]
}

Ordering into sections with section names

{
  "sections": [
    {
      "displayname": "Section 1",
      "fields": [
        "Title",
        "Name"
      ]
    },
    {
      "displayname": "Section 2",
      "fields": [
        "InternalName1",
        "InternalName2"
      ]
    }
  ]
}

Form or column validation

There is two ways to achieve validation. Always use the internal column names.

If you want to do it on a column itself, you can use the columns validation formula. This formula can only reference itself and not other columns. For a number column you could check if the entered number is bigger than 5.

=[StartDate] >= TODAY()
=[StartDate] >= (TODAY()+30)

If you want to validate columns by referencing other columns in the form, you should use the validation settings in the library settings. This will only allow to do exactly one check, so checking if Number1 is bigger than Number2. If you want to check for multiple conditions, you have to build nested conditions with If. Obviously, this puts a limit on the complexity.

=[EndDate]>[StartDate]
=[EndDate]>([StartDate]+30)

Using the syntax in English on a different language site collection works, but it translates it after you save.

All possible syntax is listed here: https://support.microsoft.com/en-us/office/examples-of-common-formulas-in-lists-d81f5f21-2b4e-45ce-b170-bf7ebf6988b3?ns=SPOSTANDARD&version=16

💡

Of course, its always possible to use Power Automate after the item was created to check all conditions. If a condition failed, you can notify the user with an adaptive card in Teams asking for the missing inputs.