How to Add SharePoint Column Formatting with JSON?

A few days ago, a client asked us to customize a SharePoint Site Page that displays lists, libraries, list views, and recent documents related to the Task Management system.

To make the SharePoint site page visually more attractive and enhance the appearance of lists and libraries, I have added column formatting to the SharePoint list rather than displaying it without any customization.

The column formatting doesn’t change the data in the SharePoint list item or a file; it only changes how it displays to the user who browses the list.

The screenshot below shows a Modern SharePoint list customized via column formatting.

In this tutorial, we will discuss how to apply column formatting using JSON code in SharePoint Online.

I will also show you the different examples mentioned below for column formatting in SharePoint using JSON Object.

1. Format SharePoint Title Column as Unclickable with JSON Code
2. Conditional Formatting Based on Number Range in SharePoint
3. Format Number Column as a Data Bar in SharePoint
4. Format SharePoint Number Column with Trending Up/ Trending Down Icons
5. Apply Conditional Formatting to SharePoint Choice Column by JSON
6. Apply Conditional Formatting based on Date Ranges in SharePoint
7. Format SharePoint Date Column Based on Specific Date
8. Format Person Field Column with an Action Button in SharePoint Online
9. Apply Column Formatting to Multiple Person Field in SharePoint

Steps to Apply Column Formatting to Your SharePoint List

Now, I will show you the steps to apply column formatting in a SharePoint Online list.

In the SharePoint lists/libraries, we can add JSON directly in the Advanced mode to format the columns.

Steps to follow:

1. On your SharePoint lists/library, click the column header you want to format, then hover over Column settings and choose “Format this column“.

2. Then, the Format column pane opens; select Advanced mode. Enter the JSON you want to apply to the column, then click the Save button. Then the changes will be saved.

This is how you can apply json to your columns in SharePoint Online lists/ libraries.

Example 1:- Format Title Column In SharePoint Online List

Here, let me show you how to format the title column by using JSON code in one of my SharePoint lists.

By default, the Title column in SharePoint will be clickable and linked to the item.

This example shows how to make the Title column unclickable by applying json formatting to it.

Below is the SharePoint list, you can see from the screenshot, with different types of columns, where ‘TaskName‘ is the title column, which is clickable.

Now, I wanted to make it as unclickable by applying JSON Format to it.

Check out the steps below:

1. First, we have to click on the Title field. Then go to the Column setting. Select Format this column. Then go to Advanced mode. Now just put the JSON code.

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

2. To preview your formatting, click “Preview.” To save, select Save. By Switch to design mode, you can reset your display to default mode.

Output:

Check Out: Export and Import Power Automate Desktop Flows

Example 2:- Apply Conditional Column Formatting Based on Number Range in SharePoint Online

Here, I will show how to apply conditional formatting to a number column type in SharePoint based on its number range.

Below, you can see the SharePoint list, which has a “Task Tracker” list with a ‘Task Progress Days‘ column.

I wanted to format this column to display a severity warning if the value in the current field is less than 15. Then it will highlight the value of the field with a severity warning. It will appear normal when the value is greater than 15.

From the above examples, you might have known how to apply the JSON code format to your SharePoint list column.

Apply the code placed below in the Advanced mode to format the number column based on its number range.

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

In the code provided above, you can modify the number values and icon names according to your requirements.

Output:

Learn: Display Excel Spreadsheet in SharePoint Online

Example 3:- Format SharePoint Number Column with Data Bar

This example applies the background color and border top styles to create the data bar visualization on a number field in SharePoint.

Here, you will see the same SharePoint list, i.e, ‘Task Tracker list‘ with ‘Percent of Task Completed‘ column.

My requirement is to format this column as a data bar, where it displays the bars based on the value present in the ‘Percent of Task Completed‘ column.

I wanted to display the bar’s size as ‘Complete‘ if the Percentage of the Task completed is greater than 90. The remaining values will be displayed based on the current field value.

For example, if the value is 30, the data bar will be calculated as (30*1); therefore, 30% will be displayed.

Copy and paste the code provided below in the Advanced mode of your number column of the SharePoint list or library.

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

Output:

More: SharePoint List Title Column [Remove or Hide Title Column With Examples]

Example 4:- Format Number Column with Trending Up/ Trending Down Icons in SharePoint

This example shows how to apply formatting to a number column in SharePoint to display up and down arrows on the number field.

Here, the JSON code will compare the two number column values and display a trending icon next to the column where the JSON code was applied, by comparing the value present in another number column.

I will take one of my SharePoint lists to show this example. This is the SharePoint list I used: [Budget List]. Look at the image below:

From the SharePoint list displayed above, see that there are two numeric columns [Allocated Amount, Actual Amount]. I wanted to display the Up/Down arrow icons in the Allocated Amount field, depending on the value compared to the Actual Amount.

• Displays sp-field-trending–up arrow icon, when Allocated Amount > Actual Amount.
• Displays sp-field-trending–down arrow icon, when Allocated Amount < Actual Amount.

Follow the code below to format a Number column in SharePoint with a Trending up/down arrow icons.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": {
          "operator": "?",
          "operands": [
            {
              "operator": ">",
              "operands": [
                "[$AllocatedAmount]",
                "[$ActualAmount]"
              ]
            },
            "sp-field-trending--up",
            "sp-field-trending--down"
          ]
        },
        "iconName": {
          "operator": "?",
          "operands": [
            {
              "operator": ">",
              "operands": [
                "[$AllocatedAmount]",
                "[$ActualAmount]"
              ]
            },
            "SortUp",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "<",
                  "operands": [
                    "[$AllocatedAmount]",
                    "[$ActualAmount]"
                  ]
                },
                "SortDown",
                ""
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$AllocatedAmount]"
    }
  ]
}

You can replace the column names with your SharePoint column names in the code.

Copy and paste the JSON in the Advanced mode of the column that you want to format. Refer to the image below.

Result:

Example 5:- Apply Conditional Formatting to SharePoint Choice Column by JSON

By using JSON, you can also apply conditional formatting to a SharePoint choice column.

I will show you a SharePoint list, [Task Tracker], that has a choice column, i.e., [Task Status], with different types of status values, such as Initiated, In Progress, In Review, Completed, and Not Started.

I wanted to format this column to make it visually appealing, with icons and background colors varying depending on the status value. This will help you to distinguish the severity of different levels with icons.

On your SharePoint list/library, click the Advanced mode of the column of your choice, where you can insert the JSON format. Paste the JSON code below

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Completed', 'sp-field-severity--good', if(@currentField == 'In Progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Not Started', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Completed', 'CheckMark', if(@currentField == 'In Progress', 'Forward', if(@currentField == 'In review', 'lock', if(@currentField == 'Not Started', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Output:

Check Out: Check SharePoint Version Using PowerShell

Example 6:- Apply Formatting Based on Date Ranges in SharePoint

In this example, I will demonstrate how to format the SharePoint list date column value to red using JSON.

You can apply formatting to the value in the date & time field, which highlights the date value based on deadlines, timelines, and other relevant information.

You can see below that there is a ‘Project Tracker‘ list, with a Project End Date column.

Here, I want to display the ‘Project End Date‘ value in Red color if the date value is less than or equal to the current date and time. If the Project End Date value is greater than the current date and time, it will display as usual.

Note:

In JSON column formatting, you can use @now to resolve the current date and time.

Apply the below-given JSON in the Advanced mode of the SharePoint list date column that you want to format. Then, click on Save to see the changes applied.

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

Result:

Example 7:- Format SharePoint Date Column Based on Constant Date

Let’s see how to apply formatting to a SharePoint list date and time column based on a constant date value by using JSON code.

This is the ‘Event Tracker List‘, which includes the Event Name, Event Start Date, and Event End Date, as shown in the image below.

Here, I wanted to apply formatting to this Event End Date column if the event end date is less than or equal to a constant date, i.e., ‘07/22/2025‘.

• If the Event end date <= constant date, i.e., ‘07/22/2025‘ -> ‘Red‘ Color, else, ‘Green‘ color.

In the JSON code provided below, to compare the date/time field values against a date constant, the Date() method is used to convert a string to a date.

JSON Code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "color": {
      "operator": "?",
      "operands": [
        {
          "operator": "<=",
          "operands": [
            "[$EventEndDate]",
            {
              "operator": "Date()",
              "operands": [
                "07/22/2025"
              ]
            }
          ]
        },
        "#ff0000",
        "#048012"
      ]
    }
  }
}

Then, click on Save to apply the changes.

Output:

Learn More: Create SharePoint lists from JSON Using Power Automate

Example 8:- Format SharePoint Person Field Column with an Action Button

In this example, let’s see how to format the SharePoint person column by adding an action button using JSON.

By formatting the Person column with the action button, it renders action links following the person field. When clicked, it will directly navigate to the Outlook email of the current user.

Follow the steps to add JSON code to format the column in your SharePoint list or library.

{
  "$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",
      "style": {
        "text-decoration": "none"
      },
      "attributes": {
        "iconName": "Mail",
        "class": "sp-field-quickActions",
        "href": {
          "operator": "+",
          "operands": [
            "mailto:",
            "@currentField.email",
            "?subject=Task status&body=Check out the Status of Project Assigned To You.\r\n---\r\n",
            "@currentField.title",
            "\r\nClick this link for more info. https://szg52.sharepoint.com/sites/HumanResourcesDepartment/Lists/ProjectTimeline/DispForm.aspx?ID=",
            "[$ID]"
          ]
        }
      }
    }
  ]
}

In the code above, you can replace your SharePoint Online site list address.

Result:

After applying the JSON code, you can see the result below.

Example 9:- Format Multiple Values in SharePoint Person Column

In the above example, you have seen how to format a single field value in the Person or group column with an action button using JSON.

Now, let’s see how to use JSON column formatting to apply styles to each member of a multi-value field of a person column.

From the screenshot, you can see the SharePoint [Task Tracker List], which has the ‘Task Assigned To‘ column with multiple values.

Below is the JSON Code that you should apply to the Person column in SharePoint. Open Column Formatting -> click on Advanced mode and paste the below code.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "style": {
    "display": "=if(length(@currentField) > 0, 'flex', 'none')",
    "text-decoration": "none"
  },
  "attributes": {
    "href": {
      "operator": "+",
      "operands": [
        "mailto:",
        "=join(@currentField.email, ';')"
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "Mail"
      }
    },
    {
      "elmType": "span",
      "txtContent": {
        "operator": "+",
        "operands": [
          "Send email to ",
          {
            "operator": "?",
            "operands": [
              "=length(@currentField) == 1",
              "@currentField.title",
              "='all ' + length(@currentField) + ' members'"
            ]
          }
        ]
      }
    }
  ]
}

Output:

This guide explains how to apply JSON in different columns to customize a SharePoint list using column formatting.

These are various types of JSON column formatting examples that will enhance the appearance of your SharePoint Lists or library.

Feel free to mention your suggestions on conditional column formatting on SharePoint in the comments section below.

Also, Ready Other SharePoint Tutorials:

• SharePoint List Title Column
• Document Library in SharePoint
• SharePoint list conditional formatting based on a date
• Customize SharePoint List Form Layout using JSON

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.