Rich Text Fields in Dynamics 365 and Model Driven Power Apps

      Comments Off on Rich Text Fields in Dynamics 365 and Model Driven Power Apps

If you want to be able to use rich text (including adding inline tables and images) in your text area fields in Dynamics 365 or your Model Driven Power App, you can now do that using the out of the box Rich Text Editor component. In this post, I’ll take you through step-by-step instructions on how to set this up.

What does the Rich Text Editor allow you to do?

Here’s the end result – on the right of the screenshot below, I have added a text area field in Dynamics 365, with the Rich Text Editor component applied. You can see that you can add a variety of formats, including bold / italic / underline, change the colour of the font, add highlighting, inline images, inline tables and more.

My example here shows this component in Dynamics 365 Sales, but you can do exactly the same thing in a Model Driven Power App (it’s all the same underneath, after all!)

Rich Text Field in Dynamics 365

How do I add this awesome component?

It’s not hard to do, but you do need to go into the Classic solution designer to find it, so it’s a little hidden away.

Navigate to https://make.powerapps.com

Select the entity you are working with from your Data menu, and click +Add field

Create a new field with data type: Text Area. Then open the Advanced options section.

Add Field - Text Area

Scroll down to find the Max length option. This sets your field character length (the default is 100, which isn’t enough to work with!). Set this to 4,000 (this is the maximum). Then click Done to create the field.

Set field length to 4000 characters

Save your entity.

Save entity after adding a new field

Now open the Form where you want to add that field.

Select your Form

Inside the Form Editor, find the field you just created and add it to your Form. You might want to put it in a new section, or a new tab.

In the Formatting options, increase the Field Height (by default it’s only one line, and you’ll certainly want more than that!) You can come back and play around with the size and positioning later if you need to, depending on how much space you want for the field. If you want to use inline images, I suggest giving your field plenty of space on the form.

Click Save and then Publish, to save and publish your changes. Once that is done, click on the Switch to Classic option. You may get a pop up asking for feedback – you can just click Skip.

This will open the Classic solution designer in a new browser tab. This is the legacy app maker experience that we still need to switch back to occasionally for more advanced features. One day this will be gone! If you’re not familiar with this interface, it will be a little disorienting. You will find the field you just created on the form in the same place – it’s just more like looking at a skeleton view!

Double click on that field to open it for editing. (Click on the white field part, rather than the field name). This will pop up a Field Properties box. Select the Controls tab.

Select the Rich Text Editor and click Add.

Add the Rich Text Editor Control

Select all the radio buttons in the Rich Text Editor Control to make this the default display / control for this field across all device types. Then click OK

You will have more space for your Rich Text editor by putting the field name above the field, rather than to the left of it. To do this, click in the section where your field is.

Open the section to edit the field label position

Select the Formatting tab and scroll down to find the Field Label Position options. Set the field label position to Top, then click OK.

Set the field label position to above.

You’re all done! Now click the Save button, give it a few seconds to save, and then click the Publish button.

You’ll see this pop up message to confirm your changes are being published.

Pop up message to show customisations are being published

You can now close this tab. You’re all done. If you want to make any other changes to the size, height or positioning of the field, you can do that back in the Power Apps maker experience, where you started.

Now go back to your app, refresh your browser to pick up published changes, and you will see your rich text field ready to use!

Rich Text Field in Dynamics 365