You are currently viewing Power Apps embed canvas app in model driven app
embed canvas in model driven app

Power Apps embed canvas app in model driven app

In this blog post, we will learn how Power Apps embed canvas app in model driven app form or in model driven app dashboard?

Power Apps embed canvas app in model driven app

  • The Canvas app and the Model driven app are main types of applications that you can create in Power Apps.
    • Canvas app gives you a blank canvas and allows you to design the form, also it allows you to connect with many types of data sources.
    • Model-driven apps in Power Apps are based on underlying data — specifically, the data stored in the Data verse.
      for more details please check this Article
  • As model driven app only based on the Data verse database and some times we need to include others data source in the model driven app, so it’s important to know how to embed canvas app in the model driven app as the canvas app is the app that you can use to connect to many data sources.

Embed canvas app in model driven app form

know we will learn how to embed canvas app or multiple canvas app in a model drive app form.

Requirements

In this scenario we will use a solution that contains

  • Data verse table for the employees,
  • Model driven app that include or based on this employee table .
  • Canvas app that i want to embed in the model driven app

Steps

  1. Add column in the Data verse table that we will use later to include the canvas app as PCF control in the model driven app, for example here I will add a column name canvasColumn.
  2. Open the table Forms under data experiences.
embed1 | Power Platform Geeks
  1. Edit the main form “in this example we will embed the canvas app in the main form of the employee table”
embed2 | Power Platform Geeks
edit the main form
  1. Add + component from the above menu in the main form and then choose to add one-column tab and name It a meaningful name to represent your app for example here I named it Employee App
 embed canvas app in model driven app
Create another tab for the canvas app
  1. Select the New Section >>then +Form field >> then select the column that we create in the table “CanvasColumn”, if you don’t see the column you can search for it as shown in the below image.
embed4 | Power Platform Geeks
  1. You can continue from the Modern designer ,Select the canvasColumn inside the New section and from the right properties expand Components and then click on +Component and Choose Canvas App
emb01 | Power Platform Geeks
  1. Then write the table name in the Entity name and in the static value under the App name write your app name and in the App ID write the canvas app id
emb02 | Power Platform Geeks
embed canvas app in model driven app form

You can get these value from the details of the canvas app

embed9 | Power Platform Geeks

Now your canvas app will appear in the employee app tab and you can see it in the employee table in your model driven app

emb011 | Power Platform Geeks
embed canvas app in model driven app form

This is how you can embed canvas app in model driven app form


  1. You can use the classic designer After you add the column in step 5 in the new section click Switch to classic
  2. Select the canvasColumn inside the new section and click change properties from the above menu
embed 5 | Power Platform Geeks
  1. It will open a pop up for field properties ,Select Controls tab and then choose add control
embed6 | Power Platform Geeks
  1. Select the canvas app control and then click the Add button
embed7 | Power Platform Geeks
  1. Enable canvas app for web, phone and tablet
embed8 | Power Platform Geeks
  1. In the App name write the correct app name you want to embed, you can select your canvas app from your apps section in the make site and then details of the app
  2. and edit the App ID and put the App Id that shown in the details of your canvas app
embed9 | Power Platform Geeks
emebd 10 | Power Platform Geeks
Edit App name
emebd11 | Power Platform Geeks
Edit App ID
  1. After you finish click Ok and then Save and Publish
  2. Now the canvas app appeared on new tap that we created you can refresh the form to see it

See Also

Join us
Need Help
  • Have a related question? Please ask it at deBUG.to Community.

Heba Kamal

Power Platform Consultant and Founder of Power Platform Geeks

Leave a Reply