Hi all.
I am trying to learn some of the binding concepts of SAPUI5 but I am stuck on a point in which I hope you all can help me out :-)
I am building an application which shows an input screen, on this screen a user can enter a material number and with value suggestions they can select the correct one after which a form gets shown underneath the input field with all properties of the chosen material item. A lock icon in the footer indicates if this material number is currently locked and if it is you can unlock it if it is not locked you can lock it. Locking an material number simply updates the 'OBSOLETE' field into an 'X' and unlocking updates this same field into an '-'.
So what happens when a user selects an material from the input field is the following code:
oView.bindElement({
path: this._oPath,
parameters: {
expand: 'industry,category'
},
events: {
dataReceived : this.toggleButtons()
}
});
this.toggleButtons()
As you can see I already tried to use the dataReceived event and it also shows where my problem lies. This binding succeeds, the item gets shown on the screen but I want the "lock" button on the footer to automatically show the right icon for the current state. This I do by executing a function named "this.toggleButtons();" First I tried executing it after the bindElement call, then I tried to execute it through the "dataReceived" event of the binding itself.
This function simply executes the following function:
var oView, oItem;
oView = this.getView();
oItem = oView.getBindingContext();
// // set the buttons correct based on the status
if (oItem.getProperty("OBSOLETE") === 'X') {
oView.byId("obsolete").setIcon("sap-icon://locked");
} else {
oView.byId("obsolete").setIcon("sap-icon://unlocked");
}
The problem is that "oItem" is undefined. I think that this has to do with the asynchronous way of working (the binding simply isn't finished yet when the function gets called) but if that is the case, should that not be solved by the "dataReceived" event then? Because even through this "dataReceived" event oItem is still undefined? I even tried to put an "alert" in the "this.toggleButtons" function an I noticed that only after closing the alert box my data gets shown on the form (binded)... while I would expect that the dataReceived function would first bind the data on the form and then call the function (which means I should see the data already when the alert box pops up).
So clearly I am not fully understanding this way of working yet but is there anyone who understands what I am doing wrong and know how I could solve my issue? I just want to get access to the bindingContext of the view from the this.toggleButtons function.
Kind Regards,
Nico