SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Team Poll

This sample combines a couple of lists and a few formats to demonstrate creating an application using view formatting. The end result is a configurable poll that end users can submit their choices too and view grouped results.

Get this format View on GitHub

Shared by Chris Kent
Updated Aug 3, 2023

Team Poll formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

3 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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "commandBarProps": {
    "commands": [
      {
        "key": "new",
        "hide": true
      }
    ]
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "border-style": "solid",
      "border-width": "2px",
      "border-radius": "12px",
      "max-width": "400px",
      "overflow": "hidden",
      "align-items": "center",
      "align-self": "center"
    },
    "attributes": {
      "class": "ms-fontColor-neutralPrimary ms-borderColor-neutralTertiary ms-bgColor-neutralTertiary ms-fontSize-l"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center"
        },
        "children": [
          {
            "COMMENT": "POLL TITLE",
            "elmType": "div",
            "txtContent": "[$Title]",
            "inlineEditField": "[$Title]",
            "style": {
              "width": "100%",
              "text-align": "center",
              "padding": "4px"
            },
            "attributes": {
              "class": "ms-fontColor-white ms-fontSize-m ms-fontWeight-semibold ms-fontColor-neutralPrimary--hover"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "iconName": "LightningBoltSolid",
              "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-fontWeight-semibold",
              "title": "Collect new responses"
            },
            "style": {
              "padding-left": "6px",
              "cursor": "pointer"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Iteration": "=[$Iteration]+1"
              }
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white"
        },
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "width": "100%",
          "align-items": "center"
        },
        "children": [
          {
            "COMMENT": "QUESTION",
            "elmType": "div",
            "txtContent": "[$Question]",
            "inlineEditField": "[$Question]",
            "attributes": {
              "class": "ms-fontWeight-semibold"
            },
            "style": {
              "padding-top": "12px"
            }
          },
          {
            "COMMENT": "OPTION 1",
            "elmType": "div",
            "style": {
              "display": "=if([$Option1]=='','none','flex')",
              "padding": "12px",
              "column-gap": "6px",
              "width": "382px",
              "justify-content": "center"
            },
            "attributes": {
              "class": "ms-bgColor-neutralLight--hover"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "ColorSolid",
                  "title": "Result color",
                  "class": "='ms-fontColor-' + [$Color1]"
                },
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "background-color": "#f3f2f1"
                  },
                  "formatter": {
                    "COMMENT": "COLOR 1 COLOR PICKER",
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLighter ms-borderColor-neutralLight"
                    },
                    "style": {
                      "display": "flex",
                      "flex-direction": "column",
                      "border-style": "solid",
                      "border-width": "1px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "Theme colors",
                        "attributes": {
                          "class": "ms-fontColor-neutralDark"
                        },
                        "style": {
                          "font-size": "14px",
                          "margin-left": "6px",
                          "margin-top": "4px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "column-gap": "10px",
                          "margin": "8px 10px 0 10px",
                          "width": "140px",
                          "height": "60px"
                        },
                        "children": [
                          {
                            "forEach": "colorIterator in split('themeDarker|themeDark|themeDarkAlt|themePrimary|themeSecondary|neutralTertiary|neutralSecondary|neutralPrimaryAlt|neutralPrimary|neutralDark','|')",
                            "elmType": "div",
                            "attributes": {
                              "title": "=if([$colorIterator]=='themeDarker','Theme darker',if([$colorIterator]=='themeDark','Theme dark',if([$colorIterator]=='themeDarkAlt','Theme dark alternate',if([$colorIterator]=='themePrimary','Theme primary',if([$colorIterator]=='themeSecondary','Theme secondary',if([$colorIterator]=='neutralTertiary','Neutral tertiary',if([$colorIterator]=='neutralSecondary','Neutral secondary',if([$colorIterator]=='neutralPrimaryAlt','Neutral primary alternate',if([$colorIterator]=='neutralPrimary','Neutral primary','Neutral dark')))))))))",
                              "class": "=if([$Color1]==[$colorIterator],'ms-bgColor-neutralLighter ms-borderColor-neutralLighter ms-borderColor-neutralSecondary--hover','ms-bgColor-' + [$colorIterator] + ' ms-bgColor-neutralLighter--hover')"
                            },
                            "style": {
                              "display": "flex",
                              "align-items": "center",
                              "justify-content": "center",
                              "width": "20px",
                              "height": "20px",
                              "cursor": "pointer",
                              "box-sizing": "border-box",
                              "border-style": "=if([$Color1]==[$colorIterator], 'solid','none')",
                              "border-width": "1.5px"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Color1": "[$colorIterator]"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "class": "='ms-borderColor-white ms-bgColor-' + [$colorIterator]"
                                },
                                "style": {
                                  "width": "12px",
                                  "height": "12px",
                                  "border-style": "=if([$Color1]==[$colorIterator], 'solid','none')",
                                  "border-width": "3px"
                                }
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "txtContent": "Standard colors",
                        "attributes": {
                          "class": "ms-fontColor-neutralDark"
                        },
                        "style": {
                          "font-size": "14px",
                          "margin-left": "6px",
                          "margin-top": "4px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "column-gap": "10px",
                          "margin": "8px 10px 0 10px",
                          "width": "140px",
                          "height": "60px"
                        },
                        "children": [
                          {
                            "forEach": "colorIterator in split('redDark|red|yellow|yellowLight|greenLight|green|blueLight|blue|blueDark|purple','|')",
                            "elmType": "div",
                            "attributes": {
                              "title": "='Standard color: ' + if([$colorIterator]=='redDark','Dark red',if([$colorIterator]=='red','Red',if([$colorIterator]=='yellow','Orange',if([$colorIterator]=='yellowLight','Yellow',if([$colorIterator]=='greenLight','Light green',if([$colorIterator]=='green','Green',if([$colorIterator]=='blueLight','Light blue',if([$colorIterator]=='blue','Blue',if([$colorIterator]=='blueDark','Dark blue','Purple')))))))))",
                              "class": "=if([$Color1]==[$colorIterator],'ms-bgColor-neutralLighter ms-borderColor-neutralLighter ms-borderColor-neutralSecondary--hover','ms-bgColor-' + [$colorIterator] + ' ms-bgColor-neutralLighter--hover')"
                            },
                            "style": {
                              "display": "flex",
                              "align-items": "center",
                              "justify-content": "center",
                              "width": "20px",
                              "height": "20px",
                              "cursor": "pointer",
                              "box-sizing": "border-box",
                              "border-style": "=if([$Color1]==[$colorIterator], 'solid','none')",
                              "border-width": "1.5px"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Color1": "[$colorIterator]"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "class": "='ms-borderColor-white ms-bgColor-' + [$colorIterator]"
                                },
                                "style": {
                                  "width": "12px",
                                  "height": "12px",
                                  "border-style": "=if([$Color1]==[$colorIterator], 'solid','none')",
                                  "border-width": "3px"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Option1]",
                "inlineEditField": "[$Option1]",
                "style": {
                  "text-align": "center"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "display": "=if([$Option2]=='','none','')",
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "Delete",
                  "title": "Remove option"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option1": "=if([$Option2]!='',[$Option2],if([$Option3]!='',[$Option3],''))",
                    "Option2": "[$Option3]",
                    "Option3": ""
                  }
                }
              },
              {
                "elmType": "div",
                "style": {
                  "display": "=if([$Option2]=='','none','')",
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "TriangleSolidDown12",
                  "title": "Move option down"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option1": "[$Option2]",
                    "Option2": "[$Option1]"
                  }
                }
              }
            ]
          },
          {
            "COMMENT": "OPTION 2",
            "elmType": "div",
            "style": {
              "display": "=if([$Option2]=='','none','flex')",
              "padding": "12px",
              "column-gap": "6px",
              "width": "382px",
              "justify-content": "center"
            },
            "attributes": {
              "class": "ms-bgColor-neutralLight--hover"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "ColorSolid",
                  "title": "Result color",
                  "class": "='ms-fontColor-' + [$Color2]"
                },
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "background-color": "#f3f2f1"
                  },
                  "formatter": {
                    "COMMENT": "COLOR 2 COLOR PICKER",
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLighter ms-borderColor-neutralLight"
                    },
                    "style": {
                      "display": "flex",
                      "flex-direction": "column",
                      "border-style": "solid",
                      "border-width": "1px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "Theme colors",
                        "attributes": {
                          "class": "ms-fontColor-neutralDark"
                        },
                        "style": {
                          "font-size": "14px",
                          "margin-left": "6px",
                          "margin-top": "4px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "column-gap": "10px",
                          "margin": "8px 10px 0 10px",
                          "width": "140px",
                          "height": "60px"
                        },
                        "children": [
                          {
                            "forEach": "colorIterator in split('themeDarker|themeDark|themeDarkAlt|themePrimary|themeSecondary|neutralTertiary|neutralSecondary|neutralPrimaryAlt|neutralPrimary|neutralDark','|')",
                            "elmType": "div",
                            "attributes": {
                              "title": "=if([$colorIterator]=='themeDarker','Theme darker',if([$colorIterator]=='themeDark','Theme dark',if([$colorIterator]=='themeDarkAlt','Theme dark alternate',if([$colorIterator]=='themePrimary','Theme primary',if([$colorIterator]=='themeSecondary','Theme secondary',if([$colorIterator]=='neutralTertiary','Neutral tertiary',if([$colorIterator]=='neutralSecondary','Neutral secondary',if([$colorIterator]=='neutralPrimaryAlt','Neutral primary alternate',if([$colorIterator]=='neutralPrimary','Neutral primary','Neutral dark')))))))))",
                              "class": "=if([$Color2]==[$colorIterator],'ms-bgColor-neutralLighter ms-borderColor-neutralLighter ms-borderColor-neutralSecondary--hover','ms-bgColor-' + [$colorIterator] + ' ms-bgColor-neutralLighter--hover')"
                            },
                            "style": {
                              "display": "flex",
                              "align-items": "center",
                              "justify-content": "center",
                              "width": "20px",
                              "height": "20px",
                              "cursor": "pointer",
                              "box-sizing": "border-box",
                              "border-style": "=if([$Color2]==[$colorIterator], 'solid','none')",
                              "border-width": "1.5px"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Color2": "[$colorIterator]"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "class": "='ms-borderColor-white ms-bgColor-' + [$colorIterator]"
                                },
                                "style": {
                                  "width": "12px",
                                  "height": "12px",
                                  "border-style": "=if([$Color2]==[$colorIterator], 'solid','none')",
                                  "border-width": "3px"
                                }
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "txtContent": "Standard colors",
                        "attributes": {
                          "class": "ms-fontColor-neutralDark"
                        },
                        "style": {
                          "font-size": "14px",
                          "margin-left": "6px",
                          "margin-top": "4px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "column-gap": "10px",
                          "margin": "8px 10px 0 10px",
                          "width": "140px",
                          "height": "60px"
                        },
                        "children": [
                          {
                            "forEach": "colorIterator in split('redDark|red|yellow|yellowLight|greenLight|green|blueLight|blue|blueDark|purple','|')",
                            "elmType": "div",
                            "attributes": {
                              "title": "='Standard color: ' + if([$colorIterator]=='redDark','Dark red',if([$colorIterator]=='red','Red',if([$colorIterator]=='yellow','Orange',if([$colorIterator]=='yellowLight','Yellow',if([$colorIterator]=='greenLight','Light green',if([$colorIterator]=='green','Green',if([$colorIterator]=='blueLight','Light blue',if([$colorIterator]=='blue','Blue',if([$colorIterator]=='blueDark','Dark blue','Purple')))))))))",
                              "class": "=if([$Color2]==[$colorIterator],'ms-bgColor-neutralLighter ms-borderColor-neutralLighter ms-borderColor-neutralSecondary--hover','ms-bgColor-' + [$colorIterator] + ' ms-bgColor-neutralLighter--hover')"
                            },
                            "style": {
                              "display": "flex",
                              "align-items": "center",
                              "justify-content": "center",
                              "width": "20px",
                              "height": "20px",
                              "cursor": "pointer",
                              "box-sizing": "border-box",
                              "border-style": "=if([$Color2]==[$colorIterator], 'solid','none')",
                              "border-width": "1.5px"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Color2": "[$colorIterator]"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "class": "='ms-borderColor-white ms-bgColor-' + [$colorIterator]"
                                },
                                "style": {
                                  "width": "12px",
                                  "height": "12px",
                                  "border-style": "=if([$Color2]==[$colorIterator], 'solid','none')",
                                  "border-width": "3px"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Option2]",
                "inlineEditField": "[$Option2]",
                "style": {
                  "text-align": "center"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "Delete",
                  "title": "Remove option"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option2": "[$Option3]",
                    "Option3": ""
                  }
                }
              },
              {
                "elmType": "div",
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "TriangleSolidUp12",
                  "title": "Move option up"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option1": "[$Option2]",
                    "Option2": "[$Option1]"
                  }
                }
              },
              {
                "elmType": "div",
                "style": {
                  "display": "=if([$Option3]=='','none','')",
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "TriangleSolidDown12",
                  "title": "Move option down"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option2": "[$Option3]",
                    "Option3": "[$Option2]"
                  }
                }
              }
            ]
          },
          {
            "COMMENT": "OPTION 3",
            "elmType": "div",
            "style": {
              "display": "=if([$Option3]=='','none','flex')",
              "padding": "12px",
              "column-gap": "6px",
              "width": "382px",
              "justify-content": "center"
            },
            "attributes": {
              "class": "ms-bgColor-neutralLight--hover"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "ColorSolid",
                  "title": "Result color",
                  "class": "='ms-fontColor-' + [$Color3]"
                },
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "background-color": "#f3f2f1"
                  },
                  "formatter": {
                    "COMMENT": "COLOR 3 COLOR PICKER",
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLighter ms-borderColor-neutralLight"
                    },
                    "style": {
                      "display": "flex",
                      "flex-direction": "column",
                      "border-style": "solid",
                      "border-width": "1px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "Theme colors",
                        "attributes": {
                          "class": "ms-fontColor-neutralDark"
                        },
                        "style": {
                          "font-size": "14px",
                          "margin-left": "6px",
                          "margin-top": "4px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "column-gap": "10px",
                          "margin": "8px 10px 0 10px",
                          "width": "140px",
                          "height": "60px"
                        },
                        "children": [
                          {
                            "forEach": "colorIterator in split('themeDarker|themeDark|themeDarkAlt|themePrimary|themeSecondary|neutralTertiary|neutralSecondary|neutralPrimaryAlt|neutralPrimary|neutralDark','|')",
                            "elmType": "div",
                            "attributes": {
                              "title": "=if([$colorIterator]=='themeDarker','Theme darker',if([$colorIterator]=='themeDark','Theme dark',if([$colorIterator]=='themeDarkAlt','Theme dark alternate',if([$colorIterator]=='themePrimary','Theme primary',if([$colorIterator]=='themeSecondary','Theme secondary',if([$colorIterator]=='neutralTertiary','Neutral tertiary',if([$colorIterator]=='neutralSecondary','Neutral secondary',if([$colorIterator]=='neutralPrimaryAlt','Neutral primary alternate',if([$colorIterator]=='neutralPrimary','Neutral primary','Neutral dark')))))))))",
                              "class": "=if([$Color3]==[$colorIterator],'ms-bgColor-neutralLighter ms-borderColor-neutralLighter ms-borderColor-neutralSecondary--hover','ms-bgColor-' + [$colorIterator] + ' ms-bgColor-neutralLighter--hover')"
                            },
                            "style": {
                              "display": "flex",
                              "align-items": "center",
                              "justify-content": "center",
                              "width": "20px",
                              "height": "20px",
                              "cursor": "pointer",
                              "box-sizing": "border-box",
                              "border-style": "=if([$Color3]==[$colorIterator], 'solid','none')",
                              "border-width": "1.5px"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Color3": "[$colorIterator]"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "class": "='ms-borderColor-white ms-bgColor-' + [$colorIterator]"
                                },
                                "style": {
                                  "width": "12px",
                                  "height": "12px",
                                  "border-style": "=if([$Color3]==[$colorIterator], 'solid','none')",
                                  "border-width": "3px"
                                }
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "txtContent": "Standard colors",
                        "attributes": {
                          "class": "ms-fontColor-neutralDark"
                        },
                        "style": {
                          "font-size": "14px",
                          "margin-left": "6px",
                          "margin-top": "4px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "column-gap": "10px",
                          "margin": "8px 10px 0 10px",
                          "width": "140px",
                          "height": "60px"
                        },
                        "children": [
                          {
                            "forEach": "colorIterator in split('redDark|red|yellow|yellowLight|greenLight|green|blueLight|blue|blueDark|purple','|')",
                            "elmType": "div",
                            "attributes": {
                              "title": "='Standard color: ' + if([$colorIterator]=='redDark','Dark red',if([$colorIterator]=='red','Red',if([$colorIterator]=='yellow','Orange',if([$colorIterator]=='yellowLight','Yellow',if([$colorIterator]=='greenLight','Light green',if([$colorIterator]=='green','Green',if([$colorIterator]=='blueLight','Light blue',if([$colorIterator]=='blue','Blue',if([$colorIterator]=='blueDark','Dark blue','Purple')))))))))",
                              "class": "=if([$Color3]==[$colorIterator],'ms-bgColor-neutralLighter ms-borderColor-neutralLighter ms-borderColor-neutralSecondary--hover','ms-bgColor-' + [$colorIterator] + ' ms-bgColor-neutralLighter--hover')"
                            },
                            "style": {
                              "display": "flex",
                              "align-items": "center",
                              "justify-content": "center",
                              "width": "20px",
                              "height": "20px",
                              "cursor": "pointer",
                              "box-sizing": "border-box",
                              "border-style": "=if([$Color3]==[$colorIterator], 'solid','none')",
                              "border-width": "1.5px"
                            },
                            "customRowAction": {
                              "action": "setValue",
                              "actionInput": {
                                "Color3": "[$colorIterator]"
                              }
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "attributes": {
                                  "class": "='ms-borderColor-white ms-bgColor-' + [$colorIterator]"
                                },
                                "style": {
                                  "width": "12px",
                                  "height": "12px",
                                  "border-style": "=if([$Color3]==[$colorIterator], 'solid','none')",
                                  "border-width": "3px"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Option3]",
                "inlineEditField": "[$Option3]",
                "style": {
                  "text-align": "center"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "Delete",
                  "title": "Remove option"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option3": ""
                  }
                }
              },
              {
                "elmType": "div",
                "style": {
                  "cursor": "pointer",
                  "margin-top": "4px"
                },
                "attributes": {
                  "iconName": "TriangleSolidUp12",
                  "title": "Move option up"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Option2": "[$Option3]",
                    "Option3": "[$Option2]"
                  }
                }
              }
            ]
          },
          {
            "COMMENT": "ADD AN OPTION",
            "elmType": "div",
            "style": {
              "display": "=if([$Option1]=='' || [$Option2]=='' || [$Option3]=='', 'flex', 'none')",
              "column-gap": "4px",
              "padding-bottom": "12px",
              "align-items": "center",
              "cursor": "pointer"
            },
            "attributes": {
              "class": "ms-fontSize-m ms-fontColor-neutralSecondary ms-fontColor-themeDark--hover"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Option1": "=if([$Option1]!='',[$Option1],if([$Option2]=='' && [$Option3]=='','Choice 1',if[$Option2]!='',[$Option2],[$Option3]))",
                "Option2": "=if([$Option1]=='',[$Option3],if([$Option2]!='',[$Option2],if([$Option3]=='','Choice 2',[$Option3])))",
                "Option3": "=if([$Option1]=='' || [$Option2]=='','',if([$Option3]!='',[$Option3],'Choice 3'))"
              }
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "Add",
                  "class": "ms-fontSize-s"
                }
              },
              {
                "elmType": "div",
                "txtContent": "Add an option"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "background-color": "red"
            },
            "txtContent": "RESET",
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Question": "What is the best weapon?",
                "Option1": "Lazer Eyes",
                "Option2": "Bazooka",
                "Option3": "Dagger",
                "Color1": "themePrimary",
                "Color2": "themeDark",
                "Color3": "themeDarker"
              }
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionteam-poll-configuration.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.

  • /rowFormatter/children/0/children/0 must NOT have additional properties

From the contributor

How to use this sample

Summary

This sample combines a couple of lists and a few formats to demonstrate creating an application using view formatting. The end result is a configurable poll that end users can submit their choices too and view grouped results.

An optional Power Automate flow is also presented below to ensure that as Team Members are added to the Office 365 Group a response list item is configured automatically for them.

screenshot of the sample

screenshot of the poll response

View requirements

Poll list

Type Internal Name Required
Single line of text Title Yes
Single line of text Question Yes
Single line of text Option1 No
Single line of text Option2 No
Single line of text Option3 No
Single line of text Color1 No
Single line of text Color2 No
Single line of text Color3 No
Number Iteration Yes

Poll Responses list

Type Internal Name Required
Single line of text Title Yes
Person User No
Lookup Poll Yes
Additional Column from Poll Lookup Poll_x003a__x0020_Option_x0020_1 No
Additional Column from Poll Lookup Poll_x003a__x0020_Option_x0020_2 No
Additional Column from Poll Lookup Poll_x003a__x0020_Option_x0020_3 No
Additional Column from Poll Lookup Poll_x003a__x0020_Color_x0020_1 No
Additional Column from Poll Lookup Poll_x003a__x0020_Color_x0020_2 No
Additional Column from Poll Lookup Poll_x003a__x0020_Color_x0020_3 No
Additional Column from Poll Lookup Poll_x003a__x0020_Iteration No
Number ResponseIteration No
Single line of text Selection No
Single line of text SelectionwithColor No

Those ugly names are automatically created when we select the additional columns when configuring the Poll lookup column. Fun!

[!NOTE]
When using team-poll-results.json, it is necessary to group by the SelectionwithColor column.

Flow Prompt

"When a Horse is added or removed from an Office 365 Group, look up the user's profile, and then create a list item in SharePoint"

Sample

Solution Author(s)
team-poll.json Chris Kent
team-poll-configuration.json Chris Kent
team-poll-response.json Chris Kent

Version history

Version Date Comments
1.0 August 3, 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.

Keep exploring

More formats like this

Hide All Buttons on Command Bar

This sample demonstrates hiding all buttons on the command bar.

Explore format

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format