SharePoint List Form Formatting JSON Examples

by

When working with a SharePoint Online list, we usually need to format the list fields using JSON to make the list view more attractive and responsive.

Follow this SharePoint tutorial to get all the information about the SharePoint list form JSON formatting examples, including:

  • SharePoint Online List Title Column JSON Format
  • SharePoint Online List Choice Column JSON Format
  • SharePoint Online List Number Column JSON Format
  • SharePoint Online List Date Column JSON Format
  • SharePoint Online List Person Column JSON Format
  • SharePoint Online List Conditional Formatting
  • Customize SharePoint Online List Conditional Formatting

SharePoint List Formatting JSON Examples

Microsoft also allows us to customize columns in SharePoint lists and libraries by using column formatting with JSON. By using JSON we can format text, date, people, number and choices field, etc. SharePoint list column types.

SharePoint Online list Column formatting does not affect data in lists or libraries. It changes the display of lists/libraries with various colors, icons, font effects, etc. For this, we have to construct a JSON object to describe the elements that are displayed in the browser.

SharePoint Online List Title Column JSON Format

I have a Sharepoint Online list named “Travel Requests,” and this list contains the below fields.

Column NameData Type
Trip TitleIt is a default single line of text
DestinationLocation
AirlineChoice
Estimated AirlineNumber
Requested ByRequested By
ApprovedApproved
sharepoint form formatting json examples

Now, I would like to format or customize the SharePoint list Title [Trip Title] column using JSON format. To do so, follow the below steps. Such as:

1. Open the SharePoint Online list and expand the Title column that you want to format the color code. Then select the Column settings and click on the Format this column option, as shown below:

sharepoint json examples

2. In the Format columns properties pane, Select or choose Advanced mode as shown below.

sharepoint column formatting json examples

3. Now, remove the default JSON format code and add a new JSON code for formatting the title column values in green color. Then click on the Save button.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "style": {
    "color": "Green"
  },
  "elmType": "div",
  "txtContent": "@currentField"
}
sharepoint json formatting

4. Once all your updates are done, have a look at the screenshot below for the output.

This is how we can work with the SharePoint Online list title column JSON format.

json code for sharepoint list

SharePoint Online List Choice Column JSON Format

Next, I will discuss how to use JSON format to customize or format the Choice column [Airline] in the SharePoint Online list. To achieve it, follow the below steps.

1. Expand the Choice field -> Select the Column settings -> Click on the Format this column option -> Select or choose Advanced mode option.

2. Next, remove the default JSON format code and add a new JSON code for color formatting the choice column values. Then click on the Save button.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'FinanceTeam', 'sp-field-severity--good', if(@currentField == 'Python Team', 'sp-field-severity--warning', if(@currentField == 'SharePoint Team', 'sp-field-severity--severeWarning','sp-field-severity--blocked'))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      }},
     
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}
sharepoint list formatting

Have a look at the below screenshot for the output.

Output:

sharepoint list formatting

SharePoint Online List Number Column JSON Format

In this example, I will show you how to use JSON conditional formatting. For example, when the value of the current field is greater than or equal to 5000, it will highlight the value of the field with yellow color.

To do so, follow the below JSON code for formatting a number field.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "attributes": {
      "class": "=if(@currentField >= 5000,'sp-field-severity--warning', '')"
    },
    "children": [
      {
        "elmType": "span",
        "style": {
          "display": "inline-block",
          "padding": "0 4px"
        },
        "attributes": {
          "iconName": "=if(@currentField <= 10,'Error', '')"
        }
      },
      {
        "elmType": "span",
        "txtContent": "@currentField"
      }
    ]
  }
sharepoint json

This way we can work with the SharePoint Online list number column JSON format.

SharePoint Online List Date Column JSON Format

In the same way, I will show you how to format the date and time column [Travel Start Date] using JSON format. [When the Travel Start Date is less than or equal to today, it will display the date values in pink.] Follow the code below.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$TravelStartDate] <= @now, '#FF33CA', '')"
  }
}
sharepoint list formatting samples

SharePoint Online List Person Column JSON Format

Lastly, I will show how to format the SharePoint list Person field [Add Person icon] using the JSON format. Follow the code below.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "8px"
      },
      "txtContent": "@currentField.title"
    },
    {
      "elmType": "a",
      "attributes": {
        "iconName": "People"
      }
    }
  ]
}

This way, we can work with the SharePoint Online list person column JSON format.

sharepoint column formatting json example

SharePoint Online List Conditional Formatting

In this section, we will see how to work with the SharePoint Online list conditional formatting [Without using JSON format]. To do so, follow the below steps.

1. Expand the Choice field, select the Column settings, and click on the Format this column. Then, select the Conditional formatting, Add the rule [If Airline is equal to Alaska Air], and change the Sample text color to Green.

2. Finally, click on the Save button.

sharepoint online json formatting

3. Now, have a look at the below screenshot for the output.

Output:

sharepoint list formatting json examples

Customize SharePoint Online List Conditional Formatting

Lastly, I will show you how to customize SharePoint Online list conditional formatting. To do so, follow the below steps.

1. On the Conditional formatting page, select the existing rule […], where you will get the three options. Such as:

  • Move down
  • Edit rule
  • Delete rule

2. Also, you can select the + Add rule option to add a new rule, as shown below.

sharepoint online list json

3. Now, change the Sample text to Purple color under the “Show all values as” option, as shown below.

Output:

sharepoint online list formatting

This way, we can work with how to customize SharePoint Online list conditional formatting.

I trust this SharePoint Online tutorial is helpful. If you have any requirements related to the SharePoint Online list JSON formatting, You can follow all the examples that I have done in this post.

You may also like:

  • In the section, “Customize the SharePoint Online List Form Body using JSON formatting”, is there a way to add text outside of the display name? I’ve created an ‘Agreement’ section in my own form, but need to find a way to also include the policies that one would be agreeing to by filling out the section. Any way to implement this would be greatly appreciated. Thank you!

    Reply
    • >