Skip to Content
-2

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

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

        // );
screen.jpg (24.7 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

1 Answer

  • Best Answer
    Posted on Aug 02, 2020 at 11:48 AM

    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
            //}//);
    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.