Skip to main content

Big Number Counter

The Big Number Counter turns a plain number into a big, bold dashboard readout on a soft tinted pill, so the figure that matters most in a row reads like a headline. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a number field. The value is shown large with a small unit label beside it, giving a list the feel of a scoreboard.
Author
SharePoint Maven
Built with
Features
JSON, Number Column, Single Line of Text Column
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • Shows a number large and bold on a soft tinted pill, like a dashboard readout
  • A small unit label sits beside the figure for instant context
  • Draws attention to the one number that matters most in each row
  • The tint color and the unit label are set in the JSON and easy to change
  • Works for any number, large or small, without changing the data
  • Applied as column-formatting JSON on a number field, so nothing about the data changes

Common Use Cases

  • Points or scores on a leaderboard
  • Headline counts such as tickets, signups, or orders
  • A single headline KPI per row
  • Dollars, hours, or units on a summary list
  • Ratings or index values
  • Any number you want to read like a scoreboard

Details

  • Design Pattern: Metrics & Progress
  • Format Scope: Column

Required Columns

Display nameColumn typeInternal name
TeamSingle line of text[Title]
ScoreNumber[Score]

Prerequisites

  1. Build a list with these columns before you paste the JSON.
  2. Then populate the list with your numbers.
  3. Because the JSON is applied at the column level, the Score column can use any name you want.
  4. The unit label (pts) and the tint color live in the JSON – change them to match your metric.

How to Apply JSON code

  1. On the Score 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": "flex",
    "align-items": "baseline",
    "justify-content": "center",
    "gap": "6px",
    "width": "124px",
    "box-sizing": "border-box",
    "background-color": "#eef4ff",
    "border": "1px solid #dbeafe",
    "border-radius": "10px",
    "padding": "6px 12px"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "=if(@currentField == '', '-', @currentField)",
      "style": {
        "font-size": "22px",
        "font-weight": "800",
        "color": "#0b3b66",
        "letter-spacing": "0.3px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "pts",
      "style": {
        "font-size": "12px",
        "font-weight": "600",
        "color": "#605e5c"
      }
    }
  ]
}

Common Questions About the Big Number Counter

What is the Big Number Counter 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 headline number that reads like a scoreboard without ongoing development overhead.

What columns does it need?

It needs one Number column, where the JSON is applied, plus any label column such as the team or item name. The readout is drawn from that single 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 change the unit label or color?

Yes. The unit label, shown here as pts, and the pill tint are values in the JSON. Change the label to your unit and the tint to your brand color.

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.