CODEWITHSUNDEEP
sapui5
kuljit k
kuljit k

Reputation: 291

How to populate a second dropdown list on the basis of first one's input in sapui5

my code is 

var oItemsData = {
              items: [
                { text: "abc", text1: "opq"},
                { text: "abc", text1: "nhm"},
                { text: "def", text1: "rst" },
                { text: "ghe", text1: "uvw" },
                { text: "ijk", text1: "xyz" },
                { text: "def", text1: "uhg" },
                { text: "lmn", text1: "abc" }
              ]
            };
var oItemsModel = new sap.ui.model.json.JSONModel(oItemsData);
sap.ui.getCore().setModel(oItemsModel, "items");
new sap.ui.commons.Label({text:"FirstOne"}),
                    new sap.ui.commons.DropdownBox({value:"",required: true,
                        items: { 
                            path: "items>/items",
                            template: new sap.ui.core.ListItem({
                              text: { path: "items>text" }//how to filter
                            }) 
                          }
                    }),
                    new sap.ui.commons.Label({text:"SecondOne"}),
                    new sap.ui.commons.DropdownBox({value:"",required: true,
                        items: { 
                            //populate on the basis of 1st one's input
                            }) 
                          }
                    })

I have two questions. 1. How to filter out multiple entries in the first dropdown list? 2. how to populate the second list on the basis of first input?

Upvotes: 1

Views: 1125

Answers (1)

qmacro
qmacro

Reputation: 3105

You have two dropdown lists and the values in the second are dependent on the first. The data is a little bit untidy and presents you with both a de-duplicating problem for the first list and a matching problem for the second list.

You could consider avoiding those problems altogether by cleaning up the data so that it better fits your purpose?

Here's an example (on the train on an Android tablet so I can't test it fully at the moment)

Step 1: De-duplicate and organise as required:

var organised = oItemsData.items.reduce(function(m, i) {
  var l = m[i.text] || [];
  l.push(i.text1);
  m[i.text] = l;
  return m;
}, {});

This should result in something like this:

{ abc: [ 'opq', 'nhm' ],
  def: [ 'rst', 'uhg' ],
  ghe: [ 'uvw' ],
  ijk: [ 'xyz' ],
  lmn: [ 'abc' ] }

Step 2: Create the data structure that lends itself better to the task at hand, and use that in the data that is set in the model:

oItemsData.items = Object.keys(organised).map(function(key) {
  return {
    text: key,
    text1: organised[key]
  };
})

The structure created for oItemsData.items will look something like this: 

[ { text: 'abc',
    text1: [ 'opq', 'nhm' ] },
  { text: 'def',
    text1: [ 'rst', 'uhg' ] },
  { text: 'ghe', text1: [ 'uvw' ] },
  { text: 'ijk', text1: [ 'xyz' ] },
  { text: 'lmn', text1: [ 'abc' ] } ]

Upvotes: 3

Related Questions