Skip to main content

How to Render Raw HTML Column in View in Power Pages

 Recently I had a requirement for a client to convert their existing site over to Power Pages.  One of the items I needed to convert was a "Recent Announcements" page.  This is a pretty straightforward page with only a title of "Recent Announcements" and a grid showing the announcements.  The grid only has two columns, 'Created On' and 'Message'.  The problem I had to solve was I used the Rich Text Editor control on the 'Message' field.  This means that raw HTML was stored in the field.  Out of the box Power Pages can't render the raw HTML in the column.  This means in the Power Page would have raw HTML showing instead of a nicely formatted message.  This is easily solved with a small JavaScript function.

The first thing I did was create a custom entity in DataVerse called Announcement.  Here is the layout of the fields:

  1. Changed the primary name field from 'Name' to 'Subject'.
  2. Added a multi-line text field called 'Message'.
  3. Add a two-option set field called 'Show in Portal'.
    1. This is used to control whether to show the announcement in the portal or not.  This way they can have draft announcements.  I know there are other ways of doing it with Status and Status Reason.  This was just the approach I took.
Since we are only showing a view in Power Pages, there was no need for me to setup a form for Power Pages.  Instead, the form I setup is for the Model Driven App in DataVerse only.  Once I setup the form, I set the multi-line text field control to Rich Text Editor.  Now users can format the text any way they see fit for the announcement.  This is something they didn't have in the existing site.

Next, I created a view called 'Live Announcements' This view has 2 filters:
  1. Status of Active.
  2. Show on Portal set to Yes.
This view will be used to show the messages in the portal and will give users in the Model Driven App a quick reference of what is showing in Power Pages and what isn't.

At this point we setup the Page.  I won't go through step by step how to do that in this post as the new Power Pages process is really easy for creating a new page and adding a list to it.  Just remember to have table permissions setup.  In my case the table permissions are a simple Global Read Only permission on the announcement table.

At this point you should see your list on your Power Page.  But you will notice that the message column contains raw HTML.  Here is how to fix that easily.

  1. Open up the 'List' Record in DataVerse and click on the 'Options' tab.
  2. In the 'Custom JavaScript' field input the below JavaScript
    1. 1:  $(document).ready(function (){  
      2:    $(".entitylist.entity-grid").on("loaded", function () {  
      3:      $('td[data-attribute="REPLACE WITH FIELD SCHEMA NAME"]').each(function() {  
      4:        var rawHtml = $(this).attr('data-value');  
      5:        $(this).html(rawHtml);  
      6:      });  
      7:    });  
      8:  });  
Here is what this JavaScript does.  When the document is ready it checks for a loaded event from the list (grid).  If you don't do this, check the code won't work as the page is loaded asynchronously and the grid might not be loaded by the time the read function runs.  By running the on function, looking for a loaded response you will trigger the remaining code when the grid is ready.  Once the grid is ready, we will get our column that contains the raw html.  Make sure to replace the 'REPLACE WITH FIELD SCHEMA NAME' text with the schema name of your column (schema name of the DataVerse field).  For each row in that column, we will read the raw HTML that the Rich Text Editor generated and render it.

Make sure to save your changes and sync your configuration.  Once that is done clear your cache and check the list.  You should no longer see raw html but nicely formatted text, the way the user wanted it to be.


Popular posts from this blog

Validating User Input In CRM Portals With JavaScript

When we are setting up CRM Portals to allow customers to update their information, open cases, fill out an applications, etc. We want to make sure that we are validating their input before it is committed to CRM.  This way we ensure that our data is clean and meaningful to us and the customer. CRM Portals already has a lot validation checks built into it. But, on occasion we need to add our own.  To do this we will use JavaScript to run the validation and also to output a message to the user to tell them there is an issue they need to fix. Before we can do any JavaScript, we need to check and see if we are using JavaScript on an Entity Form or Web Page.  This is because the JavaScript, while similar, will be different.  First, we will go over the JavaScript for Entity Forms.  Then, we will go over the JavaScript for Web Pages.  Finally, we will look at the notification JavaScript. Entity Form: if (window.jQuery) { (function ($) { if (typeof (entityFormClientVali

Dynamics Set IFrame URL - D365 v8 vs. D365 v9

While doing client work, I came across a problem with setting an IFrame URL dynamically.  The underlying issue was that the sandbox instance is on v8 of Dynamics 365 and production is on v9 of Dynamics 365.  The reason for this was because this client was setup around the time that Microsoft rolled out v9.  Anyways, JavaScript that I wrote to dynamically set the URL of the IFrame wasn't working in the v9 instance.  This was because of changes that Microsoft made to how IFrames are loaded on the form and also changes to JavaScript. Here is my v8 setup: JavaScript runs OnLoad of contact form.  This works because of how IFrames are loaded in v8.  You can also run it on either a tab change (hide / show) or OnReadyStateComplete event of the IFrame.  Depending on your setup you will need to choose which is best for you.  For me in this case it was the OnLoad event. Here is the JavaScript: function OnLoad() { //Get memberid var value =

Navigating Microsoft Dynamics 365 Customization: Plugins vs. Azure Functions

Embarking on the Microsoft Dynamics 365 customization journey offers numerous opportunities to enhance your business processes. However, deciding between the available options, such as Plugins and Azure Functions, can be challenging. This engaging post will serve as your trusty guide, helping you choose the best option for your Dynamics 365 customization needs! The Two Customization Pathfinders: Plugin and Azure Function The Agile Plugin 🏃‍♂️ Reference: Microsoft Docs - Write a plug-in Plugins are like the swift trail runners of the Dynamics 365 customization world. They're the go-to choice for quick, real-time (synchronous), or background (asynchronous) operations that occur within the platform. They can intercept events and modify data before it's saved or displayed to the user. Choose Plugins when: You need real-time processing (synchronous) or background processing (asynchronous). You want to ensure data integrity. You need tight integration with Dynamics 365. Plugins mig