Dynamic binding to Selcet control is not working on event of Icon tab filter

[former_member682200]

The requirement is to populate drop down/Select control based on Icon tab filter value and the values should change dynamically. I have tried the below ways but dropdown is not loading on Icon tab filter change. Please suggest. The below is my JSON. Attached is the desired screen. please suggest.

var data = {
            "Data": [{
                "env": "Sandbox",
                "cycleDetails": [{
                    "cycleName": "CS1"
                }, {
                    "cycleName": "CS2"
                }, {
                    "cycleName": "CS3"
                }, {
                    "cycleName": "CS4"
                }, {
                    "cycleName": "CS5"
                }, {
                    "cycleName": "CS6"
                }]
            }, {
                "env": "QA",
                "cycleDetails": [{
                    "cycleName": "CQ1"
                }, {
                    "cycleName": "CQ2"
                }, {
                    "cycleName": "CQ3"
                }, {
                    "cycleName": "CQ4"
                }, {
                    "cycleName": "CQ5"
                }, {
                    "cycleName": "CQ6"
                }]
            }, {
                "env": "UAT",
                "cycleDetails": [{
                    "cycleName": "CUAT1"
                }, {
                    "cycleName": "CUAT2"
                }, {
                    "cycleName": "CUAT3"
                }, {
                    "cycleName": "CUAT4"
                }, {
                    "cycleName": "CUAT5"
                }, {
                    "cycleName": "CUAT6"
                }]
            }, {
                "env": "PROD",
                "cycleDetails": [{
                    "cycleName": "CP1"
                }, {
                    "cycleName": "CP2"
                }, {
                    "cycleName": "CP3"
                }, {
                    "cycleName": "CP4"
                }, {
                    "cycleName": "CP5"
                }, {
                    "cycleName": "CP6"
                }]
            }]
        };                                                                                                   env' is mapped to Icon tab filter and 'cycleDetails' should populate to 'From' dropdown.              View code                                                                                            <IconTabBar expanded="true" id="idTabEnv" items="{/Data}"  expandable="false" select="onSelectEnvironment"
                    class="envHistory">
                    <items>
                        <IconTabFilter text="{env}" key="{env}">
                            <f:SimpleForm id="idCategoryForm" editable="true" layout="ResponsiveGridLayout">
                                <f:content>
                                    <Label text="Release Category" design="Bold">
                                        <layoutData>
                                            <l:GridData span="XL2 L2 M2 S6"/>
                                        </layoutData>
                                    </Label>
                                    <Select width="30%" id="idrelCategory" items="{path: 'releaseCategory>/relCategory', templateShareable:true}" change="onrelCategory"
                                        forceSelection="false">
                                        <core:Item key="{releaseCategory>key}" text="{releaseCategory>title}"/>
                                    </Select>
                                    <Label text="From" design="Bold">
                                        <layoutData>
                                            <l:GridData span="XL2 L2 M2 S6"/>
                                        </layoutData>
                                    </Label>
                                                                        <Select width="20%" id="idFrom" items="{path: 'namedmodel>/cycleDetails', templateShareable:true }" >
                                        <core:Item key="{namedmodel>cycleName}" text="{namedmodel>cycleName}"/>
                                    </Select>
                                                                            <Label text="To" design="Bold">
                                        <layoutData>
                                            <l:GridData span="XL2 L2 M2 S6"/>
                                        </layoutData>
                                    </Label>
                                    <Select width="20%" id="idTo">
                                        <core:Item/>
                                    </Select>
                                    <Button width="20%" text="Submit" press="onPress"/>
                                </f:content>
                            </f:SimpleForm>
                                                        </IconTabFilter>
                    </items>
                </IconTabBar>                                                                          Init()                                                                                                var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(data);
        sap.ui.getCore().setModel(oModel);
        //sap.ui.getCore().setModel(oModel,"oModel1");
        this.byId("idTabEnv").setModel(oModel);
        var oModel2 = new sap.ui.model.json.JSONModel();
        oModel2.setData(data.Data[0]);
        //sap.ui.getCore().setModel(oModel2, "namedmodel");
        this.byId("idFrom").setModel(oModel2, "namedmodel");                                             Controller on changeEvent of Icon Tab filter. I have tried Bind Aggregation also.                         onSelectEnvironment: function (oEvent) {
        debugger;

  
        var bindingContext = oEvent.getParameters().selectedItem.getBindingContext();

        var oModel = oEvent.getSource().getModel();

        var countryData = oModel.getProperty(bindingContext.sPath);

        var oModel1 = new sap.ui.model.json.JSONModel();

        oModel1.setData(countryData);

        // sap.ui.getCore().setModel(oModel1, "namedmodel");
        this.byId("idFrom").setModel(oModel1, "namedmodel");
        // var oItemSelectTemplate = new sap.ui.core.Item({
        //  key: "{namedmodel>cycleName}",
        //  text: "{namedmodel>cycleName}"
        // });
        // this.byId("idFrom").bindAggregation("items", {
        //      path: "namedmodel>/cycleDetails",
        //      template: oItemSelectTemplate,
        //      templateShareable: true
        //  }

        // );

[junwu · Accepted solution]

for the from, you don't need any code to manipulate the model,

this is enough
<Selectwidth="20%" id="idFrom" items="{path: 'cycleDetails', templateShareable:true }" ><core:Item key="{cycleName}" text="{cycleName}"/></Select>

remove all those.

var oModel2 =newsap.ui.model.json.JSONModel();
        oModel2.setData(data.Data[0]);//sap.ui.getCore().setModel(oModel2,"namedmodel");
        this.byId("idFrom").setModel(oModel2, "namedmodel");                                             Controller on changeEvent of Icon Tab filter. I have tried Bind Aggregation also.                         onSelectEnvironment: function (oEvent) {
        debugger;

  
        var bindingContext = oEvent.getParameters().selectedItem.getBindingContext();

        var oModel = oEvent.getSource().getModel();

        var countryData = oModel.getProperty(bindingContext.sPath);

        var oModel1 =newsap.ui.model.json.JSONModel();

        oModel1.setData(countryData);//sap.ui.getCore().setModel(oModel1,"namedmodel");
        this.byId("idFrom").setModel(oModel1, "namedmodel");// var oItemSelectTemplate =newsap.ui.core.Item({//key:"{namedmodel>cycleName}",//text:"{namedmodel>cycleName}"//});// this.byId("idFrom").bindAggregation("items", {//      path:"namedmodel>/cycleDetails",//      template: oItemSelectTemplate,//      templateShareable: true
        //}//);

[former_member682200 · Accepted solution]

Thank you. I spend lot of time to make binding work.

Is it specific to Icon tab Filter? Based on Key it automatically populates the dependent dropdown?

Please clarify.

[junwu · Accepted solution]

no, you just have to understand how binding works.