Microsoft Power Pages - Importing JS Libraries

 INTRODUCTION

Microsoft Power Pages is a platform for developing web sites - from very simple... to surprisingly complex.  However, with additional complexity comes the need to leverage external JavaScript libraries.  We'll be taking a look at that in this brief article.

ASSUMPTIONS

This article will be most useful to you if you already have some working knowledge of

• Power Pages platform
• Creating a Site and Adding Pages/Components
• HTML
• Specifically, the Script tag
• Portal Management
• All of the information surrounding a Power Pages site is stored in a D365 environment and that data is accessible through the D365 Portals application

SCENARIO

We have a web page on our site that needs to include an HTML editor.  There are are many (paid and free) great editors out there and we'll be using the Jodit editor in this example.

HOW TO

To implement a Jodit editor on a web page, we need to import the Jodit CSS and JavaScript files.  Once we have those libraries, we can then properly surface a nice editor.

SOME CUSTOM HTML

The Jodit editor requires an HTML textarea control that it transforms into a nice HTML editor.  We started by adding a 1 column section to the Page as a place to put the textarea and then inserted the markup there.  Here's the HTML for the textarea, including the placeholder section added by the platform:

 <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">  
  <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">  
   <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word;">  
    <div class="mb-3" id="body">  
     <label for="editor">Dashboard Message</label>  
     <textarea id="welcomeContent" style="width:100%;"></textarea>  
   </div>  
   </div>  
  </div>  
 </div>  

METHOD 1 - ADD FILES FROM PORTAL MANAGEMENT

In this approach, we'll link to the Portal Management application by clicking the ellipses on the Power Pages left nav menu.  This will open a new browser Tab.

There is a great write up on this approach, so I'm not going to recreate the wheel

Import a JavaScript library to use with a Power Pages webpage - Low Code Lewis

Follow this process for the files needed (CSS/JS) for the library you need.

METHOD 2 - ADD FILES DYNAMICALLY FROM PAGE JAVASCRIPT

This approach is equally effective but has the advantage of being able to consume files directly from CDN or other global providers without having a local copy of the files.  If the library you need is not available from a CDN, the first method will need to be used.

For the Page in question, 

• click the Edit code button to open Visual Studio Code for Web.
• click the JavaScript file on the left explorer panel
• this loads the file in the editor
• The following code will dynamically load the Jodit JS/CSS from the CDN
• This code will initialize the editor

   let welcomeEditor = null;  
   
   var joditCSS = document.createElement("link");  
   joditCSS.rel = "stylesheet";  
   joditCSS.type = "text/css";  
   joditCSS.href = "//cdnjs.cloudflare.com/ajax/libs/jodit/3.19.3/jodit.min.css";  
   document.getElementsByTagName("head")[0].appendChild(joditCSS)  
   
   let joditScript = document.createElement("script");  
   joditScript.type = "text/javascript";  
   joditScript.src = "//cdnjs.cloudflare.com/ajax/libs/jodit/3.19.3/jodit.min.js";  
   document.head.appendChild(joditScript);    
   
   document.addEventListener("DOMContentLoaded", function(){  
     console.log("initRegistrations started");  
     document.getElementById('email').addEventListener(  
       'change',   
       email_Change  
       );   
      
     document.querySelectorAll('.fldRequired').forEach(c => {  
       c.addEventListener('change', event => {  
         validateRequired(c);  
       });  
     });  
     
     setTimeout(() => {  
       document.querySelectorAll('.fldRequired').forEach(c => {  
         validateRequired(c);  
       });  
     }, 1000);  
   
       welcomeEditor = Jodit.make("#welcomeContent");  
   
   });  

THE RESULT

With all of this in place, you should get a page that renders the Jodit editor as expected

SUMMARY

Both methods effectively import the libraries you specify and the method you choose will likely be based on the answer to some basic questions

• Is this library used by other pages?
• Get a local copy and use Method 1
• Is this library available from a CDN
• Consider Method 2
• Are the timing issues with the load of the files?
• Use Method 1