Forum Discussion

Brass Contributor

Jun 24, 2024

Solved

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.

SharePoint Online

u156531
Jun 27, 2024
Rob, I was able to add the "No". Thanks again for your help.

Rob_Elliott

Bronze Contributor

Jun 25, 2024

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

Brass Contributor

Jun 25, 2024

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?

Rob_Elliott

Bronze Contributor

Jun 25, 2024

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

u156531

Brass Contributor

Jun 25, 2024

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?

ganeshsanap

MVP

Jun 27, 2024

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:

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.