Iframe PCF Control Used in MS Power App

Currently, we have a requirement to Open Third-party Website from the Power app. In the Power app, we have the function Launch command to open a website from the power app. But when we used this Launch function,  got one error/issue “Cross-origin” in the chrome browser.

So, to resolve these issues we found one option using Iframe PCF Control for opening a third-party website. Iframe PCF control works the same as Iframe in HTML. It will display a web page within a web page. This article will teach you how to used Iframe PCF control in the Power app.

1. Go to the PCF control website, Search Iframe PCF control tools and click on the download icon.

2.    It will go to github.com and download Iframe Solution and Dynamics Solutions managed one. 

3.    Once the download is completed then import it into your Environment and click Publish all customizations.

4.    Go to PowerApps and create a blank Canvas App save that app with your name.

In this example, we are using “Iframe APP”.

5.    Open the iframe app and click on components. Select the Import components button. 

We do not see the canvas, code option import screen. To enable that feature, we need System administrator privilege to enable the Power apps component feature in that environment.

i)    Navigate to Power Platform Admin Center.

ii)    Go to the Environments-> Settings->Product->select Features -> Switch ON.

6.    Once the power app component framework feature is enabled then we can see the code option into the import component. Select IframePCF control into App and put URL in Src properties 

Unit-Testing

7.    Go to PowerApps and select the Iframe app and play it.

That’s it from this blog.