How to Reference Custom JavaScript Files in Power Pages

Are you looking to enhance your Power Pages by adding custom JavaScript functionalities? Do you need to reference external script libraries or upload your own JavaScript files to your web pages or templates? If so, you're in the right place. This guide will walk you through the steps to upload and reference custom JavaScript files—specifically an SDK JavaScript file—in your Power Pages.

Introduction

Power Pages support web files, allowing you to upload custom images, files, stylesheets, and more. However, when it comes to uploading JavaScript files, you might encounter an error like this:

"The selected file type is not allowed. Please upload a valid file."

This happens because web files are essentially notes records with attachments stored inside your Dataverse or Dynamics 365 instance. For security reasons, files with a .js extension are typically blocked from being uploaded. While you might consider altering security settings to allow .js files, it's not recommended due to potential security risks.

So, how can you upload and reference your custom JavaScript files without compromising security? Let's dive in.

Steps to Upload and Reference Custom JavaScript Files

1. Create a Web File

First, create a new web file in your Power Pages:

1. Navigate to Portals > Web Files in your Power Pages environment.

2. Click on New to create a new web file.

3. Fill in the following details:

   • Name: Give your web file a name (e.g., SDK JavaScript File).
   • Partial URL: Enter the file name with a .js extension (e.g., sdkjavascriptfile.js).
   • Parent Page: Select the page under which this web file will reside (e.g., Home).

    

    

2. Modify Your JavaScript File

Before uploading, remove the .js extension from your JavaScript file:

• Rename sdkjavascriptfile.js to sdkjavascriptfile.

   

   

3. Upload the JavaScript Content

Now, upload the content of your JavaScript file to the web file:

1. Open the web file you created earlier.

2. Scroll down to the Notes section.

3. Click on Add a Note.

4. Attach your JavaScript file (now without the .js extension).

    

    

4. Reference the JavaScript File in Your Web Template or Page

To use your custom JavaScript file in your portal, reference it in your web template or web page:

Important Notes:

• Path Accuracy: Ensure that the src attribute correctly points to your JavaScript file. Since the web file is under the Home page in this example, the path is ~/skjavascriptfile.js.
• Partial URL Usage: Use the web file's partial URL as the src value.
• File Location: If your web file is under a different page or path, adjust the src value accordingly.

Additional Tips

• External Libraries: If you prefer not to upload your own JavaScript files, you can reference external libraries like jQuery, Knockout, Angular, or React using their CDN URLs.
• Security Considerations: Always be cautious when adding custom scripts to your portal to avoid potential security vulnerabilities.

Conclusion

By following these steps, you can successfully upload and reference custom JavaScript files—such as the SK JavaScript file—in your Power Pages. This method allows you to enhance your portal's functionality without compromising on security.

We hope this guide has been helpful. Happy coding!

For more tutorials and tips on Power Pages, stay tuned to our blog.

Links:

https://debajmecrm.com/how-to-upload-a-custom-javascript-web-file-in-power-apps-portals/

Looking to optimize your software Javascript skills? Visit askpedromartins.com for expert advice and solutions tailored to your development needs.