Data Binding not working

[Former Member]

We are trying to bind data from controller to view but for some reason We are unable to display data in the view.

The data in the model is loaded fine and if we set a timeout we can display the data in the view, but this isn't a good solution, it's a crap!!!!

An example of our code:

onInit: function() {     

   var jsonResults = new sap.ui.model.odata.ODataModel(app.loadData.getServiceUrl("OUR_SERVICE"),false,username,password);

   jsonResults.read(requestUri, {

                      async:true, success: function(oData,response){

                           if(!jQuery.isEmptyObject(oData,response)){

                              jsonOrderDetails.setData(oData) ;

                             sap.ui.getCore().setModel(jsonOrderDetails, "orderDetailModel");

                           }

                      },

                     error: function(response){

                         fallback(parameters,oController);

                     }

   });

},

onBeforeRendering: function() {

              setTimeout(function() {

                   panel.setModel(sap.ui.getCore().getModel("orderDetailModel"));   

                  table.setModel(sap.ui.getCore().getModel("orderDetailModel")); },

              800);

}

[Former Member · Accepted solution]

Thanks Oliver for your reply.

In the View

createContent : function(oController) {

panel.setTitle(new sap.ui.core.Title({level:sap.ui.core.TitleLevel.H1}).bindProperty("text",{path: "/OrderNr", formatter: function(fValue){ return "Order details for order " + fValue}})); }

In the controller:

onInit: function() {    

     var jsonResults = new sap.ui.model.odata.ODataModel(app.loadData.getServiceUrl("OUR_SERVICE"),false,username,password);

     var requestUri = "OR_URI";

     busyDialog = new sap.m.BusyDialog('busyDialog',{text:'Loading...'}).open();

     jsonResults.read(requestUri, {

          async:true,

          success: function(oData,response){

          if(!jQuery.isEmptyObject(oData,response)){

               jsonOrderDetails.setData(oData) ;

               sap.ui.getCore().setModel(jsonOrderDetails, "orderDetailModel");

          //callback(parameters,oController); busyDialog.destroy(); } },

           error: function(response){

               //fallback(parameters,oController);

               busyDialog.destroy();

          } });

     if (sap.ui.getCore().getModel("orderDetailModel")==undefined){

          sap.ui.getCore().setModel(jsonOrderDetails, "orderDetailModel");

     }

},

onBeforeRendering: function() {

     viewId = this.oView.getId();

     panel=this.getView().byId(viewId + "--panel"); 

      setTimeout(function() {                 

          panel.setModel(sap.ui.getCore().getModel("orderDetailModel"));                 

           table.setModel(sap.ui.getCore().getModel("orderDetailModel")); },             

     800);

}

This code works, the data in the model and in the binding are ok, but without the setTimeout function in the screen we don't see the new changes.

Thanks a lot,

[former_member195440 · Accepted solution]

Hi,

Thanks for your reply with a longer snippet. My view is still the same with the extended code however.

The reason you need to place the code in the timeout is because the network call is made asynchronously to retrieve your data and it won't have completed by the time the view is to be rendered and the onBeforeRendering event is called. The problem with doing this is that the network call time cannot be accurately predicted, it is best to do this on the success callback.

I would however simply change the binding of the table to add "orderDetailModel>" to the beginning of the current binding and let SAPUI5 do all the work for you. If the binding is against the correct model, the framework will take care of refreshing the views when the data is updated.

Oli

[Former Member]

Thanks Oliver for your time. We have fixed the problem. We have implemented a callback function when we call to our Odata service and in this function we have made the binding. Thanks,

[former_member195440]

Hi,

I am not sure why you are using a JSON model as a result of an OData read call. Just set the odata model on the core/component and use that?

Second point I notice is that you have named your model. You use the name "orderDetailModel" in the init function but an undefined (no string) in the setter that works in the timeout code.

If you want to name your model, you need to adjust the binding in the view so that it names the model. If the binding was "/data" it should be "orderDetailModel>/data" if this makes sense?

Hope this helps. Let me know if you have any questions.

Oli

[Former Member]

We knows that we can set the odata model to the component but we need to use a JSON model. The binding works fine but the real problem is We don't see the data refreshed in the table. Thanks,

[former_member195440]

I guess I am slightly confused by your snippet. The first section the code, that gets the data and sets the model on the core, is naming the model as "orderDetailModel":

sap.ui.getCore().setModel(jsonOrderDetails, "orderDetailModel");

So the model needs to be referenced in your view with "orderDetailModel>attribute".

But in your timeout code (which you say works), the model is not named. The function setModel is passed only the model object itself and not a second parameter of a string to name it:

panel.setModel(sap.ui.getCore().getModel("orderDetailModel"));

So to correctly display this data, the binding in the view would need to be "attribute" without the "name>" part.

Now you also mention using components. If you use components, best practice is to set the model on the component rather than the sap.ui.core. And by default the views in the component cannot access the core model using standard bindings. However this can be allowed if you wish by passing the parameter propagateModel to true when you create your component container.

For example:

      new sap.m.Shell("Shell", {
            showLogout : false,
            app : new sap.ui.core.ComponentContainer({
                name : 'my.component',
                propagateModel: true
            })
        }).placeAt('content');

Without a working example with the issue, it can be hard to get to the root cause of your problem. There could be something else at play here. If you can, please try and share a small sample of your source code that exhibits this behaviour.

Thanks,

Oli

[Former Member]

We tried with sap.ui.getCore().getModel("orderDetailModel").refresh(true) but without the timeout function the table doesn't refresh.

[mauriciolauffer]

Just try to refresh everything at the end of the "success" function.

e.g.

jsonOrderDetails.refresh(true);

[former_member189945]

Hi Jose,

You can also set the model to the View on onInit after initializing it:

this.setModel(jsonResults);

Model doesn't have to be set to the individual controls (panel, table), although it can.

Regards,

Kimmo

[former_member189945]

Another option is to setModel to the controls inside success callback:

success: function(oData,response){
     if(!jQuery.isEmptyObject(oData,response)){
          jsonOrderDetails.setData(oData) ;
          sap.ui.getCore().setModel(jsonOrderDetails, "orderDetailModel");
          panel.setModel(sap.ui.getCore().getModel("orderDetailModel"));    
          table.setModel(sap.ui.getCore().getModel("orderDetailModel"));
     }

If needed call jsonOrderDetails.refresh() to update the bindings.

Regards,

Kimmo