SharePoint List view Formatting Overview

SharePoint List Formatting customizes how lists and libraries look using JSON, without touching the underlying data. Works in SharePoint Online, on-prem 2019+, Microsoft Lists, and Teams lists — same formatting engine everywhere.

In this post: One thing to understand first · Three real examples · Formatting forms, not just views · Comparing against today’s date · Deploying formatting at scale with PnP PowerShell · When would you actually use this? · Best practices · Related reading

One thing to understand first

This is purely a display-layer trick — it changes how the list renders in the browser, not the underlying data. Export to Excel, pull the list via Power Automate or the REST API, and you get the raw field values with none of the formatting applied. Don’t rely on this to communicate something that needs to survive outside the SharePoint UI — if a status needs to be machine-readable downstream, that’s a real column value, not a JSON-driven color.

Three real examples

Highlight a row by status:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "background-color": "=if([$Status] == 'Completed', '#d4edda', '#f8d7da')"
    },
    "children": [
        { "elmType": "span", "txtContent": "@currentField" }
    ]
}

Show an icon instead of text for a status column:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "span",
    "attributes": {
        "iconName": "=if([$Status] == 'Completed', 'CheckMark', 'Warning')",
        "title": "@currentField"
    },
    "style": {
        "color": "=if([$Status] == 'Completed', 'green', 'red')"
    }
}

Add an “Open” button that links to the item:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "attributes": {
        "href": "=[$ID]",
        "target": "_blank"
    },
    "style": {
        "color": "blue",
        "text-decoration": "underline"
    },
    "txtContent": "Open"
}

Nested conditions for more than two states — most real fields aren’t binary. Nesting if() calls handles a three-way priority column:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "background-color": "=if([$Priority] == 'High', '#f8d7da', if([$Priority] == 'Medium', '#fff3cd', '#d4edda'))"
    },
    "children": [
        { "elmType": "span", "txtContent": "@currentField" }
    ]
}

Formatting forms, not just views

Everything above is view and column formatting — how the list looks when you’re browsing it. There’s a separate, less-known third option: form formatting, applied via the same JSON schema but scoped to the new/edit/display item panel instead of the list view. It’s reached from a column’s or the form’s own “Edit form” configuration rather than the list view formatting panel. The most common real use is conditionally showing or hiding fields based on another field’s value — e.g. only showing a “Rejection Reason” field on the form when Status is set to “Rejected” — something row/column formatting can’t do at all, since it only affects display, not form behavior.

Comparing against today’s date

None of the three examples above touch dates, but it’s one of the most-reached-for real uses of this formatting engine — flagging overdue items without a Power Automate flow. The @now token resolves to the current date/time at render time, so a due-date column can compare itself against “today” every time the view loads, with no scheduled job keeping it updated:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "background-color": "=if([$DueDate] < @now, '#f8d7da', '#d4edda')"
    },
    "children": [
        { "elmType": "span", "txtContent": "@currentField" }
    ]
}

Note the comparison operator is HTML-encoded as < above rather than a literal < — worth being deliberate about that when a formatter like this ends up inside a code block on a page (this one included), since a raw, un-encoded < immediately followed by a letter can get misread by a browser’s HTML parser as the start of a tag. Inside the actual JSON pasted into SharePoint’s formatting panel, either a literal < or its encoded form works fine — SharePoint parses it as JSON, not HTML. A grace-period version is one small addition, adding milliseconds to @now to push the threshold a few days out rather than flagging something the moment it’s technically overdue: [$DueDate] < @now-259200000 (259,200,000ms = 3 days) treats an item as still fine until it’s been overdue for 3 full days, not the instant the clock ticks past midnight.

Deploying formatting at scale with PnP PowerShell

Pasting JSON into the formatting panel by hand works fine for one list. It stops working as a process once the same status-color scheme needs to live on the same list across a dozen sites, or once you actually want the JSON in source control instead of only existing inside a browser panel with no version history. Set-PnPView applies a formatter the same way the panel does, just scriptable:

Connect-PnPOnline -Url "https://yourtenant.sharepoint.com/sites/yoursite" -Interactive

# Load the JSON from a file you're keeping in source control, not pasted inline
$formatterJson = Get-Content -Path ".\status-row-formatting.json" -Raw

Set-PnPView -List "Project Tracker" -Identity "All Items" -Values @{ CustomFormatter = $formatterJson }

Loop that over a list of site URLs (from Get-PnPTenantSite or a plain CSV of known sites) to roll the same formatting out everywhere the list template is used, instead of re-pasting the same JSON into each site’s formatting panel by hand. One real rough edge worth testing before you push to a production list: JSON containing comparison operators like <, >, or && has occasionally needed HTML-encoding to apply cleanly through this cmdlet depending on the PnP PowerShell version in use — if a formatter that works fine through the browser panel errors out here, that’s usually where to look first.

List Formatting is the right tool when you want visual polish without SPFx-level effort.

When would you actually use this?

You need overdue tasks to visually stand out in a project tracker — row formatting handles it without a PowerApp.
A hiring pipeline list would be easier to scan with status icons instead of a text column full of “In Review” / “Rejected” / “Hired.”
Help desk tickets need a priority color-code so triage doesn’t require opening every item.
You want this level of polish but don’t want SPFx-level development overhead — this is the middle ground between “plain list” and “custom web part.”

Best practices

Keep the JSON simple — overcomplicated conditional formatting can slow down rendering on large lists.
Preview before applying using the built-in formatting panel rather than guessing.
Watch accessibility — color alone isn’t enough; keep contrast and tooltips readable.

List Formatting is the right tool when you want visual polish without SPFx-level effort. If you outgrow it — more logic, actual forms, external data — PowerApps or SPFx are the next steps up, not a replacement from day one.

Understanding SharePoint List Types — know what a list actually supports before you start formatting its views.
How to Hide Buttons from SharePoint List or Libraries Using JSON — another JSON view-formatting trick in the same vein.

That’s the gist of it. Got questions? Drop them below.

dear result

November 21, 2025 at 10:36 am

Hi! Would you mind if I share your blog with my zynga group?
There’s a lot of folks that I think would really enjoy your content.
Please let me know. Many thanks

Pingback: How to hide Buttons from SharePoint List or Libraries using JSON in OOTB Format view - Tips by Bits