SOLVED

Adding a clickable yes/no button

Brass Contributor

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. 

u156531_0-1719253174816.png

 

8 Replies

@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"
}

 

 

 

clickableToggle.png

 

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)

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?

@u156531 you can set the colors yourself - line 30 of the JSON.

Hi Rob, The colors are good. I need the word "Yes" to appear next to the button when its set to Yes. Is that possible?

@u156531 Try using below JSON: 

 

{
  "$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": {
          "YesNoColumn": "=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"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "txtContent": "=if(@currentField,'Yes','')",
      "style": {
        "font-weight": "bold",
        "margin-left": "10px"
      }
    }
  ],
  "inlineEditField": "@currentField"
}

 

Output

ganeshsanap_0-1719495661148.png

Where [$YesNoColumn] is an internal name of your column in SharePoint list in this format: [$InternalNameOfColumn]. You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Rob, This is great! One last thing, are you able to add the word "No" when the button is blue?
Thanks
best response confirmed by u156531 (Brass Contributor)
Solution
Rob, I was able to add the "No". Thanks again for your help.

@u156531 This should work: 

 

{
  "$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": {
          "YesNoColumn": "=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"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "txtContent": "=if(@currentField,'Yes','No')",
      "style": {
        "font-weight": "bold",
        "margin-left": "10px"
      }
    }
  ],
  "inlineEditField": "@currentField"
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

1 best response

Accepted Solutions
best response confirmed by u156531 (Brass Contributor)
Solution
Rob, I was able to add the "No". Thanks again for your help.

View solution in original post