SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Progress bar using text or emoji

This sample demonstrates the use of text symbols and emoji to display a progress bar.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Jan 16, 2022

Progress bar using text or emoji formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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",
  "style": {
    "font-size": "20px",
    "white-space": "nowrap"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "=padStart('' , @currentField * 2 , '🟩')"
    },
    {
      "elmType": "span",
      "txtContent": "=padStart('' , (5 - @currentField) * 2 , '🔲')"
    }
  ]
}
View sourceLink to this definitionnumber-emoji-progressbar.json

From the contributor

How to use this sample

Summary

This sample demonstrates how to display a progress bar by repeating text or emoji using the padStart operator.

screenshot of the sample

padStart is an operator that embeds a character string with another character string until the specified length is reached. However, if you specify a emoji as the embedding character, the emoji is counted as 2 characters, so you need to be careful how to set the specified length.

  • "txtContent":"=padStart('Dog', 7, 'A')" results in AAAADog
  • "txtContent":"=padStart('Dog', 7, '🐶')" results in 🐶🐶Dog
  • "txtContent":"=padStart('', 10, 'C')" results in CCCCCCCCCC
  • "txtContent":"=padStart('', 10, '😺')" results in 😺😺😺😺😺

View requirements

This format can be applied to a Number column (the format expects values from 0-5)

Sample

Solution Author(s)
number-emoji-progressbar.json Tetsuya Kawahara
number-emoji-progressbar.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 January 16, 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.