Forum Discussion
Adding a clickable yes/no button
- Rob, I was able to add the "No". Thanks again for your help.
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.
- Rob, This is great! One last thing, are you able to add the word "No" when the button is blue?
Thanksu156531 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.
Hi there! Your code worked but I have an issue. When I click on the toggle, I get a notification on the bottom of the screen saying "File updated" but the toggle doesn't visually change. I have to click on a blank space at the end of the column, which opens a checkable square, which, if checked, turns the toggle green. It's not intuitive at all and I'm not sure my colleagues will get the memo lol.
Can you help?
Thank you!!
- Rob, I was able to add the "No". Thanks again for your help.
