Embedded Canvas App – Replacing dialogs – Part 1

Embedded canvas apps are generally available since last month! This will be another way to create richer experiences for users using your model apps. Embedded canvas apps only work in the Unified Interface. In this blogpost I will show you how you can easily replace the deprecated dialogs with an embedded canvas app. In contrast to the PowerApps Component Framework, which I previously blogged about, this is a low code solution.

Dialogs were a great way to guide users through more complex decisions . Canvas apps are the Microsoft recommended way to replace dialogs. To showcase how you can replace your dialog I’ve created and implemented a fictive scenario.

• A customer called the support team about a defect on a product. A support case is created.
• We are the first-line support working the case and delegate certain actions to other teams. In this case, we can ask finance to do a credit check.
• We want to create a task for the finance team and enter details.

Even though this is a simplified scenario. It would still require a lot of steps to do this by hand. So automating these steps benefits the user greatly. On top of that, we can start expanding based on this scenario.

Creating the embedded canvas app

To start, decide where you want to place your app. You can change the size of your canvas app to your liking, so you have a lot of options here. In my example I’ve created a separate tab with a list of tasks and the canvas app on the side. In the section you want your canvas app to appear, you need to place a ‘single line of text’ field. This feels a bit illogical but you need this to bind your canvas app control to.

I always create a new field when embedding a canvas app as this keeps me organized. You could however choose any single line text field. If you want to use the OnDataRefresh property in your app, be sure to use a single line text field which is required. Do not forget to remove the label of the field. A canvas app with a label would just look silly 😉

1. Select the field properties. Go to the tab controls and choose add control. Pick canvas app in the selection list
2. Select canvas app to show on the web page of your model app. Press the customize button in the lower left to generate your canvas app. This would take you to the PowerApps Studio. The app created this way will generate the model app context. In my example this would be the case record.
3. After you have saved and published your app, the control will contain a guid. This is the App ID of your canvas app. You can find this ID under details of your app inside the solution. When you want to embed an existing canvas app you would need to fill in the App ID here.

The experience is really smooth. The app is generated inside your current working solution and it even creates a screen to get you started. The resulting form of the steps we’ve just performed:

Create your dialog

Inside the canvas app we can start making our basic flow. For example I’ve added a few screens with basic navigation:

• Home
  • Finance related tasks
    • Invoice query
    • Perform credit check
  • Product related tasks
    • Investigate issue
    • Feedback on product
    • Stock query

For now let’s focus on the screen “Perform credit check”. I’ve added a form screen and connected to a new CDS data source “Tasks” by pressing the “connect to data” link. Also change the default mode of the form to “new” as we want to create a new Task.

I want the user to enter a subject, due date, priority and description for the tasks. So I add them to the form. The Task should also be assigned to the Finance team and related to the current case. These are fields I don’t want the user to be able to change so I do not add them to the form.

Saving the Task

The default action of the save button is “SubmitForm(EditForm)”. However I need to manipulate more data before the submit, so I use a Patch instead. On the “OnSelect” of the save button I do the following:

Let’s go through the script line by line.

1. The set is used to catch the task entity after we’ve created it in the Patch. I want to use this record in subsequent statements.
2. The creation of the record happens in the Patch. It takes 3 arguments. The first is the type of entity you want to create or update. The second is the entity to update, or in our case a new one by declaring “Defaults(Tasks)”. The third is a list of attributes.
3. A Relate request is needed after creation of the record. We sadly cannot (yet?) set the regarding field of the Task in the patch statement. To work around this gap in functionality we can use the relate function.
4. Embedded canvas apps come with integration functionality. Use the refresh form to show the result of the record creations directly to the user. The refresh is actually really fast, see for yourself in the video below.
5. Navigate to the success screen!

Part 2

In this first part of creating a dialog I’ve showed you how you can create the embedded canvas app. After that I showed the “Credit Check” screen. It got most interesting when we saved the screen. For now this is the end of part 1.

In part 2 I focus on finishing this screen. I desperately want to change the owner of the Tasks, but wasn’t able to using the CDS connector. I’ve tried multiple options available. But not even the Relate functionality helped me out! I do have a solution for this problem though, and for that I use Microsoft Flow.

Endless opportunities!

Adding embedded canvas apps are a great piece of technology to enrich the user experience in Model Apps and Dynamics 365 Customer Engagement. This technology is easy to use and gives a lot of flexibility to tweak to all your needs, for instance. However not all scenarios are easily possible out of the box, sometimes workarounds are needed. Luckily we have the full power of the platform to support us 😉

I highly recommend to explore the possibilities provided by embedded canvas apps. And I certainly will use them in most of my solutions.