Correctly display SharePoint Rich Text Fields in PowerApps

The problem

I recently happend upon a PowerApp that had been created on top of a SharePoint list using the Create-From-Data functionality. Something seemed off – let me show you.

This is what I got in SharePoint:

Screenshot of the SharePoint List. There is one item on the list titled "Test-Item", the column "RichText" contains the text "It's-a-me, rich text!"
Test-Item in SharePoint – rich text is displayed properly

Screenshot of the SharePoint field settings showing the field to be of the type multiline text with rich text enabled.
Field settings – multiline rich text

This is what PowerApps did:

PowerApps Screenshot showing the default detail view. The rich text field is displayed as a multline label with HTML code.
Detail Screen in PowerApps – rich text is displayed improperly

PowerApps Screenshot showing the default edit view. The rich text field is displayed as a singleline textfield with HTML code.
Edit Screen in PowerApps – rich text is displayed improperly

Nope. That’s… just… no.
Let’s fix it!

The solution

Details Screen

First, we unlock the card:

  1. Select the data card.
  2. Navigate to the “Advanced” section of the properties.
  3. Click on the banner saying “Unlock to change properties”
Screenshot of PowerApps showing the advanced options of the rich text datacard. The card is currently locked.
Advanced Properties of the card.

Next we select the data card value label and delete it.
With the card selected, we add a HTML text control.

Screenshot of PowerApps showing the selection of a HTML text control from the toolbar.
Add a HTML text control to the card.

Adjust the size and position of the new control inside the card, so it looks proper and then edit it’s properties.

For the “HtmlText” property, we want to set “Parent.Default”:

Screenshot of PowerApps showing the default HtmlText property of the HTML Text control.
Default text for a HTML text control

Screenshot of PowerApps showing the updated HtmlText property of the HTML Text control as "Parent.Default".
Set “Parent.Default” as the HtmlText

Now look at that!

Screenshot of PowerApps properly displaying the rich text field in read mode.
Much better.

Edit Screen

First, we unlock the card in the same way as we did before and – you guessed it – we delete the textbox control.

Whaaaaaat? Some error showed up? Don’t worry about that for now! They’re just reference issues and we’re going to fix them in a second. Stay with me!

Next, we insert a rich text editor control into the card and make sure its sized and positioned properly. Make sure you have the card selected when inserting the control! (Otherwise it will land outside of the card and you’ll have a hard time referring to the parent element.)

Screenshot of PowerApps showing the selection of a rich text control from the toolbar.
Insert a rich text editor control.

This time, we’ll want to set the “Default” property to “Parent.Default”. (Different property, same value as before.)

Screenshot of PowerApps showing the default Default property of the rich text editor control.
Default text for a rich text control

Screenshot of PowerApps showing the updated Default property of the rich text editor control as "Parent.Default".
Set “Parent.Default” as the Default

That’s more like it!

Screenshot of PowerApps properly displaying the rich text field in edit mode.
Much, much better.

But wait! There’s still two errors to take care of!

PowerApps screenshot showing two errors on the canvas.
Errors on the rich text card

Error 1

PowerApps screenshot showing the Update property of the data card. The Value "DataCardValue4.Text" is marked as an error.
This can’t be right!

“DataCardValue4.Text”? Are you telling me, that this property is still trying to refer to the initial textbox control we deleted? Yup. And that’s just wonderfully easy to resolve: Replace it with the right value.

So I’m going to select my new control and I want to use the “HtmlText” property:

PowerApps screenshot showing the Update property of the data card. The Value is set to "RichTextEditor2.HtmlText".
Ah, yes! No more red line!

Error 2

PowerApps screenshot showing the Y property of the data card. The Value "DataCardValue4.Y + DataCardValue4.Height" is marked as an error.
Y me?

Do you find yourself asking “Y me?” a lot? Well in this case, we’re working on the vertical position of the default error message control of the datacard. This – again – is simply referring to an old control. Let’s switch the control for the right one (in both values):

PowerApps screenshot showing the Y property of the data card's error message control. The Value is set to "RichTextEditor2.Y + RichTextEditor2.Height".
Another red line gone.

The result

PowerApps Screenshot showing the default detail view. The rich text field is displayed correctly.
Detail Screen in PowerApps – rich text is displayed properly

PowerApps Screenshot showing the default edit view. The rich text field is displayed correctly as a rich text editor.
Edit Screen in PowerApps – rich text is displayed properly

I hope this helps! Please let me know in the comments, if you have questions or if you’re struggling with any of my instructions.
Or better yet – ping me on twitter at @considerITman!

Leave a Reply

Your email address will not be published. Required fields are marked *