Last active
March 9, 2022 11:41
-
-
Save anoopt/3076fba40442116552632114c7fd6d33 to your computer and use it in GitHub Desktop.
Confirmation before changing status
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", | |
| "elmType": "div", | |
| "style": { | |
| "flex-directon": "row", | |
| "justify-content": "left", | |
| "align-items": "center", | |
| "flex-wrap": "nowrap" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "display": "=if(([$ApprovalClicked] == false, 'inherit','none')", | |
| "flex-directon": "row", | |
| "justify-content": "left", | |
| "align-items": "center", | |
| "flex-wrap": "wrap" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "button", | |
| "customRowAction": { | |
| "action": "setValue", | |
| "actionInput": { | |
| "ApprovalClicked": true | |
| } | |
| }, | |
| "attributes": { | |
| "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" | |
| }, | |
| "style": { | |
| "border": "none", | |
| "background-color": "transparent", | |
| "cursor": "pointer", | |
| "display": "flex", | |
| "flex-directon": "row", | |
| "justify-content": "left", | |
| "align-items": "center", | |
| "flex-wrap": "wrap" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "attributes": { | |
| "iconName": "SkypeCircleCheck" | |
| }, | |
| "style": { | |
| "padding": "4px" | |
| } | |
| }, | |
| { | |
| "elmType": "span", | |
| "txtContent": "Approve?", | |
| "style": { | |
| "word-break": "keep-all" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "div", | |
| "style": { | |
| "display": "=if(([$ApprovalStatus] == 'Pending' || [$ApprovalStatus] == '') && [$ApprovalClicked] == true, 'inherit','none')", | |
| "flex-directon": "row", | |
| "justify-content": "left", | |
| "align-items": "center", | |
| "flex-wrap": "wrap" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "txtContent": "Are you sure?", | |
| "style": { | |
| "padding-left": "5px", | |
| "word-break": "keep-all" | |
| } | |
| }, | |
| { | |
| "elmType": "button", | |
| "customRowAction": { | |
| "action": "setValue", | |
| "actionInput": { | |
| "ApprovalStatus": "Approved", | |
| "ApprovalActionBy": "@me" | |
| } | |
| }, | |
| "attributes": { | |
| "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" | |
| }, | |
| "style": { | |
| "border": "none", | |
| "background-color": "transparent", | |
| "cursor": "pointer", | |
| "display": "flex", | |
| "flex-directon": "row", | |
| "justify-content": "left", | |
| "align-items": "center", | |
| "flex-wrap": "wrap" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "attributes": { | |
| "iconName": "SkypeCircleCheck" | |
| }, | |
| "style": { | |
| "padding": "4px" | |
| } | |
| }, | |
| { | |
| "elmType": "span", | |
| "txtContent": "Yes", | |
| "style": { | |
| "word-break": "keep-all" | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "button", | |
| "customRowAction": { | |
| "action": "setValue", | |
| "actionInput": { | |
| "ApprovalClicked": false | |
| } | |
| }, | |
| "attributes": { | |
| "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" | |
| }, | |
| "style": { | |
| "border": "none", | |
| "background-color": "transparent", | |
| "cursor": "pointer", | |
| "display": "flex", | |
| "flex-directon": "row", | |
| "justify-content": "left", | |
| "align-items": "center", | |
| "flex-wrap": "wrap" | |
| }, | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "attributes": { | |
| "iconName": "Blocked" | |
| }, | |
| "style": { | |
| "padding": "4px" | |
| } | |
| }, | |
| { | |
| "elmType": "span", | |
| "txtContent": "No", | |
| "style": { | |
| "word-break": "keep-all" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "elmType": "div", | |
| "children": [ | |
| { | |
| "elmType": "span", | |
| "txtContent": "='This item is ' + toLowerCase([$ApprovalStatus])", | |
| "style": { | |
| "display": "=if([$ApprovalStatus] == 'Pending' || [$ApprovalStatus] == '' , 'none','inherit')", | |
| "padding-left": "5px", | |
| "word-break": "keep-all" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Hi @anoopt 😆✨
How about using a custom card as shown below?
If you use the custom card method, you do not need the help of ApprovalClicked
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"txtContent": "Approve?",
"style": {
"display": "=if([$ApprovalStatus] == 'Pending' || [$ApprovalStatus] == '' , 'flex','none')",
"cursor": "pointer",
"padding": "5px 10px 5px 10px",
"border-radius": "5px"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-white--hover ms-bgColor-themeLighter ms-bgColor-themePrimary--hover"
},
"customCardProps": {
"openOnEvent": "click",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"padding": "10px"
},
"children": [
{
"elmType": "span",
"txtContent": "Are you sure?",
"style": {
"padding-left": "5px",
"word-break": "keep-all"
}
},
{
"elmType": "button",
"customRowAction": {
"action": "setValue",
"actionInput": {
"ApprovalStatus": "Approved",
"ApprovalActionBy": "@me"
}
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"display": "flex",
"flex-directon": "row",
"justify-content": "left",
"align-items": "center",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "SkypeCircleCheck"
},
"style": {
"padding": "4px"
}
},
{
"elmType": "span",
"txtContent": "Yes",
"style": {
"word-break": "keep-all"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "setValue",
"actionInput": {
"ApprovalClicked": false
}
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"display": "flex",
"flex-directon": "row",
"justify-content": "left",
"align-items": "center",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Blocked"
},
"style": {
"padding": "4px"
}
},
{
"elmType": "span",
"txtContent": "No",
"style": {
"word-break": "keep-all"
}
}
]
}
]
}
}
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "='This item is ' + toLowerCase([$ApprovalStatus])",
"style": {
"display": "=if([$ApprovalStatus] == 'Pending' || [$ApprovalStatus] == '' , 'none','inherit')",
"padding-left": "5px",
"word-break": "keep-all"
}
}
]
}
]
}In the above method of displaying a custom card, we removed the icon that was displayed to the left of the Approve?
The reason is that adding more children under an element with customCardProps set up may not work well😣
@tecchan1107 - You are a star 🌟
This is exactly what I was looking for!
I totally missed looking at the customCardProps.
Thank you! 🙇
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @tecchan1107 - The master of list formatting 🙇♂️.
Sorry to bother you, I had a question.
Using
setValueI am trying to add a confirmation message before completing the request. i.e. in the gif, when a user clicksApprove?they should get a confirmation message and then when they sayyesthe status should change.To do that I am taking help of a boolean column called
ApprovalClicked. When a user clicksApprove?, the value ofApprovalClickedis set totrueand then the messageAre you sure?with 2 buttons shows up.What I want to know is if there is a simpler way to do this? Can you please reply when you get a chance?
Thank you.