Power Pages: Use a custom Rich Text Files table to store images (and avoid exposing the full msdyn_richtextfiles table)

In my previous post, I explained how to display images from a Dataverse Rich Text field in Power Pages using Liquid.

However, this method enables read access to all records in the Rich Text Attachments (msdyn_richtextfiles) table, which might not be ideal in case the Dataverse environment has other functionalities that have private information stored in that table and should not be available in a Power Pages site.

However, we can create a custom table to store the images, targeting to store only those used by Power Pages sites, for example. And we enable read access to only this table instead of the Rich Text Attachments table in our portal.

Table structure needed

The following fields beyond the standard name/id fields are required for this functionality:

• Image File: Image field, to store the image contents
• Parent Entity ID: Text-only field (it stores the ID of the record where this image is used but it is not actually a LookUp field)

Custom configuration for a rich text editor in Model-Driven Apps

Considering the Rich text field content will be created in a Model Driven app and only displayed in a Power Pages site, to use the custom table, we need to add a custom configuration on the Rich Text editor field in that Model Driven app.

We need to save the custom configuration as a Web Resource File with the .js extension first.

To do this you can save it as a .js file locally and inside a solution, create a new Web Resource:

Sample code for the configuration:

{  
"imageEntity": {
    "imageEntityName": "pnp_portalimages",
      "imageFileAttributeName": "pnp_imagecontent",
      "parentEntityIdField":"pnp_parententityid"
    }
}

After adding the Web Resource. and publishing it, you can edit the settings of the Rich Text Editor in a Model Driven App form, to use the custom configuration (add the Rich Text Editor Control, and add the path to the Web Resource File there):

Note that after applying the new configuration, when editing records and adding images to the Rich Text Editor field in a Model Driven app the images are going to be stored in the custom table, but any previously uploaded image will remain in the standard table.

Enable Table Permissions & Web API access

As in the previous post, you will need to enable read access for the custom Images table as below:

Also, add the site settings to enable the new table for Web API access:

Rendering the images using Liquid

The code to render the image will remain the same as in the previous example, as the content replacement needed only relates to the Web API path differing from Standard Dataverse API to Power Pages.

{% 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%}

When you add/edit records in the content table used via the Model-Driven app where that custom form with the settings to use the custom table, the images will continue to render properly in Power Pages:

What if we want to add content to this table via Power Pages?

We know how to display images from content that was added via the Model Driven app by using a custom configuration in the Rich Text Editor control. The same can be reused on Power Pages forms.

Make sure your Basic or Multistep form uses the same form you used on the Model Driven App. To follow the remaining example, create one Basic form in Insert mode and another one in Edit mode with the same settings.

Then under the Metadata tab, add a new metadata item with the following configuration:

• Type: Attribute
• Control Style: Code component
• Attribute Logical Name: <your field>

Remember to also create table permissions with create/edit access for both the images table and your content table (add the web roles which you would want to allow editing the content and add images only – in the case below only the Administrators web role) :

Then create a page with a list that has those configured forms:

New:

Edit:

Then, when accessing a page that has this list inserted, users with the appropriate Web Role will be able to edit Rich Text contents and the images will be uploaded to the newly configured table as in the Model Driven app:

Conclusion

By creating a custom table and using custom Rich Text Editor settings, we can ensure that we expose images from a specific table in Power Pages (the ones stored in this custom table), and not all Rich Text images used in that Dataverse environment – the Rich Text Attachments table.

References

Add Web API Site setting – Microsoft Learn

Add permissions for the Rich Text Attachments Table – Microsoft Learn

Rich Text Editor Control in Power Pages – Franco Musso