Enhancing Form Usability in Power Apps Portal with Dynamic Field Validation

 

Enhancing Form Usability in Power Apps Portal with Dynamic Field Validation

Introduction

In Power Apps Portal, customizing user experience to accommodate complex business logic is crucial. A common scenario involves dynamically adjusting form fields based on user input. This article details a method to visually and programmatically control the required status of form fields in Power Apps Portal, enhancing both user experience and data integrity.

The Challenge

In a booking form scenario within Power Apps Portal, the need arises to alter the required status of fields ("Facility", "Booking", and "Court Case") based on a user's selection of a "Non-Booked Case" checkbox or radio button. The challenge is twofold:

1. Visual Validation: Indicating required fields visually, typically with an asterisk (*).
2. Actual Validation: Enforcing form submission rules based on field requirements.

Solution Overview

Using JavaScript and jQuery, the solution:

• Dynamically updates visual indicators for required fields.
• Integrates custom validation logic to ensure the form adheres to the required rules before submission.

Implementation Steps

The implementation in Power Apps Portal involves JavaScript functions that dynamically adjust both the visual cues and validation logic of the form.

Visual Validation

A function manipulates CSS to display an asterisk for required fields:

function setFieldRequiredStatus(fieldId, requiredFlag) {

    var styleElementId = "custom-style-" + fieldId;

    var existingStyleElement = document.getElementById(styleElementId);

    if (existingStyleElement) {

        existingStyleElement.remove();

    }

    var styleElement = document.createElement('style');

    styleElement.id = styleElementId;

    document.head.appendChild(styleElement);

    styleElement.sheet.insertRule(`

        #${fieldId}_label:after {

            content: ${requiredFlag ? "'*'" : "''"} !important;

            color: ${requiredFlag ? "red" : "transparent"} !important;

        }

    `, 0);

}

Actual Validation

Functions are created to manage the form's validators:

function addOrUpdateValidatorForField(fieldId, isRequired) {

    var fieldValidatorId = fieldId + "Validator";

    var existingValidatorIndex = Page_Validators.findIndex(function(validator) { return validator.id === fieldValidatorId; });

    if (!isRequired && existingValidatorIndex !== -1) {

        Page_Validators.splice(existingValidatorIndex, 1);

        return;

    }

    var fieldValidator = existingValidatorIndex === -1 ? document.createElement('span') : Page_Validators[existingValidatorIndex];

    if (existingValidatorIndex === -1) {

        fieldValidator.id = fieldValidatorId;

        fieldValidator.controltovalidate = fieldId + '_name';

        fieldValidator.style.display = "none";

        Page_Validators.push(fieldValidator);

    }

    fieldValidator.evaluationfunction = function() {

        var fieldValue = $('#' + fieldId + '_name').val().trim();

        if (isRequired && fieldValue === "") {

            this.errormessage = "<a href='#" + fieldId + "_label'>" + $('#' + fieldId + '_label').text() + " is a required field.</a>";

            return false;

        }

        return true;

    };

}

Using Page_Validators, when field value is invalid, will show below error alert at the top of form.

Tying It All Together

A function to toggle the required status based on the "Non-Booked Case" field:

function updateFieldRequiredLevelBasedOnNonBookedCase() {

    var isNonBookedCaseChecked = $('#kc_nonbookedcase_1').is(':checked');

    var fields = ["tri_facilityid", "tri_bookingid", "tri_courtcaseid"];

    fields.forEach(function(fieldId) {

        var isRequired = !isNonBookedCaseChecked;

        addOrUpdateValidatorForField(fieldId, isRequired);

        setFieldRequiredStatus(fieldId, isRequired);

    });

}

$(document).ready(function() {

    updateFieldRequiredLevelBasedOnNonBookedCase();

    $('#kc_nonbookedcase_0, #kc_nonbookedcase_1').on('change', function() {

        updateFieldRequiredLevelBasedOnNonBookedCase();

    });

});

Conclusion

This approach in Power Apps Portal offers an effective solution to dynamically control the required status of form fields, both visually and programmatically. By improving form usability and ensuring data validation, we can enhance user interactions and data collection accuracy within Power Apps Portal environments.