Solved: What is the most reliable way to add Javascript?

inanoffice23 · ‎02-15-2024

I hit the 10000 Javascript character limit, also trying to use both basic forms and multistep forms, so very inconvenient to have to look for the Javascript in different places

In this post, I read that by adding a 'nosniff' it affects the Web File that was added as Javascript Solved: PowerApps Portal: Storing JavaScripts in web files - Power Platform Community (microsoft.com...

This makes me wonder whether Web Files is a reliable way of adding files (I'm aware we have to 'fool' the system as it won't allow a direct .js upload)

Where can I add the Javascript safely, so it won't incur problems further down the line? Our website will be externally tested, so nosniff is already in place

I'm not able to use the Blob storage although it sounds like a great option

I believe I read elsewhere you could add it in Webpage, Webfile, I can't find all the steps in writing, can someone please list them thoroughly? Thank you

EmadBeshai · ‎02-26-2024

Hi @inanoffice23 ,

From the Default solution look for the form step table as I elaborated in the above screenshot.

I'm already using this trick in my projects.

Please let me know if you more help.

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

View solution in original post

OOlashyn · ‎02-18-2024

Hi @inanoffice23 ,

You can store js files in the Web Files - but you would need to allow to store js as a file for the Dataverse. To do so go to the Power Platform Admin Center > your environment> privacy and security > and change the settings of the "Block these file extensions" option (see more here https://learn.microsoft.com/en-us/power-platform/admin/settings-privacy-security). However, depending on your company's requirements this solution might not be applicable. If that is the case you can also use Web Template and include them in the pages you need. Not as pretty as web file option but usable.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

JadyMulqueeney · ‎02-19-2024

I sometimes add lengthy JavaScript to a new Content Snippet (type: HTML) and load it into my page with Liquid. Content Snippets have a character limit too but are a handy alternative.

There's a little known Content Snippet called Head/Fonts that loads in the <head></head> of every web page, it is another location for global JavaScript.

It doesn't hurt to insert your script within a Liquid raw tag, I guess this helps load faster without processing?

{% raw %}
<script>...</script>
{% endraw %}

inanoffice23 · ‎02-20-2024

Thank you both for your replies, the management thinks it's too risky to have code all over the place, as Power Pages is sold as a low-no code solution.

We want to be able to have the code in one place where everything can be seen. Although I mentioned Visual Studio Code they want to mitigate any potential risks, like not seeing a hidden content snippet they are not aware of, etc. It's such a shame as they might opt out for a different platform all together

The 2 other outstanding issues I have are:

10 basic forms together, one scenario needs to stop at form 4 (been told to use Javascript/liquid to add a custom button and send data to dataverse but none of the codes found online work)

Those 10 forms belong to different tables, it writes data to all the tables but no way of telling they are related, documentation is scarce (associate reference table on save no luck so far)

etc.

I wished we had better documentation, our project is long overdue

Fubar · ‎02-20-2024

Unfortunately, low/no code only really applies to simplistic implementations.

There are places by design to hold JS, and then also maybe some workarounds, places you can put JavaScript are generally

Web Page: has a place for JS and CSS (you will see it in the Management App or in the code editor you will see it next to the file for the Page Copy)
Web Page: can also be put in the Page Copy wrapped in Script tags
Basic/Multi Step forms also have places to put custom JS (use the Management App)
Web Files
Web Template, can create a custom web template put JS in script tags and use it instead of the templates provided or create one and then Include it in your Page Copy https://learn.microsoft.com/en-us/power-pages/configure/liquid/template-tags#include and https://learn.microsoft.com/en-us/power-pages/configure/web-templates-as-components (this is similar to the Content Snippet suggestion, but using Web Templates include capability).

Also, note not all features are in the site editor, so somethings are still only available in the Management App.

The Argument you can make for JS in different places, is a) in many cases it is by design, b) it is all in the Dataverse instance, c) if you are using the CLI or the Pages Solutions it is all there.

The rest just comes down to the experience of the people working on it and them knowing where to expect to find stuff.

inanoffice23 · ‎02-21-2024

Thank you for your reply @Fubar

I guess for now I will stick to attempting to use Web Files and see whether the IT Test has any objections further down the line, I might update the answer once I find out (it will probably take months)

JadyMulqueeney · ‎02-21-2024

To upload a JS file into your Power Pages Web Files, you will need to enable JS filetype for upload.

Enable via File Types in "Company Settings"
By default, JS files are blocked

From Settings > Admin Center, go to https://admin.powerplatform.microsoft.com/environments

Select your environment
Open Settings for that environment
Under Products, open Privacy + Security
Remove JS from "Blocked Attachments" > "Block these file extensions" field.

(Doesn't hurt to also enable SVG, if you are planning to upload any SVG files)

inanoffice23 · ‎02-23-2024

Thank you @JadyMulqueeney I guess the step missing is go to the copy.HTML and add this piece of code

I will come back to this post once I find out if IT allows us to have Web files and render JS properly

EmadBeshai · ‎02-25-2024

Hi @inanoffice23 ,

You can increase the JS field limit from the dataverse a shown below

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

inanoffice23 · ‎02-26-2024

Wow! I think that might fix the issue @EmadBeshai ! How did you get the form step to show up in the objects section though? I have been looking to 'add existing' but I can't seem to find how to do that

I do wonder whether the 10000 character limit is there for a reason, or just as a default, this article says multiline columns maximum is 1048576 so in theory good to go as long as I find the magic column 🙂 Column data types in Microsoft Dataverse (contains video) - Power Apps | Microsoft Learn