Controller - Cannot get reference by Id from View

[sandeep_joseph]

Dear UI5 Friends,

I'm having a hard time getting the reference to an element in my view from its controller. I tried several combinations like using createId, giving the HTML5 name of the element etc, but nothing seems to work. Another strange problem I noticed in the process is, this.getView() does not give the reference to the view in the controller all the time. It works in onInit, but does not work in the search handler of a SearchField. My coding is as follows:

In the View

-----------------------------------

                var searchField100 = new sap.m.SearchField({

                                            id: this.createId("searchField100"), //Tried it also without createId

                                                          placeholder: "Search ...",

                                            search: oController.search,

                                            tooltip: "Search for Products",

                                            layoutData: new sap.m.FlexItemData({growFactor: 1})

                                                        });

                  this.page = new sap.m.Page({

                                        backgroundDesign: sap.m.PageBackgroundDesign.List,

                                        title: "Choose Country",

                                        showNavButton: true,

                                        navButtonTap: [oController.back, oController],

                                        icon: "{img>/icon/ui5}" ,

                                        subHeader: new sap.m.Bar({

                   enableFlexBox: true,

                   contentMiddle: searchField100

                                        })

                              });

In Controller

-----------------------------------

var searchField100= sap.ui.getCore().byId("searchField100");

Could you please help?

Thanks,

Sandeep

[AndreasKunz · Accepted solution]

Hi Sandeep,

Regarding the ID problem:

When in a View/Controller, you should use   this.createId("myId")   to create a unique ID and then you can use   this.byId("myId")   to retrieve the control again.

Doing   sap.ui.getCore().byId(this.createId("myId"))   would do the same thing as this.byId.

Regarding "this.getView() does not give the reference to the view in the controller all the time":

This is probably due to a more tricky behavior of the JavaScript language: the "this" context of a function call can be modified and will e.g. in callbacks NOT be the object from where the callback was registered. A typical remedy is to assign "this" to another variable like "that": 

var this = that;

and to then use "that" instead inside the callback.

In your case the event handlers have the respective UI5 control as "this" context. You can either use the this=that trick or you can also set the "this" context when registering the event handler:

search: [oController.search, oController]

(give an array, with the object which should be "this" in the second place)

Regards

Andreas

[Former Member · Accepted solution]

Hi Andreas,

I am also facing the same error .

onPress is the event handler for press of a button.

Code in the controller.

onPress: function()

  {

  navigator.geolocation.getCurrentPosition(GetLocation);

  function GetLocation(location) {

  var latlon = location.coords.latitude + "," + location.coords.longitude;

  var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";

  var myImage = this.byId("myImage");

  if (myImage === undefined) {

  sap.ui.commons.MessageBox.alert("image is not defined");

  } else {

  myImage.setSrc(img_url);

  }

  // sap.ui.getCore().byId("TA2").

  }

  }

On executing getting error like: this.byId is not a function

can you help?

[Former Member]

This message was moderated.