This is how to know when an OData or JSON model is loaded in SAPUI5.
Learn how to get notified when an OData or JSON model request has finished.
If you’d like to learn SAPUI5 from the ground up, then the following is for you.
Let’s get started!
SAPUI5 OData Model or SAPUI5 JSON Model?—It Doesn’t Matter
It doesn’t matter if you want to know when:
- An OData model read request is completed.
- A JSON (JavaScript Object Notation) file is loaded.
The mechanisms to tell when an OData model or JSON model loaded its data remain the same.
For example, you bound an element to an SAPUI5 control, performed a manual OData read request, or manually loaded a JSON file into a JSON model.
Now you want to know when exactly the model has loaded the data, so you can run some code afterward.
For example, you bound an element from an OData service to an SAPUI5 control:
<!-- in your XML view -->
...
<!-- description bound to text control -->
<Text text="{description}" />
<!-- how to know when the description is fully loaded? -->
<!-- i.e. 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 enitity Foo
oModel.read("/Foo");
<!-- how to know when the Foo element is fully loaded? -->
<!-- i.e. 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?
// i.e. execute certain code only when the Foo file is fully loaded
...In each case, you want to know when the model request got an an’t you?
The asynchronous nature of JavaScript in SAPUI5 means that some code parts might not get executed one after another but rather mixed up—the code execution jumps back and forth:
Imagine some JavaScript code runs some logic x.
Though the logic x hasn’t fully executed yet, some other logic that follows it gets executed.
At some point, another code flow gets interrupted because the rest of logic x has been finished.
That’s asynchronous code execution in a nutshell.
Anyway, for example, an OData model read request gets fired. That’s the first part.
After the request is fired but not completed, other logic that comes next in the chronological order of the code gets executed at the client (front-end).
At some point, the back-end fires back through the OData service to the JavaScript code invoked from the read request.
The reply from the backend completes the read request and the rest of the logic gets executed in the front-end. In this case, the code execution jumps back to the not finished read request.
To tell when the OData model or JSON model has loaded, you have to know when the code jumps back to finish what it’s started.
So far, so good, huh? Please leave a comment if you need a more detailed explanation.
How to Know When an OData Element Bound to an SAPUI5 Control Is Loaded
For example, you bind an OData element through an OData model to an SAPUI5 text control.
You want to run some code after the OData model loaded the element:
<!-- in your XML view -->
...
<!-- element Foo bound to text control -->
<Text text="{description}"/>
...To check when the OData model loaded the Foo entity you need to attach the requestCompleted event to the OData model in the onInit hook of the view controller:
// in your controller
...
onInit: function() {
// get the OData model
var oModel = this.getOwnerComponent().getModel();
// attach the request completed event to the OData model
oModel.attachRequestCompleted(function(oEvent) {
// execute code every time the model completes a request
});
}
...The requestCompleted event fires whenever a subsequent request of the model completes.
Use the eventOnce event to execute code only when the first subsequent request of a model is completed:
// in your controller
...
onInit: function() {
// get the OData model
var oModel = this.getOwnerComponent().getModel("ODataModel");
// attach the event once event to the OData model
oModel.attachEventOnce("requestCompleted", function(oEvent) {
// execute code after the first request of the model is completed
});
}
...Now that you know, quite easy, isn’t it?
How to Know When a Manual OData Request Is Loaded
For example, you fire a manual OData read request—a manual OData request in the sense of that it’s not automatically done by the SAPUI5 framework because you bound a model against an object, but rather trigger the request in the controller.
An OData model’s read method takes a success callback function in the mParameters object as the second argument:
// in your controller
...
// get the OData model
var oModel = this.getView().getModel();
// set the path of an entity
var sPath = "/Foo";
// fire the read request
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 retrieves the requested data from the back-end using the OData service. There you go!
How to Know When a JSON File Is Loaded
For instance, you’d like to load a JSON file into a JSON model.
Like when you want to wait until an element is bound to a control, you can choose from the requestCompleted and 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
});
...That’s that.