Integrating Dynamics 365 App into PowerApps Canvas app using Responsive iFrame PCF Control

Blog Content

• Problem Statement
• Responsive iFrame PCF Control vs iFrame/web Resources Control
• Requirements
• Setup
• Integration Demo Steps 
• References and other useful links
• Contact us

Problem Statement

Out of the box Dynamics 365 (D365) functionality allows you to embed Canvas apps into D365 Model-driven Apps. The documented solution allows you to reverse the order by embedding D365 Model-driven app into a Canvas app. The PCF control used in this document also allows you to display a record based on an ID passed to the Responsive iFrame PCF control, solving a common issue when using iFrame in apps or web sites.

NOTE: The demo in this document is simple to build but can be incorporated into complex scenarios. Control integration and parameter passing is the focus of this document.

Responsive iFrame PCF Control vs iFrame/web Resources Control

In general, use of Power Apps component framework and custom pages is encouraged to build configurable, reusable and more tight external integrations. 

Requirements

To be able to follow this example you will need:

1. Power Platform Environment
   
   NOTE: For demo purposes we recommend importing the solution in a Sandbox or Dev Power Platform environment.
   
   
2. Enable Power Apps component framework for canvas apps for the environment you will be using (Power Platform Admin permissions are required)
   
   IMPORTANT: To use code components inside canvas apps, you must enable the Power Apps component framework for canvas apps on the environment you're using. Open the Admin Center (admin.powerplatform.microsoft.com) and navigate to your environment. Navigate to Settings > Features (under the Product section). Ensure Power Apps component framework for canvas apps is turned On.
   
   
3. Access to Power Apps
4. Dynamics 365 (D365) Apps (Or any Model-driven App)
5. Download the Responsive iFrame PCF Solution (Responsive iFrame PCF Control)
6. Import the Responsive iFrame PFC control (see Setup Section)

Setup

After you download the Responsive iFrame PCF solution (Zip file) import it into your Power Platform Environment.

1. Navigate to your Power Platform Environment.
2. From the left side select “Solutions”
3. From the top menu select the Import button.
4. Locate the downloaded zip managed solution and import it.
   
   
   
   
5. After the import is completed, you should see the below solution imported to your environment.
   
   

Integration Demo Steps

NOTE: Ensure to review the Requirements section of this blog before starting the below steps.

1. Navigate to your Power Apps environment (make.powerapps.com)
2. From the left menu select the “+ Create” option.
3. Select the “Blank app” from the "Create your App" section.
   
   
   
   
4. From the pop-up locate the “Canvas app” option and select the Create button.
5. Give it a name and select the canvas format. In this case we will name it DemoiFramePCF and select the tablet format.
6. To start, insert a label and a text box, give then proper text and names, and arrange them as below.
   
   
   
   
7. Importing the Resonsive iFrame PFC control to the Canvas app.
   
   
   1. From the left side click the Tree view icon (See below example image).
   2. Select the “Components” tab.
   3. Click the ellipsis “…” next to the “+ New Component” option.
   4. Select the “Import Component” option.
      
      
      
      
   5. From the right flyout select the “Code” tab, locate the "responsiveIframePCFControl" component, select it, and at the bottom press the “Import” button.
      
      
      
      
      Note: If you do not see the “Code” tab your administrator has not enabled the “Power Apps component framework for canvas apps” for the environment. (See Requirements section).
      
      
8. Once the solution is imported, on the left menu select the “Insert” option, locate the “Code Components” section, and select and drag the “responsiveIframePCFControl” component to your screen.
9. Give the control a name and ensure that it fits as the example below.
   
   NOTE: The version of the Responsive iFrame PCF control can be resized using the control properties.
   
   
   
   
10. Navigate to your D365 Model-drive app, open a record, and copy the URL (We will use it later in the instructions). In this example we will use D365 Field Service and use a Work Order to display in the iFrame control.
    
    NOTE: Ensure to select a Model-driven app Form that can accept parameters in the query string.
    
    
11. Back in the Canvas app select the "responsiveIframePCFControl" control and locate the “src” property. Paste the URL you extracted from the previous step (Ensure to paste the copied link inside the quotation marks).
    
    
    
    
    
    
12. Update the src parameters as below to be able to pass information to the iFrame src and load the correct data based on the ID you entered in the text box.
    
    
    
    
13. At this point you can update the text control (run the app) and put any record ID and the iFrame PFC control, it will load the specific record data (See examples below).
    
    
    
    
    
    

References and other useful links

• Use IFRAME and web resource controls on a form (model-driven apps) - Power Apps | Microsoft Docs
• Power Apps component framework components
• IFRAME component - Power Apps | Microsoft Docs
• Responsive iFrame PCF Control | PCF Gallery

Blog Contacts