How to refresh controls after a model has changed?

Question

I build a web application using SplitApp, and I have a problem with my sap.m.Select controls.

On page1.view I have 2 select controls, as it is shown here (my thanks to Allen for his help). These select controls are populated from a database using ajax call.

The problem is that when I add a new project to one of the firms on page2.view, I can't make project select control on page1.view to refresh.

For example, if I go to page1.view, select firm3 in the first select control, then go to page2.view and add project4 to firm3 and then navigate back to page1.view, I still see firm 3 is selected and there are only 3 projects available in the second select control. But if I select any other firm and then select firm3 again, I will see the 4th project in selection menu.

So, the question is how do I refresh my project select control so I could see the newly added project without re-selecting a firm?

Answer 1

myODataModel.refresh(true) should work.

If it still does not work (as for me), you can use this workaround: Fill your model with an empty array or object before you fill it with new stuff.

var ajaxSuccess = function(newArray) {
    myODataModel.setData([])
    myODataModel.setData(newArray)
}

This definitely refreshes the control.

Answer 2

You need to call refresh() of JSONModel. Please run and check the code snippet.

 <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>

<script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
        <layout:VerticalLayout id="vl">
            <Button press="handlePress" text="Add Dummy Project to Firm1"/>
            <DropdownBox id="db1" items="{/firms}" change="onchange">
                <items>
                    <core:ListItem key="{name}" text="{name}" />
                </items>
            </DropdownBox>
            <DropdownBox id="db2" items="{namedmodel>/projects}">
                <items>
                    <core:ListItem key="{namedmodel>name}" text="{namedmodel>name}" />
                </items>
            </DropdownBox>
        </layout:VerticalLayout>
    </mvc:View>
</script>


<script>
    sap.ui.controller("my.own.controller", {

        onInit: function() {
            var data = {
                "firms": [{
                    "name": "firm1",
                    "projects": [{
                        "name": "firm1project1"
                    }, {
                        "name": "firm1project2"
                    }, {
                        "name": "firm1project3"
                    }]
                }, {
                    "name": "firm2",
                    "projects": [{
                        "name": "firm2project1"
                    }, {
                        "name": "firm2project2"
                    }, {
                        "name": "firm2project3"
                    }]
                }, {
                    "name": "firm3",
                    "projects": [{
                        "name": "firm3project1"
                    }, {
                        "name": "firm3project2"
                    }, {
                        "name": "firm3project3"
                    }]
                }, {
                    "name": "firm4",
                    "projects": [{
                        "name": "firm4project1"
                    }, {
                        "name": "firm4project2"
                    }, {
                        "name": "firm4project3"
                    }]
                }]
            };

            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData(data);
            sap.ui.getCore().setModel(oModel);
            //set initial values for second dropdown box
            var oModel2 = new sap.ui.model.json.JSONModel();
            oModel2.setData(data.firms[0]);
            //using named data model binding for second dropdown box
            this.byId("db2").setModel(oModel2, "namedmodel");


        },
        //event handler for first dropdown box selection change
        onchange: function(oEvent) {
            var bindingContext = oEvent.mParameters.selectedItem.getBindingContext();
            var oModel = oEvent.getSource().getModel();
            var firmData = oModel.getProperty(bindingContext.sPath);
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData(firmData);
            this.byId("db2").setModel(oModel, "namedmodel");

        },
        
        handlePress:function(oEvent) {
          //Add a dummy project to firm1
            var projectDropDown = this.byId("db2");
            var oModel = projectDropDown.getModel("namedmodel");
            oModel.oData.projects.push({"name":"dummy project"});
            oModel.refresh();
        }


    });


    var myView = sap.ui.xmlview("myView", {
        viewContent: jQuery('#view1').html()
    }); // 
    myView.placeAt('content');
</script>



<body class='sapUiBody'>
    <div id='content'></div>
</body>