SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Change color based on Item Child Count

This sample shows the Item Child Count field as green when exactly 5 files are uploaded

Get this format View on GitHub

Shared by Marijn Somers
Updated Feb 20, 2023

Change color based on Item Child Count 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",
  "txtContent": "@currentField",
  "style": {
    "background-color": "=if(@currentField == '5', 'green', 'red')",
    "padding": "0px 0px 0px 10px",
    "color": "white"
  }
}
View sourceLink to this definitionchildcount-color-change.json

From the contributor

How to use this sample

Summary

This sample displays the value of the column Item Child Count in green when 5 documents have been uploaded. If less or more then 5 documents are uploaded, the field will be green.

Sample can be extended to different colors or values based on your requirements.

screenshot of the sample

View requirements

  • This format can only be applied to the Item Child Count field. Add this field to your view by clicking on "Add Column" - "Show or hide columns"

Sample

Solution Author(s)
childcount-color-change.json Marijn Somers

Version history

Version Date Comments
1.0 February 20, 2023 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.

Additional notes

  • None