Timeline Dot

The Timeline Dot places a small dot along a little past-to-future axis, so you can eyeball where each item's date falls relative to today without reading the date at all. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a date field. The dot sits left of center for past dates and right for upcoming ones, colored by which side of now it lands on.

Author

SharePoint Maven

Built with

• Lists

Features

Date and Time Column, JSON, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Places a dot on a past-to-future axis based on the date
• A center mark shows today, so past and upcoming read at a glance
• The dot is colored by whether the date is behind or ahead of now
• Maps a rolling window of days around today, set in the JSON
• Turns a column of dates into a tiny timeline you can scan
• Applied as column-formatting JSON on a date field, so it changes nothing about the underlying data

Common Use Cases

• Due dates on a task or project list
• Follow-up or check-in dates
• Start dates on upcoming work
• Expiry or review dates on a register
• Delivery or milestone dates
• Any date you want placed on a near-term timeline

Details

• Design Pattern: Dates & Time
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate the list with dates.
3. Because the JSON is applied at the column level, the Due column can use any name you want.
4. The window (30 days each side of today) lives in the JSON – widen or narrow it to fit your horizon.
5. Dates beyond the 30-day window are pulled to the left or right edge, and because it reads a date the result depends on your tenant time zone and the time of day – test close to midnight.

How to Apply JSON code

1. On the Due 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",
        "left": "0",
        "right": "0",
        "top": "9px",
        "height": "2px",
        "background-color": "#c8c6c4"
      }
    },
    {
      "elmType": "div",
      "style": {
        "position": "absolute",
        "left": "50%",
        "top": "4px",
        "width": "1px",
        "height": "12px",
        "background-color": "#a19f9d"
      }
    },
    {
      "elmType": "div",
      "style": {
        "display": "=if(@currentField == '', 'none', 'block')",
        "position": "absolute",
        "top": "3px",
        "width": "12px",
        "height": "12px",
        "border-radius": "50%",
        "border": "2px solid #ffffff",
        "margin-left": "-6px",
        "left": "=(if((((Number(Date(@currentField)) - Number(@now)) / 86400000) + 30) / 60 * 100 < 0, 0, if((((Number(Date(@currentField)) - Number(@now)) / 86400000) + 30) / 60 * 100 > 100, 100, (((Number(Date(@currentField)) - Number(@now)) / 86400000) + 30) / 60 * 100))) + '%'",
        "background-color": "=if(((Number(Date(@currentField)) - Number(@now)) / 86400000) < -1, '#8996ab', if(((Number(Date(@currentField)) - Number(@now)) / 86400000) > 1, '#0b5cad', '#0f7a3d'))"
      }
    }
  ]
}

Common Questions About the Timeline Dot