Creating custom JavaScript events on form load

Custom JavaScript events in Power Pages (formerly Power Apps Portals) allow you to dynamically interact with forms on load. Whether you’re pre-filling fields, showing/hiding controls, validating data, or customizing the user experience, JavaScript plays a key role.

In this guide, you’ll learn how to execute JavaScript when a form loads in Power Pages, the techniques to identify field elements, and best practices to keep your code modular and secure.

---

Why Use JavaScript on Form Load?

Using JavaScript on form load allows you to:

• Pre-fill fields based on query strings or session data
• Disable or hide form elements
• Trigger conditional UI behavior
• Apply custom validations
• Create dynamic user experiences

---

Where to Add JavaScript in Power Pages?

Power Pages doesn’t let you inject scripts directly into the Entity Forms or Basic Forms (default forms rendered via Dataverse). Instead, scripts are added to:

1. Web Page’s Custom JavaScript section
2. Web Files (external script files)
3. Web Templates (if embedded in layout)
4. Web Page Copy > Page Copy (HTML)

You link the JavaScript to the Entity Form by matching the form’s ID or class when the form renders in the DOM.

---

Step-by-Step: Creating Custom JS Events on Form Load

Step 1: Add the Form to a Web Page

1. Go to Power Pages Design Studio
2. Insert a Basic Form or Custom Page with Entity Form
3. Choose the form you want to customize

---

Step 2: Identify the Form Elements

Once the form is published and rendered:

• Open the browser’s Developer Tools (F12)
• Use the Inspector to check how your form fields are rendered

You’ll find fields typically rendered with:

<input type="text" id="firstname" name="firstname">

Or

<input type="text" id="cr_fieldname" name="cr_fieldname">

---

Step 3: Add JavaScript Code (Inline or via Web File)

In the Web Page’s Advanced Settings, go to the Custom JavaScript section and add:

$(document).ready(function () {
    // Wait until the form is fully loaded
    setTimeout(function () {
        // Trigger a custom event on form load
        console.log("Form has been loaded.");

        // Example 1: Set a default value
        $("#firstname").val("John");

        // Example 2: Hide a field
        $("#email").closest(".form-group").hide();

        // Example 3: Custom validation
        $("#submitButton").click(function (e) {
            var phone = $("#telephone1").val();
            if (phone.length !== 10) {
                e.preventDefault();
                alert("Please enter a 10-digit phone number.");
            }
        });

        // Example 4: Fire a custom event
        $(document).trigger("customFormLoadEvent");

    }, 500); // Small delay to ensure full render
});

---

Step 4: (Optional) Attach External Web File

If you want to organize JavaScript externally:

1. Go to Portal Management App
2. Navigate to Web Files
3. Create a new Web File:
   • Name: form-events.js
   • MIME Type: text/javascript
   • Partial URL: js/form-events.js
4. Paste your JavaScript code
5. In the Web Page, add this line to the Page Copy (HTML) section:

<script src="/webresources/js/form-events.js" type="text/javascript"></script>

---

Custom Event Handling Example

If you want other components to react to the form load, you can define and subscribe to custom events:

javascriptCopyEdit// Triggering a custom event
$(document).trigger("formFullyLoaded");

// Listening for it
$(document).on("formFullyLoaded", function () {
    console.log("Another script responding to form load.");
    $("#description").val("This was auto-filled via event.");
});

---

Best Practices

Practice	Reason
Use jQuery selectors carefully	Ensure correct field targeting
Use setTimeout() with delay	Wait for the DOM and form to render
Never expose sensitive data in JavaScript	Security risk
Use unobtrusive JS – separate from markup	Better for maintainability
Avoid modifying system fields	Prevent update errors
Test in both desktop and mobile	Ensure responsive behavior

---

Common Use Cases

Use Case	JavaScript Logic
Auto-fill user data	Set value using $("#field").val()
Hide fields based on roles	Use session or role data logic
Validate field before submission	Attach handler to submit button
Load dropdown values dynamically	Use AJAX or custom logic
Disable submit on invalid data	Use e.preventDefault() in click handler

---

Troubleshooting Tips

• Use console.log() to trace errors
• Ensure jQuery is available (included by default in Power Pages)
• Wrap logic in $(document).ready() or window.onload
• Use browser’s Dev Tools to inspect and debug