Embedding external JavaScript in Dynamics Portals

Recently I have been tasked with a POC where I need to embed an external java script in to Dynamics Portals. The task looks simple as one line, i.e. to allow users to manipulate image on dynamics Portals before saving it into CRM/another storage.

Being new to Portals work, its challenging for me to achieve this task.

Option 1:

My plan is to upload JavaScript library to Portals web files and use it in either entity list or entity form or web page. This option went nowhere when I realised I cannot upload JavaScript files directly as web files as these are blocked. Workaround is to rename the file by removing extension and upload as web file. However, to unblock uploading .js files, Navigate to System Settings, under general tab, remove .js from blocked files. Secondly there is a size limitation on the custom JavaScript field in Portal configuration blocked me to directly copy Javascript. I was blocked and started to rethink.

Then I created a new HTML webresoruce and embedded it into one of the CRM forms and used an entity list in Portal to showcase this form. This was simple and got immediate results. I was able to see my web resource on Dynamics portals. I thought I could achieve the functionality using this approach. However, this ended in vain as Portal did not refresh html webresoruce after the first publish. Clear Cache, did not help too.

Option 2:

Got a chance to learn and work in another challenging implementation of portals, where I picked up this approach. In this implementation, there is no need to create HTML webresoruce or create entity list, entity form. We just create a webpage, web file and a bit of custom JavaScript. Let’s jump in to implementation.

For this example I am taking an existing image from portal web files rather than allowing users to upload an image. So created 2 web files to support this exercise.

  1. Uploaded an image file. Portal considers partial URL field to embed your resources in to page. Uploaded image file in to notes section.


  2. Renamed JavaScript Library file from croppers.min.js to croppers.min. Removed js extension from file name. Uploaded this file as croppers.min.js into CRM. FYI. Croppers is a free resource available in GitHub. Please follow link to download.


  3. Created a new webpage, added a localised content to it as with basic JavaScript.



  4. Now added custom JavaScript to invoke events from the cropper’s library to achieve desired functionality.

Output


When clicked on Crop button

The external library we used in this example provides us with couple of get methods which will help us to save cropped images in to CRM or any other system. It requires us to make some JavaScript calls to save images.