Power Pages: Display images from a Rich Text field using Liquid

Dataverse Rich Text fields store the content as HTML text in the field itself but the images that are uploaded are stored as attachments in the Rich Text Attachments table (msdyn_richtextfile).

Those files are referenced directly with the URL to get the preview as image from the WebAPI, when we open them from a Model Driven app they work fine since we have access to the Dataverse Web API.

But when we try to render those images that are referenced on Rich Text Fields in Power Pages by using custom Web Templates or Pages developed with Liquid, the images won’t render correctly because the API endpoint differs and also we need to enable table permissions.

See sample below:

Enable the Rich Text Files table and Setting permissions

To enable the default Rich text files table we can follow the official Microsoft Documentation:

Add permissions for the Rich Text Attachments Table

And also enable the Table for Web API access:

Add Web API Site setting

After this setup is done, we can render Rich Text content using liquid.

Replacing the Dataverse API path by the Power Pages API path

Let’s say a case where we have a FetchXML query reading data from a table where we have a Rich Text field pnp_description. When rendering this field we can simply do a text replacement as below:

{{ result.pnp_content | replace: "/api/data/v9.0", "/_api"}}

Full sample code for a simple page/WebTemplate rendering all table items (basic scenario iterating through items and rendering them on a page):

{% fetchxml fetch%}
        <fetch returntotalrecordcount="true" count="5000">
          <entity name="pnp_helpcontent">
            <attribute name="pnp_content" />
            <attribute name="pnp_helpcontentid" />
            <attribute name="pnp_name" />
          </entity>
        </fetch>
{%endfetchxml%}

{% for result in fetch.results.entities %}
 <p>
    {{ result.pnp_content | replace: "/api/data/v9.0", "/_api"}}
 </p>
{%endfor%}

Results

After applying the replacement code, the image contents are properly rendered:

Notes

This method exposes any file uploaded as Rich Text File in Power Pages as we grant access to the all table records in the Rich Text Attachments table, and this table do not have relationships that we can leverage to implement table permissions.

In a following post, I will explain an alternative approach using a custom Dataverse table to store images.

If you want to edit rich text content in Power Pages, you can use the following tutorial by Franco Musso: Rich Text Editor Control in Power Pages

References

Add Web API Site setting – Microsoft Learn

Add permissions for the Rich Text Attachments Table – Microsoft Learn