Signal-Bar Level

The Signal-Bar Level shows a one-to-five rating as a row of filled segments, so skill, difficulty, or intensity reads as a quick bar rather than a number - a cleaner, more compact look than stars. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a number field. The segments fill up to the value, and the count and colors are easy to change.

Author

SharePoint Maven

Built with

Lists

Features

JSON, Number Column, Single Line of Text Column

Common Use Cases

Skill or proficiency level on a people list
Difficulty or complexity on tasks
Priority or intensity ratings
Confidence or maturity scores
Spice, effort, or effort-level style ratings
Any small 1 to 5 scale you want shown as a bar

Details

Design Pattern: Status & Indicator Badges
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Skill	Single line of text	`[Title]`
Level	Number	`[Level]`

Prerequisites

Build a list with these columns before you paste the JSON.
Then populate the list with values from 1 to 5.
Because the JSON is applied at the column level, the Level column can use any name you want.
The segment count and the filled and empty colors live in the JSON – change them for a different scale or look.
The meter is built for a 1 to 5 range, filling one segment per level.

How to Apply JSON code

On the Level column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
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": "flex",
    "align-items": "center",
    "height": "100%",
    "gap": "3px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "16px",
        "height": "13px",
        "border-radius": "2px",
        "background-color": "=if(Number(@currentField) > 0, '#0f6cbd', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "16px",
        "height": "13px",
        "border-radius": "2px",
        "background-color": "=if(Number(@currentField) > 1, '#0f6cbd', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "16px",
        "height": "13px",
        "border-radius": "2px",
        "background-color": "=if(Number(@currentField) > 2, '#0f6cbd', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "16px",
        "height": "13px",
        "border-radius": "2px",
        "background-color": "=if(Number(@currentField) > 3, '#0f6cbd', '#c8c6c4')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "16px",
        "height": "13px",
        "border-radius": "2px",
        "background-color": "=if(Number(@currentField) > 4, '#0f6cbd', '#c8c6c4')"
      }
    }
  ]
}

Common Questions About the Signal-Bar Level

What is the Signal-Bar Level 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 small rating shown as filled segments without ongoing development overhead.

What columns does it need?

It needs one Number column on a small scale such as 1 to 5, where the JSON is applied, plus any label column such as the skill name. The segments are drawn from that value.

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 use a scale other than five?

Yes. The segments are a short list in the JSON, one per level. Add or remove entries to make a scale of any length, and the fill follows the value.

Can Greg build a design 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.