Embedded Canvas Apps

Overcoming Top 5 Challenges with Embedded Canvas Apps

When using embedded canvas apps, there are certain challenges that can cause significant delays in app development. This defeats one of the primary purposes of PowerApps, which is to allow quick creation and rapid deployment of business applications. These challenges — and tips and tricks for how to handle them — are highlighted below:

1. Challenge #1: The ModelDrivenFormIntegration control does not fetch values for fields of related entities. For example, the following will not work to get the list of contacts for an account (when the control is connected to the accounts entity):

ModelDrivenFormIntegration.Item.Contacts

Trick #1: The ModelDrivenFormIntegration control should only be used to obtain the GUID of the contextual record. The CDS connector, along with Lookup, should be used to obtain the complete record. The following will work to get the list of contacts for an account:

LookUp(Accounts, accountid = [@ModelDrivenFormIntegration].Item.Account).Contacts

2. Challenge #2: When adding a list of records related to a given entity in a collection, the related records are not fetched. For example, the following will not work to get the list of contacts for an account in a collection:

ClearCollect(
contactslist,
LookUp(Accounts, accountid = [@ModelDrivenFormIntegration].Item.Account).Contacts
)

Trick #2: If the related records are being used elsewhere in the app, then they will be fetched when adding them to a collection. For example, the above formula to collect contacts will work if there is a gallery of contacts somewhere in the app (which can be hidden if needed), as shown below:

Items = First(Accounts).Contacts

3. Challenge #3: Collecting items or adding items to a collection does not get triggered in either of these two scenarios:

a. In the OnStart property of the app
b. In the OnVisible property of the 1st screen of the app

Trick #3: If the collection data needs to be used — say as items for a gallery — on the first screen of the app, since OnStart property of the app and OnVisible property of the screen won’t work, the collection process should start on a trigger such as:

a. OnSelect of a button, or
b. OnTimerEnd of a timer

4. Challenge #4: None of the above challenges are “visible” when trying to play/preview the app within the app designer. These challenges become “visible” only after the app is saved and published, and the host model-driven form is loaded.

Trick #4: It is a good idea to add labels that count the rows in the various collections that may exist in an app so when the app is published and the host model-driven form is loaded, the counts can help you figure out which collections are getting loaded with data and which ones are not. Also, always test embedded canvas app from within the model-driven form and not in the app designer. One additional note to assist in testing within the app designer (although testing using the host model-driven form is strongly encouraged, it is sometimes useful to test logic within the app designer), the contextual record is the first record of the entity. For example, when the ModelDrivenFormIntegration control is connected to the accounts entity, the embedded canvas app when accessed within the app designer will reference the first account (i.e. First(Accounts)). Given this, ensuring the first record has the necessary related entity records will be helpful in testing. For example, if the embedded canvas app needs to display contacts associated with an account, ensuring the first account record has contacts associated with it will assist significantly in testing within the app designer.

5. Challenge #5: Embedded canvas apps stand out or do not feel as if they belong to the host model-driven form. While this is sometimes good, it isn’t an ideal embedment in every case.

Trick #5: There are certain attributes that can be used to control the look and feel of an embedded canvas app. One of the most important ones is the ability to resize embedded canvas apps. The orientation and screen size can be controlled using either the predefined values for screen sizes or by setting the size to “custom” and then defining the width and height. When the size is set to “custom,” the orientation is not available as an option since the orientation is decided by the custom width and height. This is especially helpful when a canvas app is being embedded in a model-driven form that has, as an example, other sub-grids next to the canvas app. Another tip is to use the same font size, color, and weight as the model-driven form. To find out the font details of the model-driven form, copy any label from the model-driven form and paste it in a Word document.

Have fun! Get addicted!

Leave a Reply