SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Display Hourglass

This sample demonstrates displaying an hourglass.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated May 15, 2022

Display Hourglass formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "width": "40px",
        "height": "70px",
        "margin": "10px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "100%",
            "height": "10%"
          },
          "attributes": {
            "class": "ms-bgColor-themeDarker"
          }
        },
        {
          "elmType": "div",
          "style": {
            "width": "60%",
            "height": "80%",
            "border-left": "2.5px solid",
            "border-right": "2.5px solid",
            "display": "flex",
            "flex-direction": "column",
            "font-size": "13.2px"
          },
          "attributes": {
            "class": "ms-fontColor-themeDarker"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "relative",
                "display": "flex",
                "justify-content": "center",
                "align-items": "end",
                "width": "100%",
                "height": "50%"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "width": "0",
                    "border-top": "2.1em solid",
                    "border-left": "1em solid transparent",
                    "border-right": "1em solid transparent"
                  },
                  "attributes": {
                    "class": "ms-fontColor-neutralQuaternaryAlt"
                  }
                },
                {
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "width": "0",
                    "border-top": "= 2.1 * if(@now < [$Start] , 1 ,((Number([$End]) - Number(@now)) / (Number([$End]) - Number([$Start])))) + 'em solid'",
                    "border-left": "= 1 * if(@now < [$Start] , 1 ,((Number([$End]) - Number(@now)) / (Number([$End]) - Number([$Start])))) + 'em solid transparent'",
                    "border-right": "= 1 * if(@now < [$Start] , 1 ,((Number([$End]) - Number(@now)) / (Number([$End]) - Number([$Start])))) + 'em solid transparent'",
                    "display": "=if([$Start] > [$End] || Number([$Start]) == 0 || Number([$End]) == 0 , 'none' , '')",
                    "cursor": "pointer"
                  },
                  "attributes": {
                    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
                  },
                  "customCardProps": {
                    "openOnEvent": "hover",
                    "directionalHint": "rightCenter",
                    "isBeakVisible": true,
                    "formatter": {
                      "elmType": "div",
                      "style": {
                        "padding": "10px 20px 10px 20px",
                        "font-weight": "bold",
                        "font-size": "20px"
                      },
                      "attributes": {
                        "class": "ms-fontColor-themePrimary"
                      },
                      "children": [
                        {
                          "elmType": "span",
                          "txtContent": "=floor(if(@now < [$Start] , (Number([$End]) - Number([$Start])) , (Number([$End]) - Number(@now))) / 86400000)"
                        },
                        {
                          "elmType": "span",
                          "txtContent": "=if(floor(if(@now < [$Start] , (Number([$End]) - Number([$Start])) , (Number([$End]) - Number(@now))) / 86400000) == 1 , 'day' , 'days')",
                          "style": {
                            "margin-left": "5px"
                          }
                        }
                      ]
                    }
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "position": "relative",
                "display": "flex",
                "justify-content": "center",
                "align-items": "end",
                "width": "100%",
                "height": "50%"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "width": "0",
                    "border-bottom": "2.1em solid",
                    "border-left": "1em solid transparent",
                    "border-right": "1em solid transparent"
                  },
                  "attributes": {
                    "class": "ms-fontColor-neutralQuaternaryAlt"
                  }
                },
                {
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "width": "= 2 * ((Number([$End]) - Number(@now)) / (Number([$End]) - Number([$Start]))) + 'em'",
                    "border-bottom": "= 2.1 * if(@now > [$End] , 1 , ((Number(@now) - Number([$Start])) / (Number([$End]) - Number([$Start])))) + 'em solid'",
                    "border-left": "= 1 * if(@now > [$End] , 1 , ((Number(@now) - Number([$Start])) / (Number([$End]) - Number([$Start])))) + 'em solid transparent'",
                    "border-right": "= 1 * if(@now > [$End] , 1 , ((Number(@now) - Number([$Start])) / (Number([$End]) - Number([$Start])))) + 'em solid transparent'",
                    "display": "=if([$Start] > [$End] || Number([$Start]) == 0 || Number([$End]) == 0 , 'none' , '')",
                    "cursor": "pointer"
                  },
                  "attributes": {
                    "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
                  },
                  "customCardProps": {
                    "openOnEvent": "hover",
                    "directionalHint": "rightCenter",
                    "isBeakVisible": true,
                    "formatter": {
                      "elmType": "div",
                      "style": {
                        "padding": "10px 20px 10px 20px",
                        "font-weight": "bold",
                        "font-size": "20px"
                      },
                      "attributes": {
                        "class": "ms-fontColor-themePrimary"
                      },
                      "children": [
                        {
                          "elmType": "span",
                          "txtContent": "=floor(if(@now > [$End] , (Number([$End]) - Number([$Start])) , (Number(@now) - Number([$Start]))) / 86400000)"
                        },
                        {
                          "elmType": "span",
                          "txtContent": "=if(floor(if(@now > [$End] , (Number([$End]) - Number([$Start])) , (Number(@now) - Number([$Start]))) / 86400000) == 1 , 'day' , 'days')",
                          "style": {
                            "margin-left": "5px"
                          }
                        }
                      ]
                    }
                  }
                }
              ]
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "width": "100%",
            "height": "10%"
          },
          "attributes": {
            "class": "ms-bgColor-themeDarker"
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitiongeneric-hourglass.json

From the contributor

How to use this sample

Summary

This sample demonstrates displaying an hourglass. Sand begins to fall when it is time for the Start column, and all sand falls when it is time for the End column. Also, when you hover the mouse over the sand, the number of days is displayed.

screenshot of the sample

View requirements

This format can be applied to any column type but expects the following columns to be part of the view:

Type Internal Name Required
Date and Time Start Yes
Date and Time End Yes

Sample

Solution Author(s)
generic-hourglass.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 May 15, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

File Preview Callout with the embed Action

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

Explore format

People Name Avatar Card

This SharePoint column formatting sample provides a modern, interactive People card for list items using JSON formatting.

Explore format

Yearly Gantt Chart

This sample demonstrates the display of a yearly Gantt chart.

Explore format