sapui5 input validation using conditional combobox binding

Tweet

Pre-requisites

1.sapui5 framework

2.basic javascript knowledge

What we are going to do is simple.We have two comboboxes.Based on first combobox value second combobox values should change.ie when value changes second combobox binding should change(dynamic binding).


Steps

1.Our odata should look like this.Here iam using custom data.Set data to the core so we can access it.

var oModel = new sap.ui.model.json.JSONModel({
    "Data": [{
        "no": 10,
        "key": 0,
        "sub": [{
            "subno": 100
        }, {
            "subno": 101
        }, {
            "subno": 102,
        }]
    }, {
        "no": 11,
        "key": 1,
        "sub": [{
            "subno": 110
        }, {
            "subno": 111
        }, {
            "subno": 112
        }]
    }, {
        "no": 11,
        "key": 2,
        "sub": [{
            "subno": 110
        }, {
            "subno": 111
        }, {
            "subno": 112
        }]
    }]
});
sap.ui.getCore().setModel(oModel, "myModel");

2.Create first combobox and bind data to it.Here is the tricky part.In the selectionchange event of combobox call a function for binding the secondcombo passing the selected key as parameter.

jQuery.sap.require("sap.m.ComboBox");
rComboItem = new sap.ui.core.ListItem("itemsr", {
    key: '{myModel>key}',
    text: '{myModel>no}'
});
numCombo = new sap.m.ComboBox("numCombo", {
    items: {
        path: "myModel>/Data",
        template: rComboItem,

    },

    selectionChange: function(evt) {
        var b = "";
        b = evt.getParameter("selectedItem").getKey();
        alert(b);
        subComboBind(b);
    }

});

3.Function for binding second combobox.

   function subComboBind(b) {

       sap.ui.getCore().getControl("subCombo").bindAggregation("items", {
           path: "myModel>/Data/" + b + "/sub",
           template: bComboItem,
       });
   }

4.You Should set initial binding of second combo by calling function passing 0 as parameter

 bComboItem = new sap.ui.core.ListItem({
    text: '{myModel>subno}'
});

subCombo = new sap.m.ComboBox('subCombo', {});
subComboBind(0);

5.All done.See it in action.I have shared jsbin code.(try to open in chrome if mozilla doesn't work)

Conditional ComboBox Binding

If you enjoyed this post, Please Share!!