{"id":23153,"date":"2020-03-23T10:10:41","date_gmt":"2020-03-23T10:10:41","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=23153"},"modified":"2022-07-19T16:20:06","modified_gmt":"2022-07-19T10:50:06","slug":"embedding-canvas-apps-within-model-driven-apps-power-apps-portal-power-bi-and-custom-websites","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/03\/embedding-canvas-apps-within-model-driven-apps-power-apps-portal-power-bi-and-custom-websites\/","title":{"rendered":"Embedding Canvas Apps within Model Driven Apps, Power Apps Portal, Power BI and Custom Websites"},"content":{"rendered":"

Canvas Apps is the new Citizen developer to quickly design pixel perfect mobile apps with very little to no pro-dev knowledge.<\/p>\n

While Model Driven apps allow for drag and drop interface for form design, they still do have a strict layout and you cannot really place controls wherever you want. This is where Canvas Apps come in handy where you can go ahead and design canvas apps.<\/p>\n

These canvas apps can then be embedded or referenced within the other Power Platform family of applications like the Model Driven Apps, Portals and even within Power BI Dashboards.<\/p>\n

Note: Though the app can be embedded in a variety of applications, the logged-in user should have appropriate Power Apps License assigned to them for the canvas to appear for them.<\/strong><\/em><\/p><\/blockquote>\n

If they are not already logged in with appropriate user account that has license assigned to them, they will see the Sign-in screen instead of the app.<\/em><\/strong><\/p>\n

Canvas Apps with Model Driven Apps<\/strong><\/h2>\n

Canvas Apps can be embedded within Model Driven Apps as PCF controls.<\/p>\n

To add a canvas app, the first step would be to place a text field on the form.<\/p>\n

\"Canvas<\/p>\n

Next add a control to this field and choose Canvas app.<\/p>\n

\"Canvas<\/p>\n

Make sure to set this as the control to be used in web, phone and tablet view.<\/p>\n

\"Canvas
\nIn the properties click customize to auto-create a canvas app that has the reference of the record passed over for use within the app.<\/p>\n

\"Canvas<\/p>\n

Using ModelDrivenFormIntegration we now have access and reference to the parent record within which the canvas app has been embedded.<\/p>\n

\"Canvas<\/p>\n

The datasource is set to [@Accounts], I had embedded this within an account form and the source of all the controls on the form is tied to this as well.<\/p>\n

\"Canvas<\/p>\n

Adding a gallery here to show contact images.<\/p>\n

\"Canvas<\/p>\n

And now when you navigate to your record in model driven app, you can see it shows the related contact images.<\/p>\n

\"Canvas<\/p>\n

Any changes you make to the data in the model driven form is auto reflected in the canvas. Change the city and it would show the updated value in the canvas.<\/p>\n

You can also communicate with the model driven form. Read more here<\/a>.<\/p>\n

Canvas Apps within Power BI Report<\/strong><\/h2>\n

Canvas Apps now show up as a component that can be directly added to a Power BI report. For this example, I created a canvas app of the My Open Opportunities View.<\/p>\n

Using the My Open Opportunities View ensures that the security roles are honored and the logged in user only sees the opportunities that they have access to, without requiring any additional code.<\/p>\n

\"Canvas<\/p>\n

Once saved, we could now embed this within Power BI Report. You now have PowerApps as a component that could be added directly.<\/p>\n

\"Canvas<\/p>\n

After adding the component, you need to add the data fields that would be the source data for your canvas app<\/p>\n

\"Canvas<\/p>\n

Once added, you could create a new Power App from here. Doing so will provide you with the PowerBI contextual information similar to the one we had in case of embedding it in Model driven apps.<\/p>\n

\"Canvas<\/p>\n

Once done save and publish and when you move back to Power BI report, you have the app displayed in there.<\/p>\n

\"Canvas<\/p>\n

Canvas Apps within Power Apps Portal<\/strong><\/h2>\n

Any canvas app can be accessed through a public facing app url that can be found in the app details screen.<\/p>\n

Right click on your canvas app in the app listing at https:\/\/make.powerapps.com<\/a> and choose Details.<\/p>\n

\"Canvas<\/p>\n

You can set the url of an IFRAME to the url provided in the Web Link to have the canvas app display there.<\/p>\n

https:\/\/apps.powerapps.com\/play\/[AppID]?source=iframe<\/h2>\n

You can pass parameters within the url and this could be used with the app to provide contextual information.<\/p>\n

https:\/\/apps.powerapps.com\/play\/[AppID]?source=iframe&id=10&city=redmond<\/h2>\n

The canvas app could read the parameter values and incorporate it in the logic to perhaps read related data.<\/p>\n

\"Canvas<\/p>\n

And when invoking the app by passing a parameter of region=Mumbai, it results in:<\/p>\n

\"Canvas<\/p>\n

This way you could build efficient Canvas Apps and just reuse them across various applications!<\/p>\n

To share the app with your users on Microsoft Teams read the next part here<\/a>.<\/p>\n

70% of global 2000 companies apply gamification to improve productivity and returns!<\/div><\/div><\/h2>\n

Gamifics365<\/a> <\/strong>\u2013 Spin the magic of games within Microsoft Dynamics 365 CRM to improve user adoption, enhance productivity, and achieve company goals!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Canvas Apps is the new Citizen developer to quickly design pixel perfect mobile apps with very little to no pro-dev knowledge. While Model Driven apps allow for drag and drop interface for form design, they still do have a strict layout and you cannot really place controls wherever you want. This is where Canvas Apps\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":23173,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1954,16,18,38,2053,1985,45],"tags":[1867,2028,2027,1339,2114],"class_list":["post-23153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-dynamics-365","category-dynamics-365-v9-2","category-microsoft-powerapps","category-power-apps-portals","category-power-automate","category-power-bi","tag-canvas-app","tag-model-driven-apps","tag-power-apps-portal","tag-power-bi","tag-top-2020"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=23153"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/23173"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=23153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=23153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=23153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}