Route-based form loading - Rishan Solutions

Route-based form loading in Power Pages involves dynamically loading a form based on the route or URL that the user accesses within the portal. This allows for a customized user experience where the content displayed, such as forms, data, or actions, can vary depending on the specific URL or route that the user has navigated to. This approach is particularly useful in scenarios where you want to display different forms based on parameters in the URL or the context of the page the user is on.

Here’s a detailed step-by-step guide on how to implement route-based form loading in Power Pages:

Step 1: Understand the Concept of Routes in Power Pages

In Power Pages (formerly Power Apps Portals), URLs are structured around web pages that are mapped to specific Web Pages in the Portal Management area. Each page can be customized to load specific forms or content based on its URL or route.

Route Example:

https://yourportal.com/contact-us: This route may display a contact form.
https://yourportal.com/feedback: This route may display a feedback form.

By leveraging the URL or route of a page, you can determine which form to load dynamically when the page is accessed.

Step 2: Define Forms in Power Pages

Before loading forms dynamically, ensure you have the forms created within your portal.

Go to Power Pages Portal Management:
- Navigate to the Portal Management app in Power Apps.
Create Forms:
- Go to Web Forms under Content.
- Create various forms that are relevant to different routes you want to use (e.g., a Contact Form, Feedback Form, Support Form, etc.).
Set Form Fields:
- Define which fields and content will appear on the form. You can set conditions or default values as necessary.

Step 3: Use JavaScript to Load Forms Based on the Route

Once the forms are defined, you can use JavaScript to load different forms dynamically based on the route accessed by the user.

JavaScript Example for Route-Based Form Loading:

Create the HTML Structure for Form Placement: In the Power Pages portal, create a structure that will hold the form. For example, add a <div> element in the webpage to serve as the container for the dynamically loaded form.

<div id="form-container"></div>

JavaScript to Dynamically Load Forms: Use JavaScript to determine the current route and load the appropriate form into the <div> element. You can either fetch the form’s HTML content from the portal or use form IDs to load them.

window.addEventListener('DOMContentLoaded', function() {
    var currentRoute = window.location.pathname; // Get the current route/URL path
    
    // Create a function to load the appropriate form
    function loadForm(route) {
        var formContainer = document.getElementById('form-container');
        
        // Logic to load the form based on route
        if (route === '/contact-us') {
            loadContactForm(formContainer);
        } else if (route === '/feedback') {
            loadFeedbackForm(formContainer);
        } else if (route === '/support') {
            loadSupportForm(formContainer);
        } else {
            formContainer.innerHTML = '<p>No form available for this route.</p>';
        }
    }

    // Function to load the Contact Us form
    function loadContactForm(container) {
        container.innerHTML = `
            <form>
                <h2>Contact Us</h2>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <button type="submit">Submit</button>
            </form>
        `;
    }

    // Function to load the Feedback form
    function loadFeedbackForm(container) {
        container.innerHTML = `
            <form>
                <h2>Feedback</h2>
                <label for="feedback">Your Feedback:</label>
                <textarea id="feedback" name="feedback" required></textarea>
                <button type="submit">Submit</button>
            </form>
        `;
    }

    // Function to load the Support form
    function loadSupportForm(container) {
        container.innerHTML = `
            <form>
                <h2>Support</h2>
                <label for="issue">Describe the Issue:</label>
                <textarea id="issue" name="issue" required></textarea>
                <button type="submit">Submit</button>
            </form>
        `;
    }

    // Load the form based on the current route
    loadForm(currentRoute);
});

Explanation of the JavaScript:

window.location.pathname: This fetches the current URL path or route of the page.
loadForm(route): This function checks the current route and calls a corresponding function to load a specific form.
loadContactForm(), loadFeedbackForm(), loadSupportForm(): These are functions that define the HTML content for each form type. They dynamically insert the correct form into the form-container <div> based on the route.

Step 4: Insert JavaScript into Power Pages

Navigate to the Web Page:
- In the Portal Management app, go to Web Pages.
- Select the web page (such as Contact Us, Feedback, etc.) where the forms should be loaded dynamically.
Add JavaScript to Web Page:
- In the Web Page settings, navigate to the Web Files section or directly inject the JavaScript in the Page Content or Web Template.
- Insert the JavaScript code you created in Step 3. You can place it inside a <script> tag or in a custom JavaScript file that is linked to the page.

Step 5: Testing and Validation

Test Different Routes:
- Open the portal and navigate to the routes defined in your JavaScript (e.g., /contact-us, /feedback, etc.).
- Ensure that the correct form loads based on the URL.
Test with Invalid Routes:
- Check how the system handles routes that do not match any form (e.g., /invalid-route). The fallback condition (No form available for this route) should trigger in such cases.
Validate Form Functionality:
- Ensure that forms are interactive and functional (i.e., form submission, validation, etc.).
- If necessary, implement custom handling for form submissions and integrate with the Dataverse backend.

Step 6: Handling Complex Routing Scenarios

If your Power Pages site requires more complex routing, such as routes with query parameters (e.g., /contact-us?type=general), you can modify your JavaScript to parse the query parameters and load forms accordingly.

Example: Handling Query Parameters

function getQueryParam(param) {
    var urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

var formType = getQueryParam('type'); // e.g., "general" or "feedback"

if (formType === 'general') {
    loadGeneralContactForm(formContainer);
} else if (formType === 'feedback') {
    loadFeedbackForm(formContainer);
}