If you have been working with Dynamics 365 CE, you may have come across requirements that needed a rich text controller for a field. Here’s a quick and easy way of embedding a Canvas App with a Rich Text controller to a Dynamics 365 field.

(The new PowerApps Component Framework and CLI will further extend the capability to build a controller that we could directly bind to the field within the model driven app. I’m currently working on this and please follow this space for updates.)

For this demo I will be using the description field of the out of the box Account entity. Here are the steps:

1.   Add the canvas app controller to the field to embed a canvas app. To do this:

Select the “Description” field on the form editor and click “Change Properties” to open the “Field Properties” window

Select the “Controls” tab and click “Add Control”

Select “Canvas App” and add the Canvas App controller to the field. Also make sure you enable the canvas app controller for the web accessibility

2.   Once this is done, it’s time to create the Canvas App. We can simply click on the “Customize” button to launch the PowerApps designer. For more information on embedding Canvas Apps please visit Microsoft documentation here.

3.   At this stage we can hide the gallery object that has been added to the Canvas App by default as we would not be interacting with it in the UI. To do this you can set the “visible” property of the gallery to “false”.

Also note that the context of the account is passed to the Canvas App as a custom data set “ModelDrivenDataIntegration” which is set as the data set for the gallery.

4.   Now it’s time to add the Rich text editor to the form. Rich text editor is available under the text controllers within the “Insert” tab.

5.   Then set the default value of the editor to the description field. This will map the existing value of the description field to the editor on load of the form.

6.   After the value has been mapped, let’s move on to the save event. I have added a Save button to trigger this event for demo purposes. There will be 3 functions fired as a result of this.

• Invoke a Microsoft Flow Action to update the account record with the new Description value.
• Save the Model Driven App form in Dynamics 365 (ModelDrivenFormIntegration.SaveForm)
• Refresh the Model Driven App form in Dynamics 365 (ModelDrivenFormIntegration.RefreshForm)

(The flow I have used for this task is a simple 3 step process. Canvas app will pass the account ID and the description value to the Flow and the Flow will update the Record using these parameters.)

7.   Now it’s time to save and publish the app. Once this is completed you can navigate back to your Dynamics 365 form designer and you will see the app ID is generated and has been assigned to the controller. Save and Publish the Dynamics 365 form and test your form and the functionality.

The value of the rich text is stored as html in the field. I have also tried mapping the content of this field to e-mail templates and it works well too.