• View formatting
• Highlight a row based on a date column
• Mark a row if the date is today
• Mark a row if the date is x (14) days in the future from today
• Command bar formatting
• Column formatting
• Default syntax
• Set Values
• Set the current date to a date column
• Set a choice value with a button
• Split semicolon separated text into individual https links
• Formatting based on content type
• Edit button with pencil icon
• Run a flow
• Running a flow from a different environment
• Word Wrap
• Do not wrap and hide overflows
• Remove file extension
• Build a number based of ID and the year of creation
• Links to filtered views
• Replace text
• Check if field values are empty
• Putting buttons in a hover card that set values
• Create links from lookup values to site pages
• Form formatting
• Blank header
• Conditionally display columns based on other columns
• Wrap all properties
• Ordering into sections with section names
• Form or column validation
• Changelog

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

View formatting

Highlight a row based on a date column

@now returns the timestamp in milliseconds, therefore, you need to use milliseconds to add or subtracts days. For example, 14 days is: 1209600000

Mark a row if the date is today

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$evgSubscriberEnd] = @now,'sp-css-backgroundColor-BgPeach', '')"
}

Mark a row if the date is x (14) days in the future from today

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$evgSubscriberEnd] <= @now + 1209600000,'sp-css-backgroundColor-BgPeach', '')"
}

Command bar formatting

This syntax is always put into the view formatting.

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

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 Values

Set the current date to a date column

With a text as a button.

Set a choice value with a button

Button is an icon, not a text.

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.

Formatting based on content type

This example shows a text when a the content type has 0x0120 in its id (meaning its a folder) and shows the set value when its not a folder.

Edit button with pencil icon

With the theme primary colors.

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.

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.

"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"
}

Do not wrap and hide overflows

This might be interesting if multi-line columns take a lot of space in your list by wrapping automatically.

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

Remove file extension

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”

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.

Replace text

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=replace(@currentField, 'Open', 'Offen')"
}

Check if field values are empty

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.

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:

Form formatting

Blank header

{
  "elmType": "div"
}

Conditionally display columns based on other columns

Official source: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-conditional-show-hide#specify-conditional-formula-to-show-or-hide-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

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.

1. 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.
Copy

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

2. 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.
Copy

=[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

Changelog