UI5 / Fiori 加载 JSON Model

Question

I maintain a Fiori app that has been running for 2 years without any problems. Suddenly there are various errors that can be traced back to a place where I try to load a local JSON model.

The error is

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')

This is the code

var sSelectedFilterButtonId = this.getModel("misc").getProperty("/ButtonId");
[... more stuff]
if (sSelectedFilterButtonId.indexOf("Demand") > -1) { ... >>>> error

I'm not a JS pro and suspect that loading the model is asynchronous (as the error said "In Promise"). But there is nothing about this or any async in the UI5 API. It has worked for the last few years. Can someone explain this to me? Or do I have to proceed differently here?

Even more strange is that the error usually only appears when navigating to the app from the Fiori Launchpad. If you reload the app itself, 99.9% of the time no error occurs....

Edit (new informations):

I was trying to debug the UI5 framework a bit and came across method JSONModel.prototype._getObject.

This method should load the data from the JSON model. When I call the app directly, this function returns the appropriate data and the app works. When I call the app from the launchpad, the function returns null. The model has not been loaded yet. oNode === undefined

I then looked at the network and found that when I call the app directly, the JSON file/model has already been loaded before the above function is called.

When I load the app from the launchpad, the JSON file has been requested but no content has been served yet. The file is still empty, so of course I get a null... So it seems to be an asynchronous problem. If I set the "async" properties in the manifest to false, the app is not opened from the launchpad at all... I cannot use async/await, because UI5 officially only supports ECMAScript 5 and we cannot deploy otherwise...

There is no call that describes or reads the variable beforehand. The error appears directly at the first use.

In the onInit() method only a local variable is set. Nothing special.

onAfterRendering: function (oEvent) {
    // getting filter values
    var sButtonId = this.getModel("misc").getProperty("/ButtonId");

    var aFilters = this._calcInternalStuff(null, null, null);
    var oBinding = null;

    // Here the code breaks because the variable is undefined.
    // Please do not ask who or what has thought up your logic here...
    if (sButtonId.indexOf("Demand") > -1) {
        oBinding = this._oDemandsTable.getBinding("items");
    } else {
        oBinding = this._oRecallsTable.getBinding("items");
    }
    if (oBinding !== null && oBinding !== undefined) {
        oBinding.filter(null);
        oBinding.filter(aFilters);
    }
}, //END onAfterRendering()

Answer 1

Same as a/61879725 or a/63892279 , you'll need to refactor the code by using dataLoaded ¹ from the JSONModel to ensure that the data have been loaded:

// Given: JSONModel and data source declared in the application descriptor (manifest.json)
thatJSONModel.dataLoaded().then(function() { // Ensuring data availability instead of assuming it.
  var sButtonId = thatJSONModel.getProperty("/ButtonId"); // sButtonId is now defined.
  // ...
}.bind(this));

Btw. I'd strongly discourage applications from relying on onBeforeRendering / onAfterRendering since it's unpredictable for them when and how many times the framework or a control initiates rendering. ²

---

¹ API Reference: sap.ui.model.json.JSONModel#dataLoaded
² For example, the recent commit 8e24738 reduces the number of render calls in applications.