Within a SharePoint list, you can create a multiple lines of text field and set its type to Enhanced rich text to allow showing pictures inside of the field. This works perfect when you’re just using the SharePoint list with no customization. But when you decide to make a PowerApp for that specific list, something may go wrong.

The problem(s)

The first problem you run in to when creating a PowerApp for this kind of list is that your Enhanced rich text isn’t shown correctly by default, because it will put all data into a label control. Since the data in SharePoint is stored in your multiple lines of text field as HTML encoded text, your label doesn’t know how to deal with this:

Luckily, PowerApps has a HTML text control that allows your PowerApp to render the HTML correctly. So I added the HTML text control, set its HtmlText property to show the value from the Answer field and set the Visible property of the Label control to false. Now we should have a nice and clean lay-out, or so you think:

As you can see, the HTML encoding is gone, but the image doesn’t show. How is this possible?

Troubleshooting

To find out, I decided to take a closer look into how the HtmlText property of my HTML Text control is rendered. So I created a new item that only contains an image (so that my HTML is as ‘clean’ as possible). I also re-enabled the label in PowerApp so that I could see the HTML encoded text

The HTML I was looking for is as follows:

<img src="/sites/RikTest0012/SiteAssets/Lists/FAQ/NewForm/About365Favicon.png" alt="About365Favicon.png" style="margin&#58;5px;width&#58;400px;height&#58;400px;" />58;400px;" /&amp;gt;

This immediately showed me what was went wrong in the HTML Text control:

Incorrect HTML rendering:

The HtmlText property expects its value to be as follows:

“Show your <b><font color=blue>HTML</font></b> text here.” (with the quotes)

So the HtmlText that is generated from your SharePoint field is as follows:

"<img src="/sites/RikTest0012/SiteAssets/Lists/FAQ/NewForm/About365Favicon.png" alt="About365Favicon.png" style="margin&#58;5px;width&#58;400px;height&#58;400px;" />"

Because of the quotes, the HTML text control sees some parts of the <img> tag (such as the first part) as a string and doesn’t render it as an image.

The solution for this is to replace each double quote (“) by a single quote (‘) by using the Substitute() function:

Substitute(
    Parent.Default,
    """",
    "'"
)

What we do here is we replace the double quote value of Parent.Default (which is the value stored in the Answer field) for a single quote value. For those of you wondering why I am replacing two double quotes: I’m not, but for the same reason the HTML rendering doesn’t work, I can’t just set one double quote. I have to escape it by using another double quote in front of it. Trust me, this will replace the double quotes for a single quote.

Relative vs. Absolute URL

Unfortunately, the image still doesn’t show as you can see in the screenshot above. That’s because SharePoint uses a relative URL inside the <img> tag, but PowerApps doesn’t know the context of the SharePoint site the image is in. Because of that, you have to do another Substitute() action over the previous Substitute() action where you replace the relative URL for a absolute URL:

Substitute(
    Substitute(
        Parent.Default,
        """",
        "'"
    ),
    "/sites/RikTest0012",
    "https://<tenant>.sharepoint.com/sites/RikTest0012"
)

What we do here is we replace the relative URL of our previous Substitute() action with the absolute URL. After this, your HtmlText should render correctly:

After disabling the Label again, my PowerApp now works as it should: