UI5 – Calling methods within a function

Home / Blog / UI5 – Calling methods within a function

Well, I’ve been trying to spend a little free time working in UI5 again.  I recently ran into an issue that stumped me for a while.  I created a worklist application using the template and everything worked great, it connected to my service, I could even add some buttons and features.  Then comes the fun part.  I wanted to add the dynamic features into my table.  Well, for some reason when you code up a table in the xml view everything works great, but when you create it within the controller, you can’t just call the method.  Special thanks to SCN and this blog post to finally get me over the hump.

I defined a button and originally it looked like this:

var oButtRefresh = new sap.m.Button({
id: “BtRefresh”,
type: “Transparent”,
press: “onRefresh”,
icon: “sap-icon://refresh”
});

However, when I would push the button, I’d get errors.  I tried with quotes, without quotes, with (), without ().  All to no avail.  The trick that I needed to do, was first:  at the top of the onInit method, I added the following line:

self = this;

then I changed my button to look like this:

var oButtRefresh = new sap.m.Button({
id: “BtRefresh”,
type: “Transparent”,
press: function() {
self.onRefresh();
},
icon: “sap-icon://refresh”
});

What I came to realize is that “this” inside of a function no longer sees the original controller.  Even though it works fine from the XML version, when you build it in the controller, you need to be very aware of your “context”.  In this case, I needed to give it a specific variable that wouldn’t change based on where it was called from.    Hope this can save you some time in your UI5 adventure.

Thanks for reading,

As always, thanks for reading and don't forget to check out our SAP Service Management Products at my other company JaveLLin Solutions,
Mike

Leave a Reply

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