Power Pages  

How to Make Power Pages Form Fields Mandatory or Optional Using jQuery

Introduction

If you're working with Power Apps Portals (formerly known as Dynamics 365 Portals), you already know how powerful Entity Forms and Basic Forms are when it comes to exposing data to external users. But here's the common scenario many developers (including myself!) face.

“How do I make a field required or optional dynamically based on user selection?”

This blog will guide you step-by-step on how to make fields mandatory or non-mandatory using jQuery, with a pinch of Indian developer-style simplicity.

Real-Life Use Case

Let’s say we have a form where users select a Request Type. If the type is "Leave Request", we want to make Leave Reason mandatory. For other request types, it should be optional.

Sounds simple? It actually is – once you know the trick with jQuery!

jQuery

Prerequisites

Before we dive into code, make sure.

  • You have a Power Apps Portal with a Basic Form / Entity Form created.
  • You know how to inject JavaScript or jQuery into the form using the Custom JavaScript section.
  • jQuery is already loaded by the portal (don’t worry – it usually is by default).

Step-by-Step Guide

Step 1. Inject JavaScript or jQuery into Basic / Entity Forms.

Before using jQuery to control field behavior, we need to inject our script into the form. Power Apps Portals makes this easy using the Custom JavaScript section in the form configuration.

Here’s how to do it.

For Basic Form (Power Pages)

  • Open Power Pages Studio or Power Apps Portal Management App.
  • Navigate to Basic Forms (also called Forms sometimes).

Important Note. If you don’t see any forms under the “Basic Forms” section, it’s likely that your form hasn’t been added properly to the Power Pages site.

Make sure,

  • You have already created a Web Page in Power Pages.
  • You have added a Form component using your desired Dataverse Table and selected Insert → Form.
  • After doing this, your Basic Form record will appear automatically under the Portal Management App as well.

Once that’s done, the form is now officially associated with your portal website, and you can inject your JavaScript logic there.

JavaScript logic

Open the form where you want to apply the logic.

Apply

Go to Advanced Settings and Scroll down to find a section called Custom JavaScript.

Custom JavaScript

Paste your jQuery/JavaScript code into this text box.

For this click open Visual Studio Code Editor and paste your code,

Code Editor

Code

Code

Step 2. Add jQuery Script to Basic/Entity Form.

Open your Basic Form or Entity Form in Power Apps Portal Management, scroll to the bottom, and find the Custom JavaScript section.

Paste the following code (replace field names with yours)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function () {
    jQuery(document).ready(function () {
        function toggleLeaveReasonRequired() {
            var leaveTypeLabel = jQuery('#crdbc_leavetype_name').val();
            console.log("Selected Leave Type Label:", leaveTypeLabel);

            if (leaveTypeLabel && leaveTypeLabel.trim().toUpperCase() === 'SICK') {
                // Make field required
                jQuery("label[for='crdbc_leavereason']")
                    .addClass('required')
                    .css('color', 'red'); // Make label red

                jQuery('#crdbc_leavereason')
                    .attr('required', true)
                    .css({
                        'border': '2px solid red',
                        'background-color': '#ffe6e6'
                    }); // Highlight the textbox red
            } else {
                // Remove required and styling
                jQuery("label[for='crdbc_leavereason']")
                    .removeClass('required')
                    .css('color', ''); // Reset label color

                jQuery('#crdbc_leavereason')
                    .removeAttr('required')
                    .css({
                        'border': '',
                        'background-color': ''
                    }); // Reset box style
            }
        }

        toggleLeaveReasonRequired();

        jQuery('#crdbc_leavetype').on('change blur', function () {
            setTimeout(toggleLeaveReasonRequired, 300);
        });
    });
})();
</script>

Click Save and Clear Cache (important!).

For Entity Form (Classic Dynamics 365 Portals)

  • Open the Portal Management App.
  • Go to Entity Forms from the left navigation.
  • Open the specific Entity Form record.
  • Scroll down to find the Custom JavaScript field.
  • Paste your jQuery/JavaScript code here.
  • Save the record and refresh the portal cache (from the Portal Admin Center or using /_services/about > “Clear cache”).

How Do I Know jQuery is Already Available?

No worries here – by default, Power Apps Portals automatically loads jQuery, unless someone has manually removed it (which is rare).

To double-check

  • Open your form on the live portal in a browser.
  • Open Developer Tools (F12) and go to the Console tab.

Type: typeof jQuery

  • If it returns the function: jQuery is available
  • If it returns undefined: jQuery is missing (which is very unlikely unless the portal is heavily customized)

Pro Tip

Don’t use <script> tags in the Custom JavaScript section. Just paste raw JavaScript code. The portal automatically wraps it inside a <script> tag at runtime.

Step 3. Save and Test.

  • Save your Basic Form / Entity Form.
  • Clear your browser cache or do a hard reload (Ctrl+F5).
  • Test the functionality.

Now, when you choose "Leave Request", the Leave Reason field becomes required. For other types, it becomes optional.

Normal Form before selecting Leave Type,

Leave Type

After selecting Leave Type “SICK”

SICK

Little Tips for Fellow Developers

  • Use browser Inspect Element to debug field IDs if things don’t work right away.
  • Option Set values are stored as integer codes, not text. You can get them from the form metadata or use console.log() for debugging.
  • Always test with both the Create and Edit modes of the form.

Conclusion

Working with mandatory and non-mandatory logic in Power Apps Portal forms might feel tricky initially, but with a little jQuery magic, it's actually straightforward. Whether you’re customizing for clients or building internal portals, this technique will save you time and impress your team. 🇮🇳

What's Next?

In future articles, I’ll show how to,

  • Add conditional sections to forms.
  • Show/hide form tabs based on selection.
  • Call custom APIs from portal forms.

Stay tuned, and don’t forget to like & share if you found this useful. Happy Coding!

Membership not found