{knowhow} How to refer a JavaScript file in your PowerApps/ Dynamics 365 Portal which is not accessible via public URL?

This is a big question I face whether I am conducting a training or whether I am working on PowerApps portal in customer location. And I am really not surprised.

Say you have a custom .js file where you have scripted some wonderful functions and want to reuse in the portal. It’s a really big file and you just want to reference it and start using. Not only that, there may be some external .js files which you may want and just use it. If it is some jquery or bootstrap, you can just use the CDN url to refer to the file. However what if it is something internal or not accessible on a publicly available URL.

The first option that comes to mind is upload the .js file using webfile. Can you do that? Off course you can do this. While this is possibility, the probability of .js file being allowed for upload is slim. Whenever you upload a web file, it is basically uploaded as note attachment in your CDS/ Dynamics 365 environment and more often that not, it is not comprehensive solution.

Below is the error I receive when I try to upload a .js file in webfile.

So what are we left with. You may think, the only other option is to upload the file on some public repository which can be accessed by the portal and then referencing the file using the script template in your webtemplate or Page copy. So much for so little.

Well there is another way. What if you could load the content of your javascript file at runtime? You guessed it right. We are going to to do the same stuff now.

Let’s go ahead and create a content snippet of type HTML

In the Value box, i select the HTML option and paste the entire content inside the javascript file within the script tag.

Easy – Isn’t it? Not so fast. Notice carefully the code above. The entire content including the script tag is included with {% raw %} {% endraw %} tag.

What is the function of this tag and why is this even necessary? The {% raw %} is absolute necessary to render the script as is when the snippet is used. Javascript contains liquid specific operators like curly braces ( { } ) % and so many other. If you don’t put them in the {% raw %} tag, it would try to evaluate while you try to use the snippet and your content shall never work.

Ok Good stuff! Now let’s use this snippet on a page.

Open the “Content Page” your webpage.

Scroll down and navigate to the Copy (HTML) section of the page. To include the script file, all you need to do is select the HTML tab and use the snippet we created in the earlier step.

Trust me that’s all. Now when the page is rendered in the portal, I see my entire JS Content being in the HTML source. Great to finally see it.

Now let’s put this to action. In the custom javascript section of the Content Page, on change I write code to invoke func1();

And when I login to the portal and change the SIC code, I can see the alert firing. Wonderful isn’t it. A simple liquid tag and a quick workaround can sometime do wonders.