Cascading drop-down menus in a PowePages website?

(1) Share

Report

Posted on by elfreddos

104

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:

General

All responses (1)

Answers (0)

GWham 39 on at

Like (0)

Report
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.