Skip to main content

Health Traffic Light

The Health Traffic Light turns a plain health score into the universally understood red, amber, or green signal, so anyone scanning a SharePoint list knows what needs attention without reading the number. It is built with a standard Microsoft List and a small piece of column-formatting JSON. A compact three-lamp traffic light lights exactly one lamp based on the value - green for healthy, amber for at risk, red for critical - next to a short health word and the score, and a blank value falls back to an unlit light labeled No data.
Author
SharePoint Maven
Built with
Features
Date and Time Column, JSON, Number Column, Person or Group Column, Single Line of Text Column
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • Shows a health value as a familiar red, amber, or green traffic light, so status reads instantly
  • Exactly one lamp lights based on the value, with the other two dimmed inside a dark housing
  • A short word – Healthy, At Risk, or Critical – and the score sit beside the light for an exact read
  • Color thresholds are set in the JSON – green at 80 and above, amber from 50 to 79, red below 50 – and are easy to change
  • A blank value falls back to an unlit light labeled No data, so the column never looks broken
  • Applied as column-formatting JSON on a number field, so it travels with the view and changes nothing about the underlying data

Common Use Cases

  • Service or system health on an operations dashboard
  • Project or program RAG status
  • Vendor or supplier health scores
  • Risk or control health on a register
  • SLA or KPI health against a target
  • Site, store, or asset condition scores

Details

  • Design Pattern: Status & Indicator Badges
  • Format Scope: Column

Required Columns

Display nameColumn typeInternal name
TitleSingle line of text[Title]
HealthNumber[Health]
OwnerPerson or Group[Owner]
CheckedDate and time[Checked]

Prerequisites

  1. Build a list with these columns before you paste the JSON.
  2. Then populate the list with data.
  3. Because the JSON is applied at the column level, the Health column can use any name you want.
  4. Make the Health column a Number, with values from 0 to 100.
  5. If you like, change the 80 and 50 thresholds in the JSON yourself to set your own green, amber, and red bands.

How to Apply JSON code

  1. On the Health column, open the column header menu, choose Column settings, then Format this column.
  2. Switch to Advanced mode.
  3. Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "inline-flex",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "inline-flex",
        "flex-direction": "column",
        "align-items": "center",
        "justify-content": "center",
        "gap": "3px",
        "box-sizing": "border-box",
        "padding": "4px 4px",
        "border-radius": "5px",
        "background-color": "#605e5c"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "9px",
            "height": "9px",
            "border-radius": "50%",
            "background-color": "=if(@currentField == '', '#3b3a39', if(Number(@currentField) < 50, '#d13438', '#3b3a39'))"
          }
        },
        {
          "elmType": "div",
          "style": {
            "width": "9px",
            "height": "9px",
            "border-radius": "50%",
            "background-color": "=if(@currentField == '', '#3b3a39', if(Number(@currentField) >= 50 && Number(@currentField) < 80, '#ffb900', '#3b3a39'))"
          }
        },
        {
          "elmType": "div",
          "style": {
            "width": "9px",
            "height": "9px",
            "border-radius": "50%",
            "background-color": "=if(@currentField == '', '#3b3a39', if(Number(@currentField) >= 80, '#2aa745', '#3b3a39'))"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "inline-flex",
        "flex-direction": "column",
        "margin-left": "9px",
        "line-height": "1.2"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "13px",
            "font-weight": "700",
            "color": "=if(@currentField == '', '#605e5c', if(Number(@currentField) >= 80, '#008a00', if(Number(@currentField) >= 50, '#8a6d00', '#c50f1f')))"
          },
          "txtContent": "=if(@currentField == '', 'No data', if(Number(@currentField) >= 80, 'Healthy', if(Number(@currentField) >= 50, 'At Risk', 'Critical')))"
        },
        {
          "elmType": "span",
          "style": {
            "font-size": "12px",
            "font-weight": "500",
            "color": "#323130"
          },
          "txtContent": "=if(@currentField == '', '', 'Health ' + @currentField)"
        }
      ]
    }
  ]
}

Common Questions About the Health Traffic Light

What is the Health Traffic Light built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a status column to read at a glance without ongoing development overhead.

What kind of column does it need?

It needs one Number column that stores a health value, typically from 0 to 100. The JSON reads the current column rather than a fixed name, so it works on any health or score field, and it compares the value against the thresholds to decide which lamp lights.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can I change the red, amber, and green thresholds?

Yes. The bands are two numbers in the JSON – green at 80 and above, amber from 50 to 79, and red below 50 by default. Change those two values to match how your team scores health, and the lamp that lights follows your bands automatically.

Can Greg build a health badge like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.