SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Bar Option Picker

This sample displays a bar with multiple options. When an option on the bar is clicked, the Value column is updated to the corresponding value (0-4) using setValue.

Get this format View on GitHub

Shared by André Lage
Updated Jan 15, 2022

Bar Option Picker 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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "style": {
          "padding": "30px",
          "border": "1px solid #ccc",
          "box-shadow": "0 0 5px #ccc"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "inline-block",
                  "padding": "0px 0px 20px 10px"
                },
                "txtContent": "[$Title]",
                "attributes": {
                  "class": "ms-fontSize-20"
                },
                "children": [
                  {
                    "elmType": "div"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-42"
                },
                "txtContent": "=if([$Value] ==0,'0️⃣',if([$Value] ==1,'1️⃣',if([$Value] ==2,'2️⃣',if([$Value] ==3,'3️⃣',if([$Value] ==4,'4️⃣','')))))"
              },
              {
                "elmType": "div",
                "style": {
                  "padding-left": "20px",
                  "display": "flex",
                  "justify-content": "center",
                  "align-items": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "background-color": "#eee",
                          "border-radius": "25px",
                          "width": "380px",
                          "display": "table"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "display": "table-cell",
                              "background-color": "=if([$Value]==0,'#FF2C05',if([$Value]==1,'#FD6104',if([$Value]==2,'#FD9A01',if([$Value]==3,'#FFCE03',if([$Value]==4,'#FEF001','Orange'))))",
                              "width": "=if(length([$Value])==0 || [$Value]==0 ,'0px',if([$Value]==1 ,'100px',if([$Value]==2 ,'190px',if([$Value]==3 ,'280px',if([$Value]==4 ,'380px','0px')))))",
                              "height": "13px",
                              "padding-left": "5px",
                              "border-radius": "25px",
                              "vertical-align": "middle",
                              "text-align": "left"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if(length([$Value])==0 || [$Value]==0 ,'none','inline-block')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "cursor": "pointer"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Value": "0"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=1,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "80px",
                                  "cursor": "pointer"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Value": "1"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=2 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "80px",
                                  "cursor": "pointer"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Value": "2"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if(Number([$Value]>=3) ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "80px",
                                  "cursor": "pointer"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Value": "3"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=4 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "80px",
                                  "cursor": "pointer"
                                },
                                "customRowAction": {
                                  "action": "setValue",
                                  "actionInput": {
                                    "Value": "4"
                                  }
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "position": "absolute",
                                  "border": "2px solid #eee",
                                  "display": "inline-block",
                                  "background-color": "white",
                                  "border-radius": "50%",
                                  "height": "40px",
                                  "width": "40px",
                                  "box-shadow": "0 0 5px #eee",
                                  "margin-left": "=if([$Value]==0,'-20px','-23px')",
                                  "margin-top": "=if([$Value]==0,'-23px','-15px')"
                                }
                              }
                            ]
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "display": "=if([$Value]==0 ,'inline-block','none')",
                              "background-color": "white",
                              "border-radius": "5px",
                              "height": "10px",
                              "width": "10px",
                              "cursor": "pointer"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Value": "0"
                              }
                            }
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "display": "=if([$Value]>=1 ,'none','inline-block')",
                              "background-color": "white",
                              "border-radius": "5px",
                              "height": "10px",
                              "width": "10px",
                              "margin-left": "80px",
                              "cursor": "pointer"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Value": "1"
                              }
                            }
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "display": "=if([$Value]>=2 ,'none','inline-block')",
                              "background-color": "white",
                              "border-radius": "5px",
                              "height": "10px",
                              "width": "10px",
                              "margin-left": "80px",
                              "cursor": "pointer"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Value": "2"
                              }
                            }
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "display": "=if([$Value]>=3 ,'none','inline-block')",
                              "background-color": "white",
                              "border-radius": "5px",
                              "height": "10px",
                              "width": "10px",
                              "margin-left": "80px",
                              "cursor": "pointer"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Value": "3"
                              }
                            }
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "display": "=if([$Value]==4 ,'none','inline-block')",
                              "background-color": "white",
                              "border-radius": "5px",
                              "height": "10px",
                              "width": "10px",
                              "margin-left": "80px",
                              "cursor": "pointer"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Value": "4"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionbar-option-picker.json

From the contributor

How to use this sample

Summary

This sample displays a bar with multiple options. When an option on the bar is clicked, the Value column is updated to the corresponding value (0-4) using setValue.

The value is shown in an icon on the left and the progress bar color is based on the value.

screenshot of the sample

View requirements

  • The format expect the following fields:
Field Type
Title Single line of text
Value Number - Default value 0

Sample

Solution Author(s)
bar-option-picker.json André Lage

Version history

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

Picture Link Tiles Doc Lib

Creates a card-style tile view in a SharePoint Document Library with file previews, badges, titles, and a footer with actions.

Explore format

Book Template Card Formatter

This SharePoint JSON view formatting sample transforms your list items into visually rich book cards.

Explore format

Employee Recognition Card

This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes.

Explore format