UI5
No Comments

How to Wait for Until an OData or JSON Model Request Is Loaded in SAP UI5?

An alarm.

It does not matter if you would like to wait with some code execution until an OData model read request is fully executed or a JSON file is loaded – the mechanisms to wait for an OData model or JSON model until it loaded its data remains the same.

For example, you bound an element to an SAP UI5 control, executed a manual OData read request, or manually loaded a JSON file into a JSON model.

Now you would like to know when exactly the model has finished its request and therefore, has finished loading the data to execute right afterward some code.

For example, you bound from an OData service an element to an SAP UI5 control …

<!-- in your XML view -->

...

<!-- element Foo bound to text control -->
<Text text="{odataModel>/Foo}"/>

<!-- how to know when the Foo element is fully loaded? -->
<!-- execute certain code only when the Foo element is fully loaded -->

...

… or fired a manual OData model read request …

// in your controller

...

// get the OData model
var oModel = this.getView().getModel("odataModel");

// fire a read request for the element Foo
oModel.read("/Foo");

<!-- how to know when the Foo element is fully loaded? -->
<!-- execute certain code only when the Foo element is fully loaded -->

...

… or loaded a JSON file into a JSON model …

// in your controller

...

// create a JSON model
var oModel = new sap.ui.model.json.JSONModel();

// load external JSON file
oModel.loadData("https://127.0.0.1/Foo.json");

// how to know when the Foo file is fully loaded?
// execute certain code only when the Foo file is fully loaded

...

In each case, you want to know when the model request got an answer and received its data.

Due to the asynchronous nature of JavaScript that is part of the SAP UI5 framework, some code parts might not get executed one line after the other but rather mixed up – the code execution jumps back and forwards:

Some JavaScript code executes some logic x. Even though the logic x has not been fully executed yet some other logic that follows the logic x gets executed. And at some point later, some other code flow gets interrupted because the rest of logic x is now ready to get finished. That is asynchronous code execution in a nutshell.

For example, an OData model read request gets fired. That is the first part of the logic. After the request has been fired but not completed other logic that comes next in the chronical order of the code gets executed.

At some point, the back-end fires back through the OData service to the JavaScript code triggered from the read request. The reply from the back-end completes the read request, and the remaining half of the logic of the OData model read request gets executed. Therefore, the code execution jumps back to the not finished read request.

Therefore, to know when an OData model or JSON model has loaded, it is necessary to catch that moment when the code execution jumps back to complete what it has begun.

Wait for Until an OData Element Bound to an SAP UI5 Control Is Loaded

For example, you bound an OData element through an OData model to an SAP UI5 text control. Now you want to execute some code right after the OData model loaded the element:

<!-- in your XML view -->

...

<!-- element Foo bound to text control -->
<Text text="{odataModel>/Foo}"/>

...

To check when the OData model loaded the Foo element you need to attach the requestCompleted event to the OData model in the onInit lifecycle hook of the view’s controller:

// in your controller

...

onInit: function() {

  var oModel = this.getOwnerComponent().getModel("odataModel");
  oModel.attachRequestCompleted(function(oEvent) {

    // execute code every time the model completes a request

  });

}

...

The requestCompleted event fires every time if any subsequent request of the model completes. Use the eventOnce event to execute some code only when the first subsequent request of a model is completed:

// in your controller

...

onInit: function() {

  var oModel = this.getOwnerComponent().getModel("odataModel");
  oModel.attachEventOnce("requestCompleted", function(oEvent) {

    // execute code after the first request of the model is completed

  });

}

...

Wait for Until a Manual OData Request Is Loaded

For example, you fire a manual OData read request. An OData model’s read method takes a success callback function in the mParameters object as the second argument:

// in your controller

...

var oModel = this.getView().getModel("oDataModel");

var sPath = "/Products";

oModel.read(sPath, {
 
  success: function(oData) { 
  
    // execute your code right after the data is loaded

  }
 
});

...

The success method gets triggered when the OData model successfully retrieved the requested data from the back-end through the OData service.

Wait For Until a JSON File Is Loaded

For example, you want to load an external JSON file into a JSON model. Similar to when you want to wait for until an element is bound to a control you can choose between the requestCompleted and the requestOnce events:

// in your controller

...

// create a JSON model
var oModel = new sap.ui.model.json.JSONModel();

// load external JSON file
oModel.loadData("https://127.0.0.1/Foo.json");

// attach event once fires one time when the file is loaded
oModel.attachEventOnce("requestCompleted", function(oEvent) {
  
  // file is fully loaded into the JSON model

});

// or

// attach event request completed fires for all 
// subsequent requests of the JSON model
oModel.attachRequestCompleted(function(oEvent) {
  
  // file is fully loaded into the JSON model

});

...

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu