SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Status Blocks

This sample demonstrates basic row display with conditional logic to adjust the background-color based on a Status field.

Get this format View on GitHub

Shared by Eric Skaggs
Updated Jan 18, 2019

Status Blocks formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "button",
    "customRowAction": {
      "action": "defaultClick"
    },
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Status]"
          }
        ]
      }
    ],
    "style": {
      "background-color": {
        "operator": "?",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "Awaiting Approval",
              "[$Status]"
            ]
          },
          "red",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "Ready to Deploy",
                  "[$Status]"
                ]
              },
              "yellow",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "Complete",
                      "[$Status]"
                    ]
                  },
                  "green",
                  ""
                ]
              }
            ]
          }
        ]
      },
      "width": "100%"
    }
  }
}
View sourceLink to this definitionstatus-blocks.json

From the contributor

How to use this sample

Summary

This sample demonstrates basic row display with conditional logic to adjust the background-color based on a Status field.

screenshot of the sample

View requirements

  • The format utilizes the Title column
  • The format expects a Choice column with an internal name of Status
  • The values for Status in this sample are:
    • Awaiting Approval
    • Complete
    • In Progress
    • Ready

Sample

Solution Author(s)
status-blocks.json Eric Skaggs

Version history

Version Date Comments
1.0 January 18, 2019 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

None