Before / After Compare

The Before / After Compare places two values on a shared track and joins them with a line, so a before and after, or a start and end, reads as a single clear picture of movement. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to the end-value column, which reads a second column for the start value. Both points sit on a 0 to 100 track, the start dot muted and the end dot bold, so the gap between them tells the story.

Author

SharePoint Maven

Built with

• Lists

Features

JSON, Number Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Places a start and an end value on a shared 0 to 100 track
• A connecting line makes the distance between the two read as movement
• The start dot is muted and the end dot is bold, so direction is clear
• Compares any two number columns – before and after, plan and actual, or min and max
• Reads far faster than two numbers side by side
• Applied as column-formatting JSON on the end-value column, so nothing about the data changes

Common Use Cases

• Quarter-over-quarter movement by team
• Before and after a change or campaign
• Plan versus actual on a shared scale
• Baseline versus current score
• Start and end of a range per item
• Any two comparable values you want shown as a gap

Details

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

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate each row with a start value and an end value on a 0 to 100 scale.
3. The JSON reads the start value from the Start column, so its internal name in brackets must match the JSON exactly – or rename [$Start] in the JSON to your own column.
4. Apply the formatting to the end-value column, not to the Start column.
5. Store both values in Number columns on a 0 to 100 scale – a value stored as a decimal such as 0.73 will not display as 73 percent.

How to Apply JSON code

1. On the End 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": {
    "position": "relative",
    "width": "150px",
    "height": "20px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "absolute",
        "top": "8px",
        "height": "4px",
        "border-radius": "2px",
        "background-color": "#cbd5e1",
        "left": "=if(if(Number([$Start]) < 0, 0, if(Number([$Start]) > 100, 100, Number([$Start]))) < if(Number(@currentField) < 0, 0, if(Number(@currentField) > 100, 100, Number(@currentField))), if(Number([$Start]) < 0, 0, if(Number([$Start]) > 100, 100, Number([$Start]))), if(Number(@currentField) < 0, 0, if(Number(@currentField) > 100, 100, Number(@currentField)))) + '%'",
        "width": "=abs(if(Number(@currentField) < 0, 0, if(Number(@currentField) > 100, 100, Number(@currentField))) - if(Number([$Start]) < 0, 0, if(Number([$Start]) > 100, 100, Number([$Start])))) + '%'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "position": "absolute",
        "top": "3px",
        "width": "12px",
        "height": "12px",
        "border-radius": "50%",
        "background-color": "#94a3b8",
        "border": "2px solid #ffffff",
        "margin-left": "-6px",
        "left": "=if(Number([$Start]) < 0, 0, if(Number([$Start]) > 100, 100, Number([$Start]))) + '%'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "position": "absolute",
        "top": "3px",
        "width": "12px",
        "height": "12px",
        "border-radius": "50%",
        "background-color": "#0f6cbd",
        "border": "2px solid #ffffff",
        "margin-left": "-6px",
        "left": "=if(Number(@currentField) < 0, 0, if(Number(@currentField) > 100, 100, Number(@currentField))) + '%'"
      }
    }
  ]
}

Common Questions About the Before / After Compare