Forum Discussion
Adding a clickable button to A sharepoint list to update a Yes/No Field
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.
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?
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=JmZKkfy3Tx8Greetings.
eduarrdonuxus50 Yes, SharePoint JSON formatting supports internal name of columns hence you always have to use the internal name to get/update the column value.
Reference: 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.
I have the same issue as Timotej85. Please advise.
