this.byId() returns undefined

Question

I have two functions in the controller, one of which is used for processing some event, let's say button click.

This one works fine:

handleUploadPress: function(oEvent) {
   var oFileUploader = this.byId("streamerUploader");
   if (!oFileUploader.getValue()) {
    MessageToast.show("Choose file");
    return;
   }

And this one throws error:

showResponse: function(id, response) {
    this.byId("streamerUploader").someMethod();
   }

In both functions "this" equals event provider, however, this.byId() returns undefined in the second one. What is the reason?

`this` should not be the event provider (i.e. the source of the event, like a button) but the controller. Only the controller (or more specific, the view object of the controller) has a `byId` method. — Marc, Aug 07 '18 at 07:13
Could you add the code that binds these events? Excerpt from the XML view `` or the JavaScript that attaches it `oFileUploader.attachUploadComplete(...)`. It's not possible to reliably answer your question without this. — Florian, Aug 07 '18 at 07:25
I call the 'showResponse' method from js file used for control extension (contorls/FileUploader.js) — Chris Gabler, Aug 07 '18 at 07:55
You should really specify more. Can you provide us with a code snippet of the custom control? — Matthijs Mennens, Aug 07 '18 at 07:58
hm, maybe this is a pointer to controller. Alert of "this" shows "EventProvider my.app.controller.ControllerName". Nevetherless, it's the same in both methods — Chris Gabler, Aug 07 '18 at 07:58
Since you have no event for calling your custom function, how do you plan on calling the function? Like Florian said, providing a small part of your XML would help out a lot. — Matthijs Mennens, Aug 07 '18 at 08:10

Chris Neve · Accepted Answer · 2018-08-09T08:29:18.973

1

this does not point to the controller when called from a callback method.

Your handleUploadPress() method, presumably, is an event handler and handles the press of a file upload button. The owner of this method is the controller, and calling this.byId(...) will behave as expected - it will return the component in the view with the specified ID.

However, in your callback method, this is not the controller. The method this.byId is undefined - it's a method defined by SAP UI5 controllers.

What you need to do

Before you send your request with req.then(...), declare a variable whose value will be the this you will need to access, as such:

var that = this;

Then, to use the byId method, go by this variable.

that.byId(...).doSomeMethod();

I advise you read this question and answers to understand more about this in Javascript.

edited Aug 09 '18 at 08:29

answered Aug 07 '18 at 08:12

Chris Neve

2,164
2
20
33

Thank you for your answer, it's really helpful. I understand that "this" should point to different things in these methods, I just don't catch why alert of "this" in the second function shows that it is the same controller. – Chris Gabler Aug 07 '18 at 08:23
3

Isn't it also possible to use .bind(this)? It would be like req.then(function(response) {...}.bind(this) – Erch Aug 07 '18 at 08:25
@ChrisGabler well, not sure an alert is the best way to inspect an object. Put a breakpoint in both methods, then when stopped on each, have a look at each "this" object. Do they both appear to be identical? – Chris Neve Aug 07 '18 at 08:31
@EricSchuster Although I'm not familiar with the bind() method, I don't see how it could work from inside the callback method. How would it link both "this" objects? – Chris Neve Aug 07 '18 at 08:32
@ChrisNeve very naivly explained it enshures that the "this" from outside the brackets can be used inside the brackets. For the scientifically precise answer check https://stackoverflow.com/questions/2236747/use-of-the-javascript-bind-method – Erch Aug 07 '18 at 08:40
@ChrisNeve I suspected this :D Via developer tools "this" in the first method points to the component and "this" in the second method points to... I don't know what, not the component for sure, it seems to be empty – Chris Gabler Aug 07 '18 at 08:47
@EricSchuster I think @ChrisNeve knows what bind does. But it's not clear how it can help in this context since we don't know how `showResponse` is called. – Marc Aug 07 '18 at 09:09

this.byId() returns undefined

1 Answers1