Skip to Content
-2
Aug 02, 2020 at 11:30 AM

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

94 Views

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
        //  }

        // );

Attachments

screen.jpg (24.7 kB)