Power Platform Community Forum Thread Details

Need help with Complex Cascading Dropdowns

I have a complex scenario and I was wondering if someone can point me in the right direction on how to proceed on this.

I have a dropdown field called "Criteria". This lists about 7 different criteria.

I have a lookup field (rendered as dropdown) called criteria questions. This is a lookup to a table called 'Criteria Questions' which has a list of questions for all criteria. Assume 10 questions for each criteria, so this table has approx 70 records.

I have another lookup field (again rendered as dropdown) called responses. This is a lookup to a table called 'Criteria Responses' which has list of respones for each possible question. Assume 4 responses for each question, so this table has around 280 rows.

This is what I want to achieve:

When a criteria is chosen, I want to reset the Criteria questions dropdown to show only the questions pertaining to that criteria. Responses dropdown should be blank.

Once a criteria question is chosen, the responses should filter to show only the 4 responses for the criteria question.

I followed this article:
https://www.dancingwithcrm.com/custom-lookup-filtering-powerapps-portal/

and was able to filter the criteria questions dropdown to show only the questions relevant to the chosen criteria. Till this point everything is fine.

My issue is this:
When I am loading an existing record with the criteria, criteria questions and responses already filled out, because I am recreating the dropdowns (lookup rendered as dropdown), the existing value on the record gets wiped out. If I do not clear out the dropdowns, they show all 70 and 280 records, which is incorrect.

Is there any way to load the record, apply the filter at the backend and show the already chosen respones?

I tried copying existing values from the field and applying them back again, but here I got stuck in another issue. For some reason I am not able to repopulate the option set. This is my code:

CODE TO STORE CURRENT VALUE IN THE LOOKUP (RENDERED AS DROPDOWN) - NOT WORKING AS INTENDED
var currentGUID = $("#new_criteriaquestion").val(); -- this returns the guid correctly
var currentText = $("#new_criteriaquestion_name").val(); --- this returns "undefined"
var currentEntity = $("#new_criteriaquestion_entityname").val(); -- this returns the entity name correctly.

CODE TO FILTER CRITERIA QUESTIONS BASED ON CRITERIA AND RECREATE FILTERED DROPDOWN - WORKING
$.getJSON("/getCriteriaQuestions/?criteria=" + criteria, function (data)
{
if (data.results.length > 0)
{
let option = document.createElement("option");
option.value = "";
option.innerText = "";
$("#new_criteriaquestion").append(option);

//create option for each returned entity
data.results.forEach(element => {
let option = document.createElement("option");
option.value = element.GUID;
option.innerText = element.Name;
$("#new_criteriaquestion").append(option);
});
}
});

CODE TO REPOPULATE CURRENT VALUE IN THE LOOKUP (RENDERED AS DROPDOWN) - NOT WORKING AS INTENDED

$("#new_criteriaquestion_name").attr("value",currentText);
$("#new_criteriaquestion").attr("value",currentGUID);
$("#new_criteriaquestion_entityname").attr("value",currentEntity);

The code executes without any errors (except the part where new_criteriaquestion_name returns "undefined"), but I do not see the old value as the selected option on the dropdown.

What am I doing wrong, and is there a more elegant way of doing this ?

Categories:

Customize & extend

Hey @PortalNewbie thanks for posting the question.

Can you confirm that the field called "new_categoryquestion" is pointing to your Criteria field? Because your question talks about a Criteria, but your code uses Category.

Can you confirm that the fields your code is referring to actually exist on the page, by viewing your page source and looking for:
new_categoryquestion
new_categoryquestion_name
new_categoryquestion_entityname

If so, make sure that all fields you refer to are text inputs. If they are a select input, for example, you may want to use something like .children("option:selected").val(); or something similar which is best suited for getting values from those types of inputs.

I hope this helps?

selected-option-guid = $("#fieldname").val(); selected-option-text = $("#fieldname option:selected").text(); //set an option as selected $("#fieldname ").find('option[value="guid goes here"]').attr('selected','selected')

Quick Links