Skip to content

Instantly share code, notes, and snippets.

@anoopt
Last active March 9, 2022 11:41
Show Gist options
  • Select an option

  • Save anoopt/3076fba40442116552632114c7fd6d33 to your computer and use it in GitHub Desktop.

Select an option

Save anoopt/3076fba40442116552632114c7fd6d33 to your computer and use it in GitHub Desktop.
Confirmation before changing status
{
"$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"
}
}
]
}
]
}
@anoopt
Copy link
Author

anoopt commented Mar 9, 2022

@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