Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Pages - Customize & Extend
Unanswered

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

(0) ShareShare
ReportReport
Posted on by 41

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!

Categories:
  • Saud Ali Profile Picture
    812 Super User 2024 Season 1 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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.

  • jaja4114 Profile Picture
    41 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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.

  • Saud Ali Profile Picture
    812 Super User 2024 Season 1 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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 Profile Picture
    41 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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?

  • Saud Ali Profile Picture
    812 Super User 2024 Season 1 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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 Profile Picture
    41 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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.

  • Saud Ali Profile Picture
    812 Super User 2024 Season 1 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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 Profile Picture
    41 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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

  • Saud Ali Profile Picture
    812 Super User 2024 Season 1 on at
    Re: Adding custom JavaScript to steps in Multistep Form (character limit exceeded)

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Michael Gernaey – Community Spotlight

We are honored to recognize Michael Gernaey as our June 2025 Community…

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard >

Featured topics