How to Use the Power Apps Portals Portal Management App HTML Editing Control for Custom HTML Fields

The Challenge

One of the requirements we had for a recent Power Apps Portal project was to provide the ability for  business users to author help content shown for specific pages in a Power Apps portal. They had to have some kind of WYSIWYG (What You See Is What You Get) HTML editing tool and were planning to have a minimal number of images. We considered multiple design options to meet this requirement, such as a SharePoint list with rich text fields or editing HTML files in a SharePoint library and integrating to a Dataverse table for content and Web Files for images. For reasons I will not go into here, we settled on building the capability into a model driven app and leveraged the existing HTML editing control from the Portal Management App. Turns out this works, but it is not as simple to implement as it sounds. This blog describes the process for anyone else with custom HTML data that they want to add to a Power Apps Portal site.

Create the Column

To start, create a new column in the table that will hold this HTML content. It should be a Multiple lines of text – Plain Text field, not a Single Line of Text - Text Area field. Save the internal, Dataverse name of the field in all lower case for later (e.g., mfhdev_htmlcontent).

Create/Edit the Form

Go and edit the form where the HTML editor control will live. In this case, as the editors will be providing quite a bit of content, we wanted to dedicate a fair amount of real estate to the editing control, so we added a 1-column section to serve as the main editing portion of the form and gave it an appropriate label as well as name. I recommend giving the section a clear name rather than the generated one to assist in configuration of the control. Save the name of the section to pass to the editing control.

The configuration of the control will require the name of the tab it is on. When viewing the General tab for the default “Information Main” form, it is not given a name by default, so at this point, it is a good idea to click on the tab in the form and give the tab a proper name and save it for later:

Now add the actual HTML content column/field that you created above to the section. It turns out that in order to pull the column content into the editing control, it needs to be on the form but hidden:

Next, add the Portal editing web resource to the form. Click the Components icon, expand the Display category and select the HTML web resource option:

In the Web Resource selection dialog that comes up, search for, select and add the adx.ckeditor.html resource:

Note that the adx.ckeditor.html web resource is included in the Dynamics 365 Portals - Portal base solution that is installed when a portal is added to the environment. It is not available in all Power Apps environments.

Again, I would change the default name that is given to the control to one that makes sense as it needs to be used in the configuration below. After installing the web resource, your form should now look like the screenshot below. You can increase the number of rows that are displayed as a configurable option. The default is 6 rows.

After the control has been loaded to the form, change its Label to a friendly display name. Then click the vertical “…” associated with the Web resource control and select “Edit”:

The field name (in all lower case) and the section path (which includes the tab name) that contains the control both need to be passed as custom parameters to the control. They are passed in the form of field=[field name]&section=[tab name].[section name] as shown:

Next, the control content needs to be loaded from the field when the form loads. This requires a new form event and a js library file that will be called from the load event for the form. Below are a number of sections of the overall JS code that will need to be configured with the names set above:

• In the getHtmlEditor function, you will need the web resource name:

• In the setSectionVisible function, you will need the tab name:

• In the setHtmlSectionVisible function, you will need the section name:

• At the end of the library, fill in a function name for the event handler that you will specify in the event handler configuration:

The entire library code will have all of the following:

Save this file out as a js file. It can now be loaded into the form as a library. Go back to the form editor and click the Library icon in the left nav bar and click Add library to add the event handler code:

Click the New web resource button and then upload your file and add properties:

You will then need to search for your added resource to add it to the form:

Now, you are ready to add the event to load the html content to and from the control. Go to the Tree view section of the form and click the form node in the tree. Next, click the “Events” tab in the right pane and expand the “On Load” event to get to the action to add an event handler. Click + Event Handler.

Here your library should be automatically selected. You will need to enter the function name you used above:

At this point, if you save and publish, the form should be ready to go! You will have a WYSIWYG editor that provides both the design view for business users and the source HTML view to be tweaked by those who have stronger HTML skills:

If you have any additional questions surrounding this topic or would like to discuss further, please contact us today!