How to Format a SharePoint Online List Column using JSON (Step‑by‑Step Guide)

If you work with SharePoint Online lists a lot, JSON column formatting is one of the easiest ways to make your lists more visual, more readable, and a lot more useful. In this tutorial, let’s walk through how JSON formatting works in SharePoint Online and then look at some practical, copy‑paste‑ready examples you can start using today.

We’ll cover:

• A quick intro to JSON column formatting
• Formatting a number column as data bars
• Adding conditional formatting to a number range
• Highlighting date columns based on today
• Customizing the list form (Body) into sections

By the end, you’ll know exactly where to click and what JSON to paste to get professional‑looking SharePoint list views without any heavy development.

What is JSON Column Formatting in SharePoint?

In SharePoint Online, JSON formatting lets you control how a column (or list form) looks without changing the actual data. You don’t need to be a developer to use it – you mainly copy a JSON template, tweak a few field names and conditions, and paste it in the formatting panel.

A JSON column format tells SharePoint things like:

• How to display the value (plain text, colored text, icon, bar, badge, etc.).
• What styles to apply based on conditions (for example, red if value is less than 10, green if greater than 40).
• How to rearrange fields in the form into sections so users see a clean, logical layout.

The important point: JSON formatting affects only the UI, not the stored values.

Where to Apply JSON Formatting to SharePoint Online List

The entry point is always the same.

For column formatting:

1. Open your SharePoint Online list.
2. Hover over or click the column header you want to format.
3. Click Column settings → Format this column.
4. In the panel, click Advanced mode to open the JSON editor.
5. Paste your JSON, tweak field references if needed, and click Save.

For form (Body) formatting:

1. Open the list and click New to open the item form.
2. At the top, select Edit form → Configure layout.
3. Set Apply formatting to = Body.
4. Paste your JSON into the Formatting code box and click Save.

Once you get used to these two entry points, you can plug in almost any JSON sample you find and adapt it.

Example 1: Format a number column as data bars

Let’s start with something very visual – turning a number column into a data bar, like in Excel. This is great for things like duration, scores, or progress values.

Imagine you have a number column called Time taken to Deliver Voucher. You want:

• A colored bar behind the value.
• The width of the bar to be based on the value.
• If the value is greater than or equal to 40, the bar should be 100% width.

Steps

1. Open your SharePoint Online list.
2. Click the dropdown on the Time taken to Deliver Voucher column.
3. Select Column settings → Format this column.
4. Click Advanced mode.
5. Paste JSON similar to the following (adjusting field references to match your column):

{
  "$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 >= 40, '100%', (@currentField * 5) + '%')"
  }
}

6. Click Save.

Now your number column shows a horizontal bar whose width grows with the number value, making it easier to scan the list visually. You can see the output in the screenshot below:

Tip: In the original example, the schema uses a data‑bar class and sets width dynamically to create the visual effect; you can adjust the multiplier (* 5) or the threshold (>= 40) to suit your data.

Check out Customize Modern SharePoint List Form Using JSON Formatting

Example 2: Conditional formatting for a number range

Next, let’s add a simple severity‑style formatting based on a numeric range. Imagine a column named No.of Vacancies where:

• If the value is less than or equal to 10, you want to show a warning style with an icon.
• If the value is greater than 10, you want it to look normal.

Steps:

1. Open the SharePoint Online list.
2. Click the dropdown on No.of Vacancies.
3. Choose Column settings → Format this column.
4. Select Advanced mode.
5. Paste JSON like this:

{
  "$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"
    }
  ]
}

6. Click Save.

Now, whenever No.of Vacancies is 10 or less, the value appears with a warning style and an icon, making low availability stand out in the list. For values above 10, the column is displayed without special coloring.

You can easily change the threshold (for example, <= 5) or use other severity classes like sp-field-severity--good or sp-field-severity--severeWarning to fit your use case.

You can see the exact output in the screenshot below:

Check out How to Add SharePoint Column Formatting with JSON?

Example 3: Conditional Formatting on a SharePoint List Date Column

Dates are another great candidate for formatting. A common scenario is to highlight dates that are due or past due.

Let’s say you have a date column called Salary Date. You want:

• If Salary Date is less than or equal to today (current date), show the text in a different color.
• If it is greater than today, keep the normal style.

Steps

1. Open your SharePoint list.
2. Click the column header for Salary Date.
3. Choose Column settings → Format this column.
4. Click Advanced mode.
5. Paste JSON like this (note the field reference inside square brackets):

{
  "$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', '')"
  }
}

6. Click Save.

Now, any Salary Date that is on or before today will appear in a highlighted color (for example, a pinkish #DE3163), while future dates look normal. This instantly tells you which items are due or overdue.

Here is the exact output in the screenshot below:

Important points:

• @now gives you the current date and time at runtime.
• [$SalaryDate] refers to the internal name of your column inside the JSON expression.

If your column’s internal name is different, update the JSON accordingly.

Check out Create SharePoint lists from JSON Using Power Automate

Example 4: Customize the SharePoint list form (Body) into sections

JSON isn’t limited to columns; you can also customize the layout of the list form itself. This is very handy when your list has many columns and the default single‑column form feels cluttered.

In this example, we’ll:

• Group related fields under logical section headings like “Job Details” or “Date Column section”.
• Show salary‑related columns under a separate section.
• Keep any remaining columns in a generic “Remaining Columns” section.

Steps

• Open your SharePoint Online list.
• Click New to open the item form.
• At the top, click Edit form → Configure layout. Here is a screenshot for your reference.

• In the panel, set Apply formatting to → Body. Check out the below screenshot for your reference.

Paste JSON similar to this:

{
  "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": []
    }
  ]
}

6. Click Save.

The next time someone opens the form, they’ll see neatly separated sections with headings like “Job Details”, “📅 Date Column section”, and “Currency Column Section💰💰”. Any list columns not explicitly listed in the fields array will appear under Remaining Columns of List.

Some practical tips:

• displayname is the section heading shown to users.
• fields must match your list column display names (or internal names, depending on your naming).
• You can reorder fields and sections in the JSON to change the form layout instantly.

This makes complex forms much easier to use and helps guide users to fill in the correct information in the right order.

Read Replace String in JSON using Power Automate

Best Practices and Quick Tips

Here are a few simple habits that will save you time when working with JSON formatting:

• Start with a working sample and then adjust small parts (like the column name, threshold, and color) instead of writing JSON from scratch.
• Always verify the internal name of your column when using the [$ColumnName] pattern inside expressions.
• Use Advanced mode for full control; the basic formatting options are fine for quick styles but very limited.
• Test new formatting on a sample list or a test column so you don’t confuse end users while you’re experimenting.

Once you get comfortable with a few patterns like data bars, severity badges, and conditional date colors, you’ll find yourself reusing and combining them in different lists.

Conclusion

JSON column formatting in SharePoint Online is a small feature that can make a big difference in how your lists look and behave. With just a few lines of JSON, you can turn plain numbers and dates into visual cues that are easy to scan and act on. Whether you use data bars, conditional colors, or custom form sections, all of this works without changing the actual data in your list.

You may also like the following tutorials:

• Extract Email from SharePoint Person or Group Field using JSON
• SharePoint List View Formatting by JSON Using Lookup Value
• Customize SharePoint List Form Layout using JSON Code

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.