SharePoint View Formatting JSON: Build a Useful Card View

SharePoint view formatting changes how list items are displayed. It does not change the stored data, permissions or business rules behind the list.

That makes JSON formatting useful for clearer status boards, compact cards and visual cues. It does not turn a list into a secure application, and hiding a field in the formatted view does not protect its value.

This guide builds a small request card and explains the parts worth reusing.

Fact-checked against Microsoft Learn on 24 August 2026.

Before you paste any JSON

Create or identify these columns in a Microsoft List or SharePoint list:

Display name	Suggested type	Example
Title	Single line of text	Replace laptop
Status	Choice	New, In progress, Complete
Owner	Person	Alex Wilber
Due Date	Date	31 August 2026

Field references use internal names, which may differ from display names. A column created as “Due Date” commonly has an internal name such as Due_x0020_Date. Confirm the actual name from the column settings URL or Microsoft formatting tools rather than guessing.

Apply formatting to a view

Open the list, switch to the view you want to change, then use Format current view and Advanced mode. Paste the JSON, preview it and save only when the correct view and fields are selected.

Microsoft documents different top-level properties for different layouts:

rowFormatter controls the List layout.
formatter controls Gallery and Board layouts.
additionalRowClass can add classes without replacing the whole row.

This example uses rowFormatter for a List layout:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": false,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "gap": "6px",
      "padding": "12px",
      "margin-bottom": "8px",
      "border": "1px solid #d1d1d1",
      "border-left": "6px solid",
      "border-left-color": "=if([$Status] == 'Complete', '#107c10', if([$Status] == 'In progress', '#ffb900', '#605e5c'))",
      "border-radius": "4px",
      "background-color": "#ffffff"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "16px",
          "font-weight": "600"
        },
        "txtContent": "[$Title]"
      },
      {
        "elmType": "div",
        "txtContent": "='Status: ' + [$Status]"
      },
      {
        "elmType": "div",
        "txtContent": "=if([$Owner.title] == '', 'Owner: unassigned', 'Owner: ' + [$Owner.title])"
      },
      {
        "elmType": "div",
        "txtContent": "=if([$Due_x0020_Date] == '', 'No due date', 'Due: ' + toLocaleDateString([$Due_x0020_Date]))"
      }
    ]
  }
}

Replace Due_x0020_Date with your field's real internal name. Choice text such as Complete is case-sensitive in comparisons.

What the important pieces do

elmType creates a supported HTML element. style applies the allowed style properties. children nests elements. txtContent displays text or evaluates an expression. A field reference such as [$Status] reads the current row's value.

The leading = marks an expression. The nested if expression chooses a border colour based on Status. Colour is only a secondary cue: the card also prints the status as text.

Build formatting without creating an accessibility problem

Keep important values as text, not colour alone.
Preserve selection unless you have tested the alternative keyboard experience.
Use readable contrast and avoid tiny type.
Test long titles, blank fields, different languages and 200% zoom.
Check list, mobile and Teams-hosted experiences where your users work.
Avoid decorative icons whose meaning is not available in text.

Formatting cannot override SharePoint permissions. However, a formatted link or action can still confuse users if it points somewhere they cannot access. Test with a normal member account, not only a site owner.

Common failures

The preview shows blank values

The internal field name is probably wrong, the field is not available to the view, or the value shape differs from the example. Person, lookup and managed metadata fields expose sub-properties rather than behaving like plain text.

The JSON saves but the layout does not change

Confirm you formatted the current view and used the property that matches its layout. rowFormatter and Gallery formatter are not interchangeable.

The expression reports an error

Check quotes, commas and brackets first. Then reduce the expression to a single field reference and add conditions back one at a time.

Users think the formatted label changed the data

It did not. Microsoft explicitly says formatting changes display only. Use a calculated column, Power Apps or Power Automate if a stored value must change.

Keep the JSON maintainable

Store the approved JSON in source control, record which list and view use it, and add a short field map. Before changing a production view, copy it and test the new formatting there. The “undo” plan should not depend on finding an old browser tab.

Join the SharePoint & Teams Admins Space for practical list, formatting and governance patterns.