In my previous blog, we discussed on how to pass parameters from App URL and used them in PowerApp using Param function. In this blog we will see how to insert PowerApp in Dynamics 365 Entity Form and passing entity record GUID as parameter to open PowerApp within context of record.

AB1

We need to perform below steps in order to achieve our goal:

  • Create IFrame code for PowerApp to be embedded
  • Create a Web Resource with IFrame code in HTML body
  • Add Web Resource on entity form
  • JavaScript code to pass record GUID as parameter in Web Resource
  • Consume parameter in PowerApp

Create IFrame code for PowerApp:

Why, we are creating IFrame code instead of directly adding IFrame with PowerApp URL on entity form. Reason is, PowerApp does not load in IFrame directly and keeps on spinning as below.

AB2

Hence, we will add IFrame code in Web Resource and add Web Resource on entity form. Below is IFrame code for any PowerApp to be embedded. All you need is to replace [AppID] with your PowerApp ID which can be found in PowerApp web portal under Details section of your App. You can refer my blog on how to find App ID.

function iframeLoad() {

var recordID = window.parent.Xrm.Page.data.entity.getId().replace(‘{‘, ”).replace(‘}’, ”).toLowerCase();

var url = “https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&source=website&appId=/providers/Microsoft.PowerApps/apps/108e3gh6-3h77-3b6g-n456-43748n474&CompanyID=” + recordID;

document.getElementById(‘companyIframe’).src = url;

}

</body>

</html>

  • Remove existing code from your web resource and paste above code. Click OK. Save and publish your web resource.

AB8

Points to be noted in above code:

  • Script tags added under body with function iframeLoad(). This function is invoked from onload of HTML body
  • This function retrieves record GUID using Xrm object as parent.Xrm.Page.data.entity.getId()
  • Important point: Record GUID returned from above will be in upper case and will include curly braces. We must need to remove these braces and covert GUID in lower case else PowerApp will not recognize GUID passed
  • URL is appened with CompanyID parameter with record GUID value
  • Finally updating IFrame src attribute with update URL using document.getElementById

Consume Record GUID parameter in PowerApp:

Parameters passed in App URL are consumed using Param() function in PowerApp. Change Items property of your DetailForm as:

LookUp(Companies,cr2a5_companyid = Coalesce(Param(“CompanyID”),BrowseGallery1.Selected.cr2a5_companyid))

For more details on how to use parameters passed, refer my blog.

——————————————————————————————————————————————

Reload your entity form and this time PowerApp will be displayed within record context as shown below

AB9