Approval status is not displaying user id when doc is submitted

Guest User

Hi Team

I need help, have this json now trick part on my sharepoint when i submit data from power apps and on email when approval type is submitted, its not showing who did and pending status should the document is on hold to someone needs to approve or reject a document on word. Who can assist to achieve this?

{
  "$schema": "//developer.microsoft.com/json-schemas/sp/v2/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([$ItemStatus] == 'Pending' || [$ItemStatus] == '', 'inherit','none')",
        "flex-directon": "row",
        "justify-content": "left",
        "align-items": "center",
        "flex-wrap": "wrap"
      },
      "children": [
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Approved",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Approved', 'greenButton', '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": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Rejected",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Rejected', 'redButton', '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": "Reject",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Reassign",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Reassign', 'orangeButton', '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": "Rotate"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Reassign",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Restart for Approval",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Restart for Approval', 'blueButton', '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": "Refresh"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Restart for Approval",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Request Action",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Request Action', 'yellowButton', '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",
              "txtContent": "Request Action",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "span",
          "txtContent": "='This item is ' + toLowerCase([$ItemStatus])",
          "style": {
            "display": "=if([$ItemStatus] == 'Pending' ||[$ItemStatus] == '' , 'none','inherit')",
            "padding-left": "5px",
            "word-break": "keep-all"
          }
        }
      ]
    }
  ]
}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sigar Dave2y ago

Accepted answer

To achieve the desired functionality of displaying who took the action and indicating the pending status for approvals, you can modify your JSON column formatting to include these details. Here’s an updated version of your JSON with these improvements:

Display the action taker: Include a field to show the person who performed the action.
Pending status indication: Ensure the status reflects pending approvals correctly.

{
  "$schema": "//developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-direction": "row",
    "justify-content": "left",
    "align-items": "center",
    "flex-wrap": "nowrap"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "=if([$ItemStatus] == 'Pending' || [$ItemStatus] == '', 'inherit','none')",
        "flex-direction": "row",
        "justify-content": "left",
        "align-items": "center",
        "flex-wrap": "wrap"
      },
      "children": [
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Approved",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Approved', 'greenButton', 'ms-fontColor-themePrimary ms-fontColor-themeDarker--hover')"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-direction": "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": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Rejected",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Rejected', 'redButton', 'ms-fontColor-themePrimary ms-fontColor-themeDarker--hover')"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "left",
            "align-items": "center",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "Blocked"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Reject",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Reassign",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Reassign', 'orangeButton', 'ms-fontColor-themePrimary ms-fontColor-themeDarker--hover')"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "left",
            "align-items": "center",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "Rotate"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Reassign",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Restart for Approval",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Restart for Approval', 'blueButton', 'ms-fontColor-themePrimary ms-fontColor-themeDarker--hover')"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "left",
            "align-items": "center",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "Refresh"
              },
              "style": {
                "padding": "4px"
              }
            },
            {
              "elmType": "span",
              "txtContent": "Restart for Approval",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        },
        {
          "elmType": "button",
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "ItemStatus": "Request Action",
              "ApprovalActionBy": "@me"
            }
          },
          "attributes": {
            "class": "=if([$ItemStatus] == 'Request Action', 'yellowButton', 'ms-fontColor-themePrimary ms-fontColor-themeDarker--hover')"
          },
          "style": {
            "border": "none",
            "background-color": "transparent",
            "cursor": "pointer",
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "left",
            "align-items": "center",
            "flex-wrap": "wrap"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "Request Action",
              "style": {
                "word-break": "keep-all"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "span",
          "txtContent": "='This item is ' + toLowerCase([$ItemStatus]) + ' by ' + [$ApprovalActionBy]",
          "style": {
            "display": "=if([$ItemStatus] == 'Pending' ||[$ItemStatus] == '' , 'none','inherit')",
            "padding-left": "5px",
            "word-break": "keep-all"
          }
        }
      ]
    }
  ]
}

Display Flex Direction Fix: Corrected the "flex-direction" spelling.
Added Approval Action By: Included the ApprovalActionBy field in the status display.
Conditional Display: Ensured that the display conditions work correctly for showing/hiding elements based on status.

This JSON should now show who approved/rejected/reassigned the item and the pending status. Make sure the column names in the SharePoint list match those referenced in the JSON (e.g., ItemStatus, ApprovalActionBy).

Abhishek Yadav2y ago
To achieve the functionality you described, you can use Power Automate to capture the user who submitted the data from Power Apps and include that information in the email when the approval type is submitted. You can also update the SharePoint list item with the pending status and the user who needs to approve or reject the document.

Here is an example of a flow you can create in Power Automate to achieve this:

1. Trigger: When an item is created or modified in the SharePoint list
2. Condition: Check if the approval type is submitted
3. Compose: Store the user who submitted the data from Power Apps
4. Update item: Update the SharePoint list item with the pending status and the user who needs to approve or reject the document
5. Send an email: Include the user who submitted the data and the pending status in the email for approval

By implementing this flow, you can capture the necessary information and include it in the email for approval. Make sure to adjust the flow to fit your specific requirements and SharePoint list structure.

If you need further assistance or have any specific questions, feel free to ask!