Skip to content

Instantly share code, notes, and snippets.

@anoopt

anoopt/confirmation_before_changing_status.json

Last active March 9, 2022 11:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anoopt/3076fba40442116552632114c7fd6d33 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anoopt/3076fba40442116552632114c7fd6d33 to your computer and use it in GitHub Desktop.
Download ZIP
Confirmation before changing status
Raw
confirmation_before_changing_status.json
{
"$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"
}
}
]
}
]
}
@tecchan1107
Copy link

tecchan1107 commented Mar 9, 2022 •
edited
Loading

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
image

{
  "$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😣

@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