Using the Rich Text Editor Control in Power Pages

The relatively new Rich Text Editor control in Dataverse / Dynamics 365 / Model Driven Apps is a very welcome addition, especially for Power Pages / portal projects that are heavy on content management. Even just the basics like headings, bulleted lists, numbered lists and tables can be a real pain otherwise. In case you haven’t heard, these Rich Text Editor controls are now supported on both Basic Forms and Multistep forms 😎

Wait, what?.. there’s a rich text editor control?!
Yes and it can be applied to any text column… and is well supported in portal forms 🙌

Here’s a handy guide from Microsoft about how to add the control in your Model Driven App forms

Once you’ve added the control on your model-driven form, open the Basic Form or Multistep form step that your text field lives on
Select the Metadata tab and click New

Portal Management app

Set the Type to Attribute
Select the required column from the Attribute Logical Name drop-down
Set the Control Style drop-down to Code Component

Portal Management app

So how does the rich text content look on portal forms?

Good news – they look professional and native, phew!

What about in portal lists?

Actually it’s not plain sailing. There are some gotchas… We can include the fields in our lists BUT it’s the raw content that gets displayed, HTML tags and all

We can output HTML easily enough using your favourite liquid skills; fetch xml, the entities object, etc.. but again there’s a gotcha to work around: the field’s output is wrapped in a div that contains inline styles, setting the font size and font family which are most likely to clash with the rest of the page.

DevTools

Okay, what’s the catch? What’s not love?

Like with many rich text editors, users are free to format their content using familiar visual tools like font styles, headings, bold, italic, alignment, inserting hyperlinks, etc. And the tool generates HTML behind the scenes.
For us control freaks, it’s good to know that the editing and formatting options available in the visual editor can be restricted so that we don’t let users go crazy with colours and font choices that overrule our carefully crafted on-brand CSS.

Note – fear not, I’ll show you how to avoid this nightmare below but I couldn’t resist🤡

Power Pages

Here’s a handy CSS snippet to cancel that out:

div[data-wrapper="true"] {
font-family: unset !important;
font-size: unset !important;
}

Tip: What does that CSS mean / do?

If  you haven’t used unset before, unset (in layman’s terms) allows us to cancel out a style property without setting it to something else. For example, I don’t have to specify which font and font size to apply to the rich text editor instead. Essentially I’m saying give it
!important is a way to combat specificity. CSS is all about specificity; from global styles to styles targeted to very specific combinations of ids, classes, etc., right down to inline styles applied using the HTML style attribute. The reason we need to use !important here is that inline styles trump the specificity of global styles in our style sheet, regardless of which selectors we choose. We should use this sparingly but this is a good use case in my opinion.

Here’s some configuration JSON. this will:

• Add the ability to expand the field to full screen while editing
• Allow you to view /edit the HTML
• Restrict formatting options to:
  • Bold, Italic, Underline
  • Bulleted lists & numbered lists
  • Add / remove hyperlinks
  • Strikethrough
  • Remove formatting
  • Tables

Basically, removing temptation to control font size, font colours, dodgy fonts, etc…

{
"defaultSupportedProps": {
"toolbar": [ { "items": [ 
    "CopyFormatting",
    "Bold",
    "Italic",
    "Underline",
    "BulletedList",
    "NumberedList",
    "Link",
    "Unlink",
    "Strike",
    "Undo",
    "Redo",
    "RemoveFormat",
    "Table"
    ] } ]
},
"showAsTabControl": true,
"showHtml": true,
"showFullScreenExpander": true
}

For where to add this config, see this guide on Microsoft Learn

Adding my JSON as a JavaScript web resource:

Power Pages

Here’s the control in place in the modern form designer:

Power Apps maker portal

Here’s the ‘after’, with the styles tamed and fitting in with my portal CSS:

Power Pages

For more information on the configurable options, click here:
https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/rich-text-editor-control

All the HTML tags responsible for the formatting count against the maximum character length allowed for the fields. This only dawned on my when a client complained they’d only typed 10 words and had exceeded the 500 character limit on the field. You may find you need to increase the maximum character count quite substantially for HTML vs plain text.

My (very short) wishlist

One limitation I was surprised about is the lack of predefined ‘Styles’ like we’d find in WordPress, Microsoft Word, etc. While I don’t want to give users / content editors free reign over my portal CSS, being able to select from Heading 1, Heading 2, Paragraph, etc. would’ve nice.