Adding PowerApps to Dynamics 365

 Our experience on adding PowerApps to Microsoft Dynamics 365

After finding Gustaf Westerlund’s blog post on embedding PowerApps within Dynamics, I had to give this a go myself. Following the steps, I was able to get a PowerApp up and running on a Dynamics entity record within half an hour. This would be more useful if the PowerApp was aware of the record that it was embedded in though, so I got to looking at ways of passing the Dynamics 365 record id to the PowerApp.

Several failed attempts later and I had a PowerApp pulling back related data (using the Dynamics 365 connector) based on the record I was looking at in Dynamics. With the context now available in the app, and the vast number of readily available connectors that PowerApps provides, this really opens up the possibilities of what can be achieved within Dynamics 365.

If you want to try this for yourself the steps are below.

(It is assumed that you already have a PowerApp created and a basic knowledge of customisation within Dynamics 365)

Within Dynamics 365, you first need to create a HTML web resource with the following code. This is completely generic and has no reference to any particular PowerApp (more on this in a minute).

For the next step, you are going to need the App Id of your PowerApp. You can find this by navigating to the details of your app in the PowerApps web client. Copy this App ID and store it somewhere safe.

Locate the form that you want to add your PowerApp to and add a new web resource. In the “Web Resource Properties” add the following JSON as shown in the screenshot below

{“PowerAppId”:”your powerapp id from the previous step goes here”}

You also need to ensure that the “Pass record object-type code and unique identifier as parameters” is checked.

For the formatting of your form’s web resource, I have found that setting the number of rows to 28, with scrolling off and no border works best. This may differ in your environment and depends on the aspect ratio and display settings that you defined when creating your PowerApp.

That’s it! You now have a PowerApp embedded that is receiving context from Dynamics 365.

In order to access the passed in context within your PowerApp simply use

Param(“id”)

You will notice that the parameter name is the one we are mapping the Dynamics 365 Id to in the HTML web resource when the PowerApp URL is generated.

document.getElementById(‘iframePowerApp’).src = “https://web.powerapps.com/apps/” + powerappid + “?source=iframe&screenColor=rgba(10,10,240,1)&id=” + id + “&type=” + type + “&hidenavbar=true”;

With this known, you can pass whatever you want from Dynamics 365 to PowerApps simply by adding additional query parameters, like so.

document.getElementById(‘iframePowerApp’).src = “https://web.powerapps.com/apps/” + powerappid + “?source=iframe&screenColor=rgba(10,10,240,1)&id=” + id + “&type=” + type + “&hidenavbar=true&favoritecolor=red&haslicence=true”;

Accessing them with Param(“favoritecolor”) and Param(“haslicence”).

The beauty of the above is that once the HTML web resource has been added, you can embed PowerApps in any of your forms very easily and extend Dynamics with very little code. All you need to do is get making apps.

Good luck with your PowerApp activities.