Struggling with Filters on Select - Fiori App

[pghoshroy]

Dear Experts,

I hope this message finds you well.

I am currently working on a project that involves two dropdown menus. The first dropdown, Box 1, displays a list of manufacturers, such as A and B. The second dropdown, Box 2, presents the corresponding models for each manufacturer, for instance, A1, A2, A3 for manufacturer A, and B1, B2, B3 for manufacturer B.

Upon initial load, Box 1 defaults to manufacturer A, and Box 2 contains all models (A1, A2, A3, B1, B2, B3), with A1 being the pre-selected model.

My objective is to dynamically filter the options in Box 2 based on the selection made in Box 1. I attempted to implement this functionality using the following code snippet, but it was unsuccessful:

Nevertheless, I managed to achieve the desired outcome by hardcoding the filter value as shown below:

items = {
path: '/SprayModelSet',
filters: [{ path: 'SprayMachineMake', operator: 'EQ', value1: 'A' }],
sorter: { path: 'SprayMachineModel' }
};

This code effectively narrows down the options in Box 2 to A1, A2, A3, with A1 as the default selection, while excluding the B series models.

However, I am encountering difficulties in making the filter dynamic, such that the selected value from Box 1 is passed as a filter to Box 2.

Could you please provide guidance on how to achieve this dynamic filtering?

Thank you for your assistance.

Warm regards,

Pablo Ghosh Roy

[sajid-khan]

Bindings of selectedKey properties are bit confusing to me. Are these bound to a JSONModel with two-way binding? Further, have you considered using Javascript to update item binding of 2nd select box when key of 1st select box is changed?

[pghoshroy]

Greetings...

[pghoshroy]

Greetings...

[pghoshroy]

Greetings...

[burakozctn · Accepted solution]

Hi,

For dynamically, the select has change event. Please try below code sample in the event.

var oSelect1 = oEvent.getSource();
var sSelectedKey = oSelect1.getSelectedKey();

var Filter = [new Filter("YOUR_FIELD", FilterOperator.EQ, sSelectedKey )];

var oSelect2 = this.byId("YOUR_SECOND_DROPBOX_ID"),
oTemplate = oTable.getBindingInfo("items").template;
oSelect2 .unbindAggregation("items");

oSelect2 .bindItems({
path: "/YOUR_ENTITYSET",
template: oTemplate,
filters: aFilter,
events: {
dataRequested: function() {},
dataReceived: function() {}
}});

[pghoshroy · Accepted solution]

Greetings, thank you for the suggestion. The code is helpful; but the problem is when the Select 2 first loads, it will still show all the 6 values irrespective of the value selected in Control 1. The logic above works when I have selected a new value in Select 1 which will of course trigger the change event hence binding new items to Select 2. What I was trying basically is when the Select 1 & 2 are initially loaded on screen; using the expression binding in some way it will send a request to back end with the filter so that it gets the filtered list. Hope I am making sense :).

[burakozctn · Accepted solution]

Please try this;

//For initially

onAfterRendering: function() {

var that = this;

var oModel = this.getView().getModel();

oModel.attachRequestCompleted(function(oEvent) {

var oSelect1 = that.byId("select1");

that._bindSelect2(oSelect1.getSelectedKey());

});

},

// For dynamically

onChange: function(oEvent) {

var oSelect1 = oEvent.getSource();

this._bindSelect2(oSelect1.getSelectedKey());

},

_bindSelect2: function(sKey) {

// use bindItems code for select2

}