Forum Discussion

u156531's avatar
u156531
Brass Contributor
Jun 24, 2024

Adding a clickable yes/no button

My user wants me to add this yes/no button to a SharePoint list. Can someone tell me how I can accomplish this in the SharePoint list. 

 

  • Rob, I was able to add the "No". Thanks again for your help.
  • Rob_Elliott's avatar
    Rob_Elliott
    Bronze Contributor

    u156531 use the following JSON formatting on your yes/no type column(s):

     

     

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "style": {
        "display": "flex",
        "width": "100%",
        "height": "100%",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "width": "60px",
            "height": "30px",
            "border-radius": "15px",
            "align-items": "center",
            "flex-direction": "row",
            "justify-content": "=if(@currentField , 'flex-end' , 'flex-start')",
            "cursor": "pointer"
          },
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "YesNoColumnInternalName": "=if(@currentField , '0' , '1' )"
            }
          },
          "attributes": {
            "class": "=if(@currentField , 'ms-bgColor-greenLight' , 'ms-bgColor-blueLight')"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "18px",
                "height": "18px",
                "margin-left": "6px",
                "margin-right": "6px",
                "border-radius": "50%"
              },
              "attributes": {
                "class": "ms-bgColor-white"
              }
            }
          ]
        }
      ],
      "inlineEditField": "@currentField"
    }

     

     

     

     

    Also, have a look at https://github.com/pnp/List-Formatting/tree/master/column-samples/yesno-toggle-format

     

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

    • u156531's avatar
      u156531
      Brass Contributor
      I get a button in my SharePoint List from using the Jason you sent. However, its not real clear if the button indicates Yes or No. I asume Blue is No and green is Yes. Is there a method to add the word Yes next to the button when its green?

Resources