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 · When would you actually use this? · Best practices

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.

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.

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