PowerApps Portal: Storing JavaScripts in web files

[Anonymous]

Hello Community,

I would like to get feedback and suggestions if using web files to store JavaScripts, so that we can easily re-apply the same JavaScript files to other web pages on the portal, is the right approach.

Basically, instead of putting the JavaScript directly on the web page itself, is the use of web files the right approach to do this? Or is there another suggested approach?

Please advise.

Thanks!

[UlrikkeAkerbæk]

Hey @Anonymous.

I put small global script functions in a global web template, and this web template is included in the website's footer web template. This way I only have one place to manage all the small functions. Even if you need to have three exact copies of the same web template it wouldn't be that hard to maintain if you use this approach across websites. 

Libraries and bigger features are stored in js-files in Azure Blob Storage and added to the website the same way I include bootstrap and font awesome-libraries. 

In addition I put script on the Entity Forms directly. Everyone on the team are restricted to keep scripts in one of these three locations and it works fine for us. Some small exceptions that are well documented and not business critical - mostly for design purposes and enhancing usability.

That's what I do for the most part. Looking forward to see what others do! 

Thank you for a great question! 

[justinburch · Accepted solution]

Hi @Anonymous,

This is a personal/project preference - do what works best for your team. As can be identified with my drastic preference difference from @UlrikkeAkerbæk, there is no true standard.

At a high level, I prefer to use Web Files - your code can easily live in source control, team members can use Admin Web Roles to upload the files directly in the Portal without CDS access, you can use liquid tags to control which files to upload and when - e.g. you can add a param for a script name for admins to test functionality, and then add the param to script tags, such as 

{% assign is_admin = user | has_role: 'Administrators' %}
{% if params.useFile and is_admin %}
  <script src="{{ params.fileName }}.js">
{% endif %}

I wrote a small tips document on this a few years ago and decided to host it on my site, if you want to check out a table with my pros & cons.

https://justinburch.com/powerapps-portal-development-tips/where-to-code/

[Anonymous]

Thank you @UlrikkeAkerbæk  and @justinburch  for your suggestions above!

[Swimburger]

@justinburch , you mentioned we can uploaded JavaScript files, but I am only able to upload css files.
I was able to rename the JavaScript files to the css extension, upload them to the portal, and then change the extension back inside the portal. Obviously this is very unintuitive.
Is there an easier way to upload files in general especially bulk? There's a bunch of font and image files I need to upload.

[justinburch]

Hi @Swimburger,

You'll need to unblock the .js extension from the system's attachment blacklist.

Access the Advanced Settings as a System Admin

Navigate to Settings > Admin

System Settings > General tab > Scroll down to "Set blocked file extensions for attachments" and remove the text for js

After this, you will be able to upload JS files without issue. Note that this also means JS files can be sent through email and uploaded as attachments in general. The only other workaround I've used is to save the files as .txt, but upload as Web Files with the name/path of ".js". 

I hope this helps.

[Swimburger]

@justinburch, thank you for the very fast reply.
I made that change but I still can only upload CSS files from the theme section.

I don't see how to upload files any other way.

[justinburch]

Ahh.. sorry about that @Swimburger, I haven't worked with the Portal much in the last 7 months or so. This seems to be the Portal Studio tool, and I don't have a portal right now to show steps there, but hopefully these two options help. Apologies in advance, a lot of this is going off of memory.

1. If you have a user with an "Administrator" Web Role, and appropriately have setup (or kept) the Grant Change Web Page Access Control Rule on the Home page, then logging in with that user should grant you a pop-up in the upper right of the Portal
   1. Click "Child Web File"
   2. Use the Browse button to upload the JS file
   3. Set the name and the Path to the filename (ending with .js)
   4. Note that whichever page you are on during this process will be the Parent Page of the Web File, and will then control the full URL - e.g. on Home, it'll be "https://yourportalhere.powerappsportals.com/file.js", but from Cases (assuming /support/), it'll be "https://yourportalhere.powerappsportals.com/support/file.js"
   5. Also note that, unlike CSS, you need to add <script> tags to utilize JS files in the Portal
2. Upload the file directly in the "Web Files" Dataverse area, via the Portal Management model-driven app
   1. More information here: Create and manage web files - Power Apps | Microsoft Docs

I hope this helps!

[tomcadmanuk2020]

All

We are using Web Files to store our common JS files etc.  but have hit a snag in that we were about to apply a site setting for HTTP/X-Content-Type-Options to now be nosniff as a result of our portal site being PCI Tested.  This then means that the Web Files need to have an explicit MIME Type added otherwise the files are rendered as plain/text and all common JScript functions do not then run in the browser.  Has anyone found a way to set the mime type?