Embedded Canvas App - A different approach to n:n (related) association

he following article was written by Éric Sauvé, CRM architect at XRM Vision. It was orginally published as a LinkedIn article.

Want to ease the process of associating items in a many-to-many relationship in your model-driven app?

Here’s a way to take leverage of the embedded canvas app feature (currently in Public Preview) to make this process easier for your users:

Background

Many-to-many relationships allow you to define that 2 entities (tables) are joined together in a fashion where you can see multiple instances of an item in the first entity applicable to the second and vice versa.

In the Excel table above, you see an example that helps visualise such a n:n (Many-to-many) relationship. The product Belt is associated to more than one opportunity and both opportunities are about multiple products.

Here’s how it appears in your Data / Entities / Relationships section:

The Model-Driven app forms derived from this state will result in the following experience for your users.

Go in Related section of the Opportunity, select Products:

Then Add Existing Product / view the currently associated products in the view. On the Quick Create form (for products) add the products you want to associate to this opportunity.

Then if you want to remove an existing association, select the product and click “remove” in the contextual menu:

OK… but how can we make this easier?

Looking at the embedded canvas app functionnality now available in public preview, we can leverage on the capabilities to bring up a simple “check box” selection of products directly in the Opportunity form. Simply tick / untick the check box and the association between a product and an opportunity is updated.

Great idea! Now, how do we do it?

First step, edit the main form (in this case Opportunity), add a mandatory field (this way the canvas app will be displayed at all times)…. and yes, make sure you switch to classic to enable the Canvas App embedding (quite odd ain’t it… new feature, Canvas App & model-driven.. but wait, you must switch to classic mode!! Let’s hope that this part gets better by GA).

In classic mode, edit the field property, in the Control Tab, Add Control, Canvas App, from there you’ll go to “Customize” button which will bring you to the Canvas App editor.

The completed Canvas App will end up like this:

3 Galleries

• ModelDrivenData: not visible, renamed gallery that is created by default when creating the canvas app embedded control in form designer
• OpportunitySource: not visible, used as a filter for the default (check/uncheck) of the check box on each item
• ListOfProducts: linked to “Products” as the data source

Associate / De-associate – how?

In the OnCheck / OnUnCheck events of the check boxes within the gallery, simply use the Relate / Unrelate functions:

In conclusion

Keep in mind that this feature is still in preview, not to be used for production (live) systems.

Currently, only one canvas app per form and only visible via web browser (not via mobile / table apps).

In this example, items are associated directly no validation before you link / unlink.

In the hope this helps you consider some of the potentials the Canvas App embed into Model-Driven App may bring.

‍