MS CRM Portal : How to use JavaScript Web File in Portal?

Web file use to store images, .json type file, .js type file, documents and other file types. These attached files can be downloaded. 

When the files are attached, it is accessible by code written in Web Template, Page Template or other codes.

When you go to the portal, you will find already some web files added to portal. The file like bootstrap.js, bootstrap.min.css (used for responsive portal website), banner image, home page logo etc. These web files are used to build the default Portals. 

To store the actual content of file, portal uses attachment feature of notes associated with a web file record. When files are attached, it has limitation of size it supports to upload based on type of files are being attached. 

In this post will see in details about how to use JavaScript as Web File in Power App portal?

I will show you steps how to use JavaScript or jQuery code written in .js Web File can be use in Web Page through Web Template.

Let's see step by step.

Scenario: I have one Web Page (Partial URL as create-application) which contains a Submit button with id InsertButton. On click of this button, I want to show confirm dialog. The code of logic will be written in .js Web File.

Step1: create your .js file which contains your code of logic. 

Yea, you are right !. Code is pretty simple. When DOM module becomes ready my code loads and register on click event function which shows confirm dialog when Submit (i.e. InsertButton) is clicked.

Save the file of code with extension (.js) in your local system. This file we need to upload to the Web File in Portal.

Step2: before you upload any file extension to D365, you need to remove restriction. By default D365 restrict some file type and .js type is one of it. 

To remove go to Advance Setting - > Administration - > System Setting.

Remove the js from the list of Set blocked file extension for attachments.

Step3: Now go to the Portal Management App and select Web File. Under the Web File, create new Web File. I have already created a Web File with partial URL dnlb_application.js as below.

Name : Enter the name of the Web File.

Website : Select the web site portal for which you are creating web file.

Parent Page : You can select home if you want web file to accessible from home page. You can create the web files for specific pages then you need to the specific page as parent page.

Partial URL : Partial URL is important. Through Partial URL you can access the Web Files. Enter the partial URL text.

Published State : Select published state as Published.

Title : You can specify the title through which you can see the Web File in XrmToolBox and all.

Step4: Once the Web File record is created then go to Notes tab of Web File. Add .js file as attachment which you created and contain code of your logic.

I have attached my saved file as below.

Now the content of notes which we attached can be access through Partial URL.

Step5: To check if it is correctly uploaded, get the portal URL and append the partial URL in the web site URL.

Example: If my Portal Website URL is https://xyz.powerappsportal.com/ then append the partial URL as https://xyz.powerappsportal.com/partialurl. In below image you can I have append my Web File Partial URL as dnlb_application.js. You can see the code written in the attached file. If content load correctly then you successfully uploaded the file.

Step6: Now to use the code of .js Web File in Web Page, you can include this .js Web File in Web Template or Page Template as below.

When you include your web file to Web Template then it can access variable or function which are present in Web Template also.

I have already created Web Template file to load the Web Page. I have placed code as below to include the my Web File with Partial URL dnlb_application.js.

Step7: Now save the Web Template and go to Web Page and try to Click on Submit button.

Bingo !! I got my confirm alert as coded in .js file.

This is how you can use the Web File to your Portal.

Stay Safe and Good Luck !