Skip to main content

Notifications

Power Pages - General Discussions
Suggested answer

Cascading drop-down menus in a PowePages website?

Like (1) ShareShare
ReportReport
Posted on 2 Sep 2024 15:12:37 by 106
I am trying to create a cascading drop-down menus in PowerPages. I know this can be done in a PowerApps model driven form, but this functionality goes away when it's inserted into PowerPages.
 
This functionality would be for instance if I select France as a country, in the City field/ lookup below, I would get all the cities in France.
 
Does anyone even know if this can be done? Apparently nobody has asked this question before, as I am struggling to find a solution.
Categories:
  • GWham Profile Picture
    GWham 54 on 05 Sep 2024 at 10:16:50
    Cascading drop-down menus in a PowePages website?
    You would need to rely on JavaScript as there is nothing out the box for that as like PowerApps.
     
    However, you could try to use the WebAPI to get the results and remove/filter them each time you change your first dropdown e.g. country.
     
    I've not tested it, so let me know if you figure it out.
    $(document).ready(function () {
        $("#countryField").change(function () {
            var countryId = $(this).val();
    
            if (countryId) {
                var query = `/api/data/v9.2/new_cities?$filter=_new_country_value eq ${countryId}`; 
                $.ajax({
                    url: query,
                    type: "GET",
                    headers: {
                        "OData-MaxVersion": "4.0",
                        "OData-Version": "4.0",
                        "Accept": "application/json",
                        "Content-Type": "application/json",
                        "Prefer": "odata.include-annotations=\"*\""
                    },
                    success: function (data) {
                        var cityDropdown = $("#cityField");
                        cityDropdown.empty();
                        $.each(data.value, function (index, item) {
                            cityDropdown.append(
                                $("<option></option>")
                                    .val(item.new_cityid) // City ID
                                    .text(item.new_cityname) // City Name
                            );
                        });
                    },
                    error: function (err) {
                        console.log("Error fetching cities: ", err);
                    }
                });
            }
        });
    });
    • new_cities is the logical name of your cities entity.
    • _new_country_value is the lookup field that links cities to a country. Adjust this according to your entity schema.
    • new_cityid and new_cityname are placeholders for the actual field names of the city entity in Dataverse. Replace these with the correct logical names.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

End of Year Newsletter…

End of Year Community Newsletter…

Tuesday Tip #12 Start your Super User…

Welcome to a brand new series, Tuesday Tips…

Tuesday Tip #11 New Opportunities…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 144,696

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,456

Leaderboard
Loading started