A canvas app can be embedded on a model-driven app form to pass context from the model-driven app form to the canvas app. This enables a maker to design a canvas app that is “aware” of the record a user has accessed and make use of the information contained in that record.
Using traditional embedding methods, you could embed a canvas app on a single entity. However, there may be times when similar information is contained in two separate entities and a customer requires the ability to access the same canvas app from each entity. While you could embed two different versions of a canvas app to accommodate such a use case, this approach is not ideal as it increases maintenance overhead and creates opportunities for misalignment of the two canvas app versions.
Another approach is to use JavaScript – combined with an iFrame – to pass form context from the model-driven app to the canvas app. This is a better solution than creating multiple versions of the same app, but it does require a skillset beyond that of a citizen developer.
In today’s blogpost, we outline steps the steps to embed identical canvas apps on multiple forms – using an iFrame – but without the use of JavaScript.
Step 1: Navigate to the form of the entity on which you wish to embed your canvas app.
Step 2: Edit the chosen form.
Step 3: Click + Component, as shown:
Step 4: Select External website in the left-side pane and enter the site URL of the canvas app you wish to embed. The web link can be found in the details section of your canvas app.
Step 5: On the right-hand side of the screen, you should now see New iFrame control. Under Advanced at the bottom of the iFrame control box, click the Pass record object-type code and unique identifier as parameters box. Finally, save and publish the form.
Repeat steps 1-5 for each additional entity form to which you wish to add your canvas app.
The table below contains current parameters available to pass (click here for the latest list, as this table may change over time). Next, you will need to set up your canvas app to receive the parameters you wish to use.
Step 6: To edit the canvas app you listed in Step 4, select the App control on the lefthand Tree view navigation section and select the OnStart property. Next we will add PowerFx functions to the OnStart property.
Step 7: In this example, we will make use of the id parameter (GUID of record a user is viewing on the model-driven app form) and the typename parameter (entity name a user is viewing the form for in the model-driven app). To do this we will make use of several functions:
- Set function – Set (global variable name, value )
- GUID – GUID (sting to convert to GUID)
- Param – Param (“name of parameter we wish to make use of”)
Step 8: Finally we will use the global variables we set in Step 7 containing the name of the entity and the GUID of the record for the model-driven app to drive lookups, enabling us to use the same canvas app on multiple entities. Note: please ensure you have added to your canvas app the entities on which you wish to conduct lookups.
