How to Format a SharePoint Online List Column using JSON?

In this SharePoint tutorial, I will show how to format a SharePoint Online list column using JSON. We will discuss JSON syntax and how to format a number column in the SharePoint list as data bars using JSON statements.

Here we will also work on conditional formatting a number range column and Date column in the SharePoint list using JSON functions. Also, we will see how to customize the SharePoint Online list form (Body) using JSON Statement.

Format a SharePoint List Number Column as Data Bars using JSON

Now let’s begin with how to use JSON format in the SharePoint online list, Number column as a data bar.

This format applies background-color and border-top styles to create a data bar for the number field.

The bars are arranged differently and vary in width based on the number value. For example, here we have taken the width – that is set to 100% when the value is greater than 40.

Follow the below instructions :

• Open the SharePoint Online list.
• Click on the dropdown of a number column (Time taken to Deliver Voucher).
• Click on the Column settings -> Select Format this column.

• Next, it will open the  Format Time Taken to Deliver voucher. Column -> Click on Format columns and select Advanced mode.

• In the Advanced mode, we can add the JSON format depending on the number column by selecting Learn more link.

• It will redirect to the Microsoft document, where we can copy JSON format regarding the formatting of number columns as data bars depending on the value of the number.

• Copy the code and paste it in the advanced mode of conditional formatting.
  • Note: Replace the current field with column header“@CurrentFeild”, with “@Time Taken to Deliver voucher”,

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@Time Taken to Deliver voucher",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@Time Taken to Deliver voucher >= 40, '100%', (@currentField * 5) + '%')"
  }
}

• Once it is done, click on save, then it will update the SharePoint Online list column with databars as shown below figure:

This is how to format the SharePoint Online list number column as a data bar using JSON Statement.

Add Conditional formatting to Number Range Column using JSON

Next, let’s discuss how to add conditional formatting to the number range column using JSON format.

We use conditional formatting depending on a numeric range when the value in the current field is less than or equal to 10.

If the value in the number column is between 0 and 10, the column appears as a severity warning with color. If the value in the number column is greater than 10, then the column appears without color.

• Open the SharePoint Online list.
• Click on the dropdown of a number column (No.of Vacancies).
• Click on the Column settings -> Select Format this column.

• Next, it will open the  Format No Of Vacancies column -> Click on Format columns and select Advanced mode.

• In the Advanced mode, we can add the JSON format depending on the number column by selecting Learn More link, from where we can copy the JSON format from the Microsoft document.

• Copy the code and paste it in the advanced mode of conditional formatting.
  • Note: Modify the current field based on the value in the column“=if(@currentField <= 10,’sp-field-severity–warning’, ”)”
• The JSON format schema is shown in the below code :

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

• After saving it will update the SharePoint Online list number column with a severity warning with colour as shown below figure:

This is how to add conditional formatting to a SharePoint Online number column using JSON Statement.

Add Conditional Formatting to SharePoint list Date Column Using JSON

Similarly, here we will see how to add conditional formatting to the SharePoint list date column using JSON statement.

By applying JSON format to the date column, the value present in the date column will be colored based on the condition applied.

If the Salary date (Date Column) is less than or equal to the current date, i.e.,[05/02/2023], it will be colored. If it is greater than the current date, it displays as usual without any changes. 

1. For the formatting, Open the SharePoint list -> Click the column header of a date column (Salary Date) -> Click Column formatting -> Select Format this column.
2. In the Advanced mode, enter the schema of JSON format mentioned in the below quote -> Click Save.

Follow the below code for formatting a Date column using a conditional JSON statement:

{

  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

  "elmType": "div",

  "debugMode": true,

  "txtContent": "@currentField",

  "style": {

    "color": "=if([$SalaryDate] <= @now, '#DE3163', '')"

  }

}

• Once it is applied, the color change of the Date column will appear as shown below :

This is how to format the SharePoint Online list date and time column using JSON Statement.

Customize SharePoint Online List Form (Body) Using JSON Format

Let us find out how to customize the SharePoint Online list form (Body) using JSON Statement.

The SharePoint list form (Body) customization does not change the data in the list item or file; it only changes how the form is displayed to users who browse the list or library.

Follow the below instructions to customize the SharePoint list form:

• Open the SharePoint Online list.
• Click New, it will open the item details in the display form as shown below:

• At the top of the form, expand the Edit Form icon and then select Configure layout.

• It will open the Format dialogue box with options like:
  • Apply formatting to – Choose Body
  • Formatting Code – apply the below code
• Click on Save.

{
    "sections": [
        {
            "displayname": "Job Details",
            "fields": [
                "Job ID",
                "Job Type",
                "Job Description",
                "Job Role"
            ]
        },
        {
            "displayname": "📅 Date Column section",
            "fields": [
                "Posted Date",
                "Expiry Date"
            ]
        },
        {
            "displayname": "Currency Column Section💰💰",
            "fields": [
                "Monthly Salary",
                "EPF",
                "Medical Allowances",
                "Monthly Salary"
            ]
        },
        {
            "displayname": "Remaining Columns of List",
            "fields": []
        }
    ]
}

• Categorize the list based on the different columns with headings :
  • “displayname”: “Enter the display name heading” [Job details, the Date column section, Currency column section, Remaining column section].
  • “fields”: Enter column names of the list i.e., [EX: “Posted Date”, “Expiry Date”]
• It will update the SharePoint Online list form (Body) with different sections.
• The updated list form with different sections, as you can be seen from the below image:

This is how to customize the SharePoint Online list form (Body) using JSON Statement.

Conclusion

Hope this tutorial has helped you to learn about how we can use JSON formatting in the SharePoint list column along with the examples below:

• SharePoint Online List Number Column as a Data Bar Using JSON Statement
• SharePoint Online List Column (Number Range) Conditional Formatting Using JSON Statement
• SharePoint Online List Column formatting( Date Column) Using JSON Statement
• Customize SharePoint Online List Form (Body) Using JSON Statement

You may also like:

• SharePoint Calculated Column to Extract Email from Person Field [using JSON]
• Move or Copy Files in SharePoint Document Library
• SharePoint list calendar view formatting
• SharePoint Online List Web Part
• Rename a SharePoint Online List