SAPUI5 Javascript and UniqueID definitions

[Former Member]

Does the title of the blog look familiar? Many might think what is going to be different from the way things are working with Java scripts and its UI definitions and the answer is No - Nothing different !!!

The intention of this blog is to understand the idea of how .byID() and this.createID() works in Javascript development. Though, this is a basic one and everyone might be aware of how to use this in your code I am putting my thoughts out here so someone in future (a beginner / doubtful mind) like me could use it as reference.

References:

SCN Threads Controller - Cannot get reference by Id from View, view.byId issues with JS-based UI

Thanks to andreas.kunz for his extensive support and knowledge on this regard.

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/MVC.html → Support for Unique ID’s section.

Familiar document...That’s right when everything is available in the document why write a blog can be a question? The references provided are detailed and there is a chance that we miss out few things when we read a lot of stuff. May be I did :razz:

Let’s analyze this with a simple example. I have an input field with a default value and a button in view. I will try to access the input field value from controller’s init and my button action methods to see how and what type of syntax need to be used to read the input field value.

My View has the following structure initially (defining ID's statically):

var oName = new sap.ui.commons.TextField("name", {value: "Nagarajan"});

var oButton = new sap.ui.commons.Button("button", {text: "Get From Controller", press: oController.getName });

  oName.placeAt("content");

  oButton.placeAt("content");

Controller Methods Definition:

  onInit: function() {

  var viewname = view.byId("name").getValue();

  var corename = sap.ui.getCore().byId("name").getValue();

  var thisname = this.byId("name").getValue();

  },

  getName: function(){

  var viewname = view.byId("name").getValue();

  var corename = sap.ui.getCore().byId("name").getValue();

  var thisname = this.byId("name").getValue();

  }

Run the application in Chrome to see the working / non working syntaxes from the Developer Tool.

Controller Init Method -

var viewname = view.byId("name").getValue();

Uncaught TypeError: Cannot call method 'byId' of undefined

Reason: This will try to prefix the view before the ID and view is undefined at this point in the global variables

sap.ui.getCore().byId("name").getValue(); - Works good.

var thisname = this.byId("name").getValue();

Uncaught TypeError: Cannot call method 'getValue' of undefined

Reason: Only if 'this' refers to the View

Controller on Button Action -

var viewname = view.byId("name").getValue();

Uncaught TypeError: Cannot call method 'byId' of undefined

Reason: We get the view reference in this method but still the prefix is not set.

sap.ui.getCore().byId("name").getValue(); - Works good.

var thisname = this.byId("name").getValue();

Uncaught TypeError: Object [object Object] has no method 'byId'

Reason: 'this' refers to the button and not the View.

When you define the static ID’s in Javascript the one that works is the sap.ui.getCore().byId("name").

Note: This may not hold true when there are multiple views inside your application that uses the same static ID. This is the reason the recommendation is to use the this.createID function when defining the UI in Javascript.

Now, lets change the UI ID’s with this.createID(). This is how the new code looks -

var oName = new sap.ui.commons.TextField(this.createId("name"), {value: "Nagarajan"});

var oButton = new sap.ui.commons.Button(this.createId("button"), {text: "Get From Controller", press: oController.getName });

Controller Init Method -

var viewname = view.byId("name").getValue();

Uncaught TypeError: Cannot call method 'byId' of undefined

Reason: This will try to prefix the view before the ID and view is undefined at this point.

Work around: get the view reference like var view = this.getView();

sap.ui.getCore().byId("name").getValue();

Uncaught TypeError: Cannot call method 'getValue' of undefined

Reason: Here there are no references to the View prefix so we get an error

var thisname = this.byId("name").getValue(); - works good as this get the reference from the controller (here the controller and View name are the same)

Controller on Button Action -

var viewname = view.byId("name").getValue(); - Works good as view reference is here

sap.ui.getCore().byId("name").getValue();

Uncaught TypeError: Cannot call method 'getValue' of undefined

Reason: Here there are no references to the View prefix so we get an error

var thisname = this.byId("name").getValue();

Uncaught TypeError: Object [object Object] has no method 'byId'

Reason: “this” refers to the button

Workaround:  Set the "this" context when registering the event handler like the below

var oButton = new sap.ui.commons.Button(this.createId("button"), {text: "Get From Controller", press: [oController.getName, oController] });

Other alternative, to access via sap.ui.core is sap.ui.getCore().byId(this.createId("name")) in all the places.

Hopefully, this covers the idea of how the pieces work together. This is my understanding of this functionality.

CRITICS are welcome to change my understanding on how these are put together to shape myself a better learner.