Forum Discussion

Ewalsh5's avatar
Ewalsh5
Copper Contributor
Aug 16, 2023

Adding a clickable button to A sharepoint list to update a Yes/No Field

I am currently creating a list which users are assigned policies to read. I am struggling to find any way to make the list friendly for the users to mark as reading a policy.

 

When a policy is assigned to them, a list item is created with a Yes/No column set to No.

I am looking for a way which they can click a button, and the button will change the value of that specific column in that specific row to Yes.

 

I've seen some mentions to JSON actions, but I have never used JSON, so I am in the dark of any possible way to resolve this issue. Ideally I don't want to use a flow, but if a button can click a flow and dynamically pull the Row and Column information, I am open to building that. Any help will be appreciated. 

microsoft lists
SharePoint Online

6 Replies

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Aug 31, 2023

    Ewalsh5 You can use column formatting JSON like below for your Yes/No columns which will change them to display like a toggle: 

     

    {
  "$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-themePrimary' , 'ms-bgColor-neutralTertiaryAlt')"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "18px",
            "height": "18px",
            "margin-left": "6px",
            "margin-right": "6px",
            "border-radius": "50%"
          },
          "attributes": {
            "class": "ms-bgColor-white"
          }
        }
      ]
    }
  ]
}

     

    Where YesNoColumnInternalName is the internal name of your Yes/No column. You can get the internal name of your columns by following this article: How to find the Internal name of columns in SharePoint Online? 

     

    Output: 

     

    You can find the JSON for emoji and icon here: Yes/No Column Toggle 

    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.

    • Timotej85's avatar
      Timotej85
      Copper Contributor
      Aug 15, 2024

      Higaneshsanap !

      I really like your suggestion but when I insert the code the sliders appear dead. You still need to click the box first as if the slider is just a background and then select the check-box to either true or false. Subsequently the toggle appearance changes. I don't know if this is due to an update but I cannot make it work. Have you tried this code lately? Do you face any issues?

      • eduarrdonuxus50's avatar
        eduarrdonuxus50
        Copper Contributor
        Jan 17, 2025

        Hi Timotej85 I have the same issue but I figured out that I was calling on the public name of each column, once I change it to the internal name of each one the button starts to work well for me, maybe you should check it

        This video helped me to undertstand better this tool

        https://www.youtube.com/watch?v=JmZKkfy3Tx8

         

        Greetings.

  • Rob_Elliott's avatar
    Rob_Elliott
    Bronze Contributor
    Aug 31, 2023

    Ewalsh5 there is an easy way to do this with a simple bit of JSON. First of all I've formatted my Read Yes/No column with out of the box conditional formatting, so red if No and green if Yes. Save that. Then format the column again but this time click on Advanced mode. A window will open with the JSON formatting. Scroll down to the very bottom and you'll see the line

    "txtContent": "@currentField.displayValue

     

    Add a ,comma after it then hit enter to add a new line before the closing parenthesis/bracket and type: 

     

    "inlineEditField":  "@currentField"

     

    Then click Save then Cancel to close the formatting panel. Your users can now just click in the read column to change the value from No to Yes.

     

     

     

    The other way to do this if you don't want to apply initial formatting is to go straight to the advanced mode of the column formatting an, delete everything that'sthere and paste in 

     

    {
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField.displayValue",
"inlineEditField": "@currentField"
}

     

     

    Rob
    Los Gallardos
    Microsoft Power Automate Community Super User.
    Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

     

     

     

Resources