Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

[jaja4114]

Hi everyone

I am busy adding custom JS to my steps in the Portal Management App but I have run into the character limit exceeded problem.  Is there someway to maybe add a web file that targets my specific step or another way I might be able to bypass this issue.

Thanks in advance!

[saudali_25]

Hi @jaja4114 ,

For sure you can add your custom JavaScript as a Web File. To add a Web File, navigate to the Portal Management App, create a Web File record and upload your file to it, you can then add the file as a JS file to the Page, (its file name will be the Name you set on the Web File record which may be different to the name of the file you uploaded).

Please follow the above mentioned steps and feel free to share if you have any questions.

Thanks,

Saud

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[jaja4114]

Hi @saudali_25 

So I have created a JS file and attached it to my web file, but it is still not working. The code does work when I put it in the custom JS section of portal management so I think it might be how I am uploading it. 

I attached screenshots of

1. The web file record

2. How I am calling the script in the webpage

Do you maybe see where I am making a mistake?

Appreciate your help

[saudali_25]

Hi @jaja4114 ,

The way you're referencing file seems correct. Please ensure following:

• You have attached your JS file in Notes.
• Change Parent URL to Home page (/)

Purge Portal cache and try again, if issue persists please share.

Thanks,

Saud

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[jaja4114]

Hi @saudali_25 

So my JS file is attached and have changed the parent page to Home but still no luck.

The JS is directed to fields on a specific step of a multistep form. Is the parent page not the the page which contains the multistep form?

Also just to make sure do you save the JS file with .js extension or as an all files type?

Just trying to think what could still cause this.

Thanks for the help so far.

[saudali_25]

Hi @jaja4114 ,

When we are creating a Web File the Home page is going to be the parent always. Once you created this file you can use this on Web Pages or other Web Files. For the second question, yes you need to add your file as .js extension may be it is blocked at Dynamics and, but you can remove this blocked extension and upload your js file. Lastly, you have to add the reference (this is the part where I think you may be making any mistake). For more details you can check this documentation from MS Learn.

Please check this video from 10:00 and you will get the idea if you are missing any step. 

https://www.youtube.com/watch?v=vABWmnZQYQA

Try this out, and feel free to share if your issue is not resolved. 

Thanks,

Saud

[jaja4114]

Hi @saudali_25 

Okay so video did help with the js extension that was blocked by Dynamics, now I want to reference but not sure in which web template I reference. I still use the default web template but it does not seem to work when I reference it there. Sorry, I am quite new to Power Pages and the little bit of web development. Attached are screenshots if that makes things clearer.

I know it says do not modify the default template but I thought I could reference the JS at least?

[saudali_25]

Hi @jaja4114 , 

Sorry for coming back to topic late & Glad to hear, we are one step ahead! As you see in video where the Web File was added via Web Template. In Power Portals we do have couple of ways to add Web Files based on our need. In your scenario you are using default template, and it is not recommended to modify it. So, to add reference of your Web File please follow these steps:

• Navigate to Portal Management App
• Open your Web Page (where you're setting Multistep form as reference)
• Navigate to Content Page
• Add your reference file code to HTML “copy” field

<script src="/test.js"></script>

You can also see this article, to confirm you're not missing any steps.

Feel free to share, if you have any questions.

Thanks,

Saud

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[jaja4114]

hi @saudali_25 

Still no luck even after trying steps in you last reply. Could it be the JS is not working correctly. 

This is my the start of my JS:

document.addEventListener("DOMContentLoaded", function ()

Is there a way to check if web file is on web page??

I must say this is starting to feel like one of those problems that one overcomplicates but I am probably missing some small step somewhere. 

I will go back and start from scratch and follow instructions again, maybe I missed something.

[saudali_25]

Hi @jaja4114 ,

Please add a test function in your Web File like this:

function test(){
console.log("Calling test function");
}

Then add your file reference in HTML Copy field on content page of your main Web Page. Replace your file name with test.js.

<script src="/test.js"></script>

Now go to your Multistep Form -> Form step -> Form Options -> Custom JavaScript and add following code.

$(document).ready(function () {
       test();
});

Try these steps, purge portal cache and check console if you can see log in browser's console. Otherwise please post screenshots of all steps that you're doing. Never mind this is completely normal while doing first time. 

Feel free to share, if this is not working for you.

Thanks,

Saud

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.