Column & View Formatting with JSON — No Code Required

JSLink let developers restyle classic list views with JavaScript. Its modern successor is even better for most cases because it needs no code at all: declarative JSON column and view formatting. You describe the markup you want, bind it to field values, and SharePoint renders it safely — colour-coded statuses, progress bars, action buttons, and rich cards, all from a JSON snippet a power user can maintain.

The model

Formatting JSON describes a small DOM tree. The key properties:

elmType — the HTML element to render (div, span, a, img, button, svg).
txtContent — the text inside it, often a field reference like "@currentField" or "[$Title]".
style / attributes — CSS and HTML attributes, each value either literal or an expression.
children — nested elements.
$schema — points at the formatting schema for editor IntelliSense.

A colour-coded status column

Select the column → Column settings → Format this column → Advanced mode, and paste JSON. This pill changes colour by value using a nested conditional expression in style:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "padding": "2px 10px",
    "border-radius": "12px",
    "color": "#ffffff",
    "background-color": "=if(@currentField == 'Approved', '#107c10', if(@currentField == 'In Review', '#d87d00', if(@currentField == 'Draft', '#797775', '#a4262c')))"
  }
}

Expressions start with = (Excel-style) or use the equivalent { "operator": … } Abstract Syntax Tree form.

Two expression dialects exist: the Excel-style string form ("=if(@currentField > 0, 'green', 'red')") and the verbose AST form using operator/operands. The Excel style is far more readable for simple logic; reach for the AST form only when expressions get deeply nested.

Field reference tokens

@currentField — the value of the column you're formatting.
[$InternalName] — any other field by internal name, e.g. [$DueDate].
@me — the current user's email; @now — the current date/time.
For people/lookup fields, drill in: [$Author.title], [$Author.email].

A data bar from a number

Render a proportional bar by binding the width to the field value — great for percentages or scores:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": { "background-color": "#e1dfdd", "border-radius": "4px" },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=@currentField + '%'",
      "style": {
        "background-color": "#0078d4",
        "color": "#ffffff",
        "text-align": "center",
        "border-radius": "4px",
        "width": "=@currentField + '%'"
      }
    }
  ]
}

An action button

The button element with a customRowAction lets a column trigger actions — open a form, run a Power Automate flow, or execute a default command — without any code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Approve",
  "customRowAction": {
    "action": "setValue",
    "actionInput": { "ContractStatus": "Approved" }
  },
  "style": { "background-color": "#107c10", "color": "#fff", "border": "none", "padding": "4px 12px" }
}

Other actions include defaultClick, share, editProps, and executeFlow (to launch a specific flow by id).

View formatting: the whole row and beyond

Column formatting styles a single cell. View formatting (Format current view) styles entire rows or switches the view to a Gallery of cards. rowFormatter takes over the full row; additionalRowClass applies built-in classes conditionally — for example, tint overdue rows red:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "additionalRowClass": "=if([$DueDate] <= @now && [$ContractStatus] != 'Approved', 'sp-field-severity--severeWarning', '')"
}

Lean on the built-in sp-field-severity--* and sp-css-backgroundColor-* classes instead of hand-rolling colours. They're theme-aware, accessible, and consistent with the rest of SharePoint — your formatting then adapts to dark mode and custom themes for free.

Deploying formatting at scale

Clicking JSON into a column doesn't scale across sites. Store your JSON in source control and apply it with PnP PowerShell so it's repeatable:

$json = Get-Content "status-format.json" -Raw
Set-PnPField -List "Contracts" -Identity "ContractStatus" `
  -Values @{ CustomFormatter = $json }

JSON formatting vs SPFx field customizers

Need	Reach for
Colour, bars, icons, simple buttons	JSON formatting (no code)
Calls to APIs, complex logic, external data	SPFx field customizer
Power-user maintainable	JSON formatting
Reusable component with tests	SPFx

For the large majority of "make this list easier to read at a glance" requests, JSON formatting is faster to build, safer (SharePoint sanitises the output, so no XSS surface), and maintainable by the business itself. Save SPFx for when you genuinely need code. Knowing exactly where that line sits is what makes you efficient on modern SharePoint.

Dhaval Shah

Cloud Solution Architect — 18+ years across SharePoint, Microsoft 365, and Azure AI.

Back to Blog