Is it possible to embed the Power Automate/Flow Approvals page into a SharePoint Online page?

Question

We have a number of lists and libraries in SharePoint with associated workflows in Power Automate/Flow. The Flows work well, but when users are asked to approve items they will be directed to the 'scary looking' (in the user's words) Power Automate site, with the menu on the left-side of the screen that they would never touch. These people are not developers, or even power users - they just want to approve a new document (for example). When they reach this screen, they become hesitant to even proceed with the approval itself due to what they see.

My question is: is it possible to embed the main Approvals part of this page from Power Automate/Flow into a SharePoint page, so that it appears without the menus on the left? That is, they could still be in SharePoint, but will see a list of their pending approvals from Power Automate?

Answer 1

Just did a test in my environment, I tried to use embed web part to embed the Power Automate/Flow Approvals page in SharePoint but failed.

So i think it's impossible to embed Power Automate/Flow page into a SharePoint page.

Answer 2

Yes, you can try the below blog:

https://docs.microsoft.com/en-us/power-automate/developer/embed-flow-dev

Precisely, create a custom page with below Java Script: Prior to invoke the widget, initialize Flow JS SDK:

<script src="https://flow.microsoft.com/Content/msflowsdk-1.1.js"></script>

Widget Code inside HTML's Body tag:

<script>
    var sdk = new window.MsFlowSdk({ hostName: window.location.origin, locale: 'en-us', hostId: window.WellKnownHostIds.WIDGETTEST });
    var widget = sdk.renderWidget('approvalCenter', {
        container: 'flow-div',
        enableOnBehalfOfTokens: true,
        environmentId: environmentName,
        debugMode: false,
        approvalCenterSettings: {
            autoNavigateToDetails: true,
            hideFlowCreation: true,
            hideInfoPaneCloseButton: true,
            hideLink: false,
            showSimpleEmptyPage: true
        }
    });
    widget.listen("GET_ACCESS_TOKEN", function (requestParam, widgetDoneCallback) {
        widgetDoneCallback(null, { token: accessTokenDictionary[requestParam.data.resource] });
    });
    widget.listen("WIDGET_READY", function () {
        console.log("The flow widget is now ready.");
    });
    widget.listen("WIDGET_RENDERED", function () {
        console.log("The flow widget is now rendered.");
        document.getElementById("flow-div").className = "flow-container";
    });
    widget.listen("RECEIVED_APPROVAL_STATUS_CHANGED", function (param) {
        console.log("The received approval has changed status. The current count of approvalRequests is " + param.data.approvalRequestsCount);
    });
</script>

Hit below URL in your browser to have a Test Page displayed of your Power Automate Approval Center via the above code snippet. Ref: https://flow.microsoft.com/en-us/test/approvalcenterwidget/

Or Else,

Go for an App registered in App Catalog to get displayed in SharePoint Modern Page with the use of Power Automate JS SDK.