SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Project Indicator Formats

Three related formats for use in project management.

Get this format View on GitHub

Shared by Chris Kent
Updated Aug 20, 2018

Project Indicator Formats formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

6 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",
  "txtContent": "@currentField",
  "style": {
    "padding-left": "14px"
  },
  "attributes": {
    "class": "=if(@currentField == 'Red', 'ms-bgColor-red', if(@currentField == 'Green', 'ms-bgColor-green', if(@currentField == 'Yellow', 'ms-bgColor-yellow', if(@currentField == 'Amber', 'ms-bgColor-orangeLighter', '')))) + ' ms-fontColor-white'"
  }
}
View sourceLink to this definitiongeneric-project-management.json

From the contributor

How to use this sample

Summary

Three related formats for use in project management.

Color-coded status (generic-project-management.json)

Text or choice column where the value is used to determine the color. This allows for an easy visualization of status. To use a lookup column instead, replace all occurences of @currentField with @currentField.lookupValue.

This format uses the values Red, Yellow, Green, and Amber but you could easily extend this to fit your own color-coded system by adding or removing nested conditions.

screenshot of the sample

Color-coded score ranges (risk-score.json)

A number column is evaluated against tiers of values to provide colors corresponding to score ranges. This format provides 4 ranges:

Range Color
value >= 16 Red
16 > value >= 12 OrangeLighter
12 > value >= 8 Yellow
value < 8 Green

You can easily adjust the values/colors to provide your own ranges. You can also add or remove nested conditions to increase or decrease the number of ranges needed.

Color-coded ranges

Change direction indicator (risk-level-change-status.json)

A text or choice column where the value is represented as a colored icon. The color is provided using column formatting predefined classes which are applied based on the text of the field. Similarly, UI Fabric icons provide an additional visualization for the value. To use a lookup column instead, replace all occurences of @currentField with @currentField.lookupValue.

Value Class Icon
Down sp-field-trending--up SortDown
Level Split
Up sp-field-trending--down SortUp

Change direction indicator

Combined formats

Combining more than one of the above formats in a single listview can easily tranform your list into an intuitive and powerful dashboard.

Combined visualizations

View requirements

ryg-status.json

  • This format should be applied to a text or choice field with values of Green, Yellow, Red, or Amber

risk-score.json

  • This format should be applied to a Number column

risk-level-change-status.json

  • This format should be applied to a text or choice field with values of Down, Level, or Up

Sample

Solution Author(s)
generic-project-management.json S Merchant
risk-level-change-status.json S Merchant
risk-score.json S Merchant

Version history

Version Date Comments
1.0 November 10, 2017 Initial release
1.1 March 22, 2018 Bug fixes and style adjustments
1.2 August 20, 2018 Updated to use Excel-style expressions and theme color classes

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.

Additional notes

Additional versions using Abstract Tree Syntax (AST) are also provided for environments where the Excel-style expressions are not supported.

Keep exploring

More formats like this

Missing Information Callout

The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value.

Explore format

Publishing Status

Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages

Explore format

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