SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

0 to 10 Rating Scale

This sample demonstrates the use of the split operator to change the value of a number column to the appearance of a 0 to 10 rating scale.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Sep 18, 2022

0 to 10 Rating Scale 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": {
        "width": "95%",
        "height": "30px",
        "display": "flex",
        "flex-direction": "row",
        "align-items": "center",
        "justify-content": "space-evenly",
        "margin": "5px",
        "min-width": "220px"
      },
      "attributes": {
        "class": "ms-fontColor-neutralTertiary"
      },
      "children": [
        {
          "elmType": "div",
          "forEach": "score in split('0,1,2,3,4,5,6,7,8,9,10',',')",
          "style": {
            "display": "flex",
            "justify-content": "center",
            "align-items": "center",
            "width": "100%",
            "height": "23px",
            "border": "1px solid",
            "border-left": "=if(Number([$score])==0,'','none')"
          },
          "attributes": {
            "class": "=if(Number([$score])==floor(Number(@currentField)),'ms-bgColor-themePrimary','')"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "[$score]",
              "attributes": {
                "class": "='ms-font-m-plus ' + if(Number([$score])==floor(Number(@currentField)),'ms-fontColor-white','')"
              }
            }
          ]
        }
      ]
    }
  ]
}
View sourceLink to this definitionnumber-zero-to-ten-rating.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /children/0/children/0/forEach must match pattern "^[^\]\$@\. ]+ in (\@currentField|\[\$.+\])$"

From the contributor

How to use this sample

Summary

This sample demonstrates the use of the split operator to change the value of a number column to the appearance of a 0 to 10 rating scale.

screenshot of the sample

View requirements

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

Sample

Solution Author(s)
number-zero-to-ten-rating.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 September 18, 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.