Cascading dropdowns in Entity Forms

Cascading dropdowns in Power Pages (formerly Power Apps Portals) allow you to filter the options in one dropdown based on the selection made in another. This is common in scenarios like:

Country → State → City
Category → Sub-category
Department → Roles

Components Involved

Dataverse Tables with proper relationships
Entity Forms (Basic Forms) in Power Pages
JavaScript (for client-side interaction)

Prerequisites

Tables must be related using lookup columns.
Both dropdown fields should be added to the Entity Form.
Permissions (Table Permissions) must allow read access.

Step-by-Step Implementation

Example: Country → State Dropdown

1. Setup in Dataverse

Table: Country
Table: State with a lookup column to Country

2. Configure the Entity Form

Add both Country and State fields.
Set State as a dropdown (lookup).

3. Add JavaScript to Filter Dropdown Options

Navigate to Portal Management App > Entity Forms and add the following JavaScript in the form’s “Custom JavaScript” section:

$(document).ready(function () {
    $('#country').change(function () {
        var countryId = $(this).val();
        if (countryId) {
            fetchStates(countryId);
        } else {
            $('#state').empty().append('<option value="">Select State</option>');
        }
    });

    function fetchStates(countryId) {
        // Clear existing options
        $('#state').empty().append('<option>Loading...</option>');

        // Fetch states filtered by selected country
        $.ajax({
            type: "GET",
            url: "/_api/states?$filter=_countryid_value eq " + countryId,
            headers: {
                "Accept": "application/json"
            },
            success: function (data) {
                $('#state').empty().append('<option value="">Select State</option>');
                data.value.forEach(function (item) {
                    $('#state').append(
                        $('<option>', {
                            value: item.stateid,
                            text: item.name
                        })
                    );
                });
            },
            error: function () {
                $('#state').empty().append('<option>Error loading states</option>');
            }
        });
    }
});

Replace #country and #state with actual control IDs. You can find them by inspecting the form on the live portal or using custom control IDs.

Pro Tips

Dataverse FetchXML can also be used behind the scenes if you’re using subgrids or complex logic.
Use Web Roles and Table Permissions to ensure the portal can fetch child records.
Use Liquid + JavaScript combo for even more dynamic setups.

Alternative: Use Power Automate

If your scenario requires more backend logic or integration, use a Power Automate flow triggered by form submission and store filtered values in Dataverse for future use.