SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Volume option

This sample includes visual selection of volume from 0 to 5.

Get this format View on GitHub

Shared by André Lage
Updated Mar 1, 2022

Volume option formatting preview
Sample preview · View original animation

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"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "padding": "0px 5px",
            "position": "relative",
            "width": "15px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "color": "#0078d4",
                "bottom": 0,
                "left": 0,
                "cursor": "pointer"
              },
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-12"
              },
              "txtContent": "Min",
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": 0
                }
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "padding-left": "1px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "5px solid transparent",
                "border-bottom": "0px solid transparent",
                "border-right": "='10px solid'+ if(@currentField == 1,'#0078d4',if(@currentField > 1,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "1"
                }
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "padding-left": "1px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "5px solid transparent",
                "border-bottom": "0px solid transparent",
                "border-right": "='10px solid'+ if(@currentField == 2,'#0078d4',if(@currentField > 2,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "2"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 2,'#0078d4',if(@currentField > 2,'#0078d4','#8a8886'))",
                "border-right": "='10px solid'+ if(@currentField == 2,'#0078d4',if(@currentField > 2,'#0078d4','#8a8886'))",
                "border-left": "='0px solid '+ if(@currentField == 2,'#0078d4',if(@currentField > 2,'#0078d4','#8a8886'))",
                "border-bottom": "='5px solid '+ if(@currentField == 2,'#0078d4',if(@currentField > 2,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "2"
                }
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "padding-left": "1px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "5px solid transparent",
                "border-bottom": "0px solid transparent",
                "border-right": "='10px solid'+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "3"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "border-right": "='10px solid'+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "border-left": "='0px solid '+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "border-bottom": "='5px solid '+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "3"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "border-right": "='10px solid'+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "border-left": "='0px solid '+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "border-bottom": "='5px solid '+ if(@currentField == 3,'#0078d4',if(@currentField > 3,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "3"
                }
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "padding-left": "1px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "border-top": "0px solid transparent",
                "border-right": "10px solid transparent",
                "border-left": "0px solid transparent",
                "border-bottom": "5px solid transparent",
                "height": "0px",
                "width": "0px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "5px solid transparent",
                "border-bottom": "0px solid transparent",
                "border-right": "='10px solid'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "4"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-right": "='10px solid'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-left": "='0px solid '+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-bottom": "='5px solid '+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "4"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-right": "='10px solid'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-left": "='0px solid '+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-bottom": "='5px solid '+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "4"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-right": "='10px solid'+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-left": "='0px solid '+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "border-bottom": "='5px solid '+ if(@currentField == 4,'#0078d4',if(@currentField > 4,'#0078d4','#8a8886'))",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "4"
                }
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "padding-left": "1px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "border-top": "5px solid transparent",
                "border-bottom": "0px solid transparent",
                "border-right": "='10px solid'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "5"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-right": "='10px solid'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-left": "='0px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-bottom": "='5px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "5"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-right": "='10px solid'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-left": "='0px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-bottom": "='5px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "5"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-right": "='10px solid'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-left": "='0px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-bottom": "='5px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "5"
                }
              }
            },
            {
              "elmType": "div",
              "style": {
                "border-top": "='0px soli'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-right": "='10px solid'+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-left": "='0px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "border-bottom": "='5px solid '+ if(@currentField == 5,'#0078d4','#8a8886')",
                "height": "0px",
                "width": "0px",
                "cursor": "pointer"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": "5"
                }
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "padding": "0px 5px",
            "position": "relative",
            "width": "15px",
            "margin-left": "5px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "color": "#0078d4",
                "bottom": 0,
                "left": 0,
                "cursor": "pointer"
              },
              "attributes": {
                "class": "ms-fontWeight-bold ms-fontSize-12"
              },
              "txtContent": "Max",
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Volume": 5
                }
              }
            }
          ]
        }
      ]
    }
  ]
}
View sourceLink to this definitionnumber-volume.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/children/0/style/bottom must be object
  • /children/0/children/0/children/0/style/bottom must be string
  • /children/0/children/0/children/0/style/bottom must match a schema in anyOf

From the contributor

How to use this sample

Summary

This sample includes visual selection of volume from 0 to 5.

screenshot of the sample

View requirements

  • The format expect the following fields:
Field Type
Volume Number - Volume options from 0 to 5

Sample

Solution Author(s)
number-volume.json André Lage

Version history

Version Date Comments
1.0 April 01, 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

Country Flag

This sample demonstrates displaying the flag of the country selected in the single selection SharePoint choice column.

Explore format

Row Actions

You can use column and view formatting to create buttons that perform pre-defined actions when clicked. This sample provides a quick format that demonstrates the use of each of the possible actions.

Explore format

Assign to Me

This sample demonstrates the use of the setValue action of customRowAction to set the current logged-in user in the Person column.

Explore format