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!)
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.
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.
Save your entity.
Now open the Form where you want to add that field.
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.
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.
Select the Formatting tab and scroll down to find the Field Label Position options. Set the field label position to Top, then click OK.
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.
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!