• Summary
• Used SharePoint Framework Version
• Applies to
• Prerequisites
• Solution
• Version history
• Supported languages
• How to implement

This SPFx (SharePoint Framework) webpart improves on the existing react-enhanced-powerapps solution developed by Hugo Bernier (GitHub) so I highly recommend you check out his work and see what the orginal version already could do. When using his webpart myself, I thought to myself "passing a SharePoint context parameter to your embedded Power App is great, but why should it be limited to only one?". That is why this enhanced webpart allows you to embed a Power App in SharePoint and use various page context parameters within your app by calling the Param("{contextParamName}") function, as well as configuring your own dynamic parameter in the property panel. See how to implement for a detailed description of how it works.

Download the .sppkg file here!

• SharePoint Framework
• Microsoft 365 tenant

• Node.js v10/12/14
• (optional) An M365 account. Get your own free Microsoft 365 tenant from M365 developer program

• English
• Dutch

By default, the webpart provides various SharePoint context variables by passing them to the Power App via the HTML iframe element URL as parameters. These parameters are (by default) as follows:

You can fetch these context parameters in your Power App by calling the Params("{contextParameterName}") function. You can fetch and use them individually, or use this formula in your app's OnStart to create a global variable of a compiled record of all of these context parameters which you can call later on:

Set(
    varEmbeddedContext,
    {
        aadInfo: {tenantId: Param("tenantId")},
        cultureInfo: {
            languageId: Param("languageId"),
            languageName: Param("languageName")
        },
        site: {
            title: Param("siteTitle"),
            portalUrl: Param("portalUrl"),
            absoluteUrl: Param("absoluteUrl"),
            serverRelativeUrl: Param("serverRelativeUrl"),
            serverRequestPath: Param("serverRequestPath"),
            group: {
                id: Param("groupId"),
                type: Param("groupType")
            },
            isTeamsConnectedSite: Param("isTeamsConnectedSite"),
            isTeamsChannelSite: Param("isTeamsChannelSite"),
            isArchived: Param("isArchived"),
            isHubSite: Param("isHubSite")
        },
        user: {
            id: Param("userId"),
            displayName: Param("displayName"),
            email: Param("email"),
            isAnonymousGuestUser: Param("isAnonymousGuestUser"),
            isExternalGuestUser: Param("isExternalGuestUser"),
            isSiteAdmin: Param("isSiteAdmin"),
            isSiteOwner: Param("isSiteOwner")
        }
    }
);

Furthermore, you can configure your own (dynamic) context parameter in the property pane of the webpart, just like the version of Hugo Bernier.

Download the .sppkg file here!