Create a Voting feature in a List?

ScottAtWork it's very easy to create a ClickCount voting system for a list using some JSON column formatting. In the example below the user can vote for their favourite flag just by clicking the button in the Vote column.

In the list there is the title column for the name of the country, a single line of text column for the capital, a hyperlink column (displayed as an image) for the flag which has been uploaded to a document library, another hyperlink column for the vote button - the alternative text field is used for the button text, and finally a number column (no decimal places) named ClickCount for the….click count!

The vote column is formatted in advanced mode with the following JSON. It uses the setValue action to increment the value of the click count by 1.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField == '' , 'none' , '')"
  },
  "children": [
    {
      "elmType": "div",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "ClickCount": "= [$ClickCount] + 1"
        }
      },
      "children": [
        {
          "elmType": "a",
          "style": {
            "text-decoration": "none",
            "padding": "5px 10px 5px 10px",
            "font-weight": "bold",
            "border-radius": "5px",
            "font-size": "13px",
            "white-space": "nowrap"
          },
          "txtContent": "@currentField.desc",
          "attributes": {
            "href": "@currentField",
            "target": "_blank",
            "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter ms-fontColor-white--hover ms-bgColor-themePrimary--hover"
          }
        }
      ]
    }
  ]
}

The ClickCount column is formatted with the following JSON to make the font bold and larger and change the color to green if the flag has a vote:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if(@currentField > 0, '#32CD32', '#ff0000')",
    "font-weight": "=if(@currentField > 0, 'bold', 'normal')",
    "font-size": "18pt"
  }
}

This is the result. When the user clicks the button a larger version of the flag opens and the vote increments by 1.

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)