Embedded Canvas App – Exploring the OnDataRefresh property

It’s been a while since my last blog. Life took over, but I now finally got round to it. I want to share my experience with the OnDataRefresh property of the Embedded Canvas App. I will continue with my previous example of replacing a dialog with embedded canvas app.

Previous posts:

  • Click here for part 1. In this post I describe the task scenario and show how to set up the Embedded Canvas App and save the task.
  • Click here for part 2. This describes how to use Microsoft Flow to set the owner of the task as the CDS connector did not allow us to do so.

First things first, let me start by apologizing. I gave you wrong advice in part 1. If you want to use the OnDataRefresh property you need to use a “single line of text” field which is required, rather than creating a new field which I proposed first

The documentation is clear on the matter, albeit slightly out of the way. The first time using the OnDataRefresh I overlooked this. And I am not ashamed to admit it costs me a couple hours to find out.

When adding an embedded canvas app to a model-driven form always use a required field that is guaranteed to have a value. If your field does not have a value your embedded canvas app will not refresh in response to any change in data on the host model-driven form.

Default values

To show the OnDataRefresh property in action I setup default values on the “Perform Creditcheck” screen. Primarily I set the default for the subject field to:

Default value for Subject
Default value for Subject

Secondly, the default value for due date is:

Default value for Due Date
Default value for Due Date

Then I set the default for the priority I to:

Default value for Priority
Default value for Priority

Finally in the description, the default value is:

Default value for Description
Default value for Description

As you can see I insert the title from the case by using the ModelDrivenFormIntegration as this is a perfect example to show you how the OnDataRefresh property is behaving. I want the default values to update whenever I update the title of the case.

Case Screen with the Default values entered
Case Screen with the Default values entered

Refreshing out of the box

I was very surprised to see the OnDataRefresh property worked out of the box. I had setup the default values and started exploring the code needed to update the default values whenever the title changes. But to my surprise the default value already changes without doing anything! See the clip below to see this in action.

A small piece of functionality makes this happen inside the Canvas app. On the ModelDrivenFormIntegration object you can find the property OnDataRefresh. By default this already is set to refresh the data source of the host of your app.

ModelDrivenFormIntegration property OnDataRefresh refreshes the Case entity
ModelDrivenFormIntegration property OnDataRefresh refreshes the Case entity

If you pay close attention to the clip you also see a unwanted side-effect. I changed the description on purpose to show that the OnDataRefresh property, in combination with the default value, resets the value of the description field. Of course I do not want this because imagine you write a long description and then decide to change the title, you would lose all your text!

The fix

Luckily I have the solution! We can stop the OnDataRefresh from updating the description field in 5 simple steps:

  • Set a boolean variable “DescriptionChanged” to false OnStart of the app.
Step 1 - OnStart set DescriptionChanged to false
Step 1 – OnStart set DescriptionChanged to false
  • Set a variable “DescriptionValue” for the default value on the ModelDrivenFormIntegration only when “DescriptionChanged” is false.
Step 2 - OnDataRefresh set DescriptionValue only if DescriptionChanged is false
Step 2 – OnDataRefresh set DescriptionValue only if DescriptionChanged is false
  • Use the same script on the OnVisible of the relevant screen. As the case title we need in our DescriptionValue is not available the first time the DataRefresh property is called.
  • Set the variable “DescriptionChanged” to true whenever the description value changes.
Step 4 - OnChange set DescriptionChanged to true
Step 4 – OnChange set DescriptionChanged to true
  • Set the default value of the description field to the variable “DescriptionValue”.

Check out the video below to see the end result.

Wrapping up

I love Embedded Canvas Apps. Certainly the ease with which you can make an impact on the model-app form is incredible. Also the integration is seamless, everything you would want is made available by the PowerApps team. This OnDataRefresh property of Embedded Canvas App emphasizes this.

I highly recommend using Embedded Canvas Apps in any implementation. The users will be thankful for it. I am very curious to hear your thoughts on the matter, do you like it as much as I do? Feel free to connect and ask questions, I’d love to help!