Power Platform Community Forum Thread Details

Filter dropdown based on choice from another column

I have a solution with a multistep form to create an orderlist. I have a loopup field "Ordertype" that has a choice column called "Storage values". In the orderlist form, I have a lookup column "Storage type" that renders as a dropdown. The names in this dropdown is the same as the values of the storage values. When I choose an ordertype, I want the field "Storage type" to only show the fields that matches the values choosen for the selected ordertype for storage values.

In my model driven app, I use

var orderControl = formContext.getControl("ino_order");
orderControl.addPreSearch(function() {
orderControl.addCustomFilter(filter);
});

where the filter is in format

But how do I do this in Power Pages?

Categories:

General topics

I figured it out at last - with som help. The solution was a bit more complex than with the model driven app, but here is the code if anyone is interested =)

$(document).ready(function() {
$('#order').change(function() {
var orderType = $("#order").find(":selected").val();
var orderName = $("#order").find(":selected").text();
getordersData(orderType);
});
(function(webapi, $){
function safeAjax(ajaxOptions) {
var deferredAjax = $.Deferred();

shell.getTokenDeferred().done(function (token) {
// add headers for ajax
if (!ajaxOptions.headers) {
$.extend(ajaxOptions, {
headers: {
"__RequestVerificationToken": token
}
});
} else {
ajaxOptions.headers["__RequestVerificationToken"] = token;
}
$.ajax(ajaxOptions)
.done(function(data, textStatus, jqXHR) {
validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
}).fail(deferredAjax.reject); //ajax
}).fail(function () {
deferredAjax.rejectWith(this, arguments); // on token failure, pass the token ajax and args
});

return deferredAjax.promise();
}
webapi.safeAjax = safeAjax;
})
(window.webapi = window.webapi || {}, jQuery);

// Function to get data from Dataverse table "orders"
function getRestrictionFilter(orderType, storagetypeData) {
webapi.safeAjax({
type: "GET",
url: "/_api/orders?$select=ino_restrictions&$filter=orderid eq '"+ orderType + "'",
contentType: "application/json",
headers: {
"Prefer": "odata.include-annotations=*"
},
success: function (restrictionData, textStatus, xhr) {
var restrictionResults = restrictionData.value[0].ino_restrictions;
if(restrictionResults !== undefined) {
var restrictionArray = restrictionResults.split(",");
var storagetypeResults = storagetypeData;
var dropdown = $('#storagetype');
dropdown.empty();
dropdown.append($('<option>', {
value: "",
text: "Velg sisterne"
}));
for (var i = 0; i < storagetypeResults.value.length; i++) {
var storagetypeNameValue = storagetypeResults.value[i].storagetypename;
var storagetypeIdValue = storagetypeResults.value[i].storagetypeid;
if(restrictionArray.indexOf(storagetypeNameValue) !== -1) {
dropdown.append($('<option>', {
value: storagetypeIdValue,
text: storagetypeNameValue
}));
}
}
return restrictionArray;
} else {
return [];
}
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr);
}
});
}
function getordersData(orderType) {
webapi.safeAjax({
type: "GET",
url: "/_api/storagetypes?$select=storagetypeid,storagetypename",
contentType: "application/json",
headers: {
"Prefer": "odata.include-annotations=*"
},
success: function (storagetypeData, textStatus, xhr) {
console.log(storagetypeData);
getRestrictionFilter(orderType, storagetypeData);
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr);
}
});
}

});

Quick Links