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 😛

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.




To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Jagadeesh Biyyapu

    Hi,

    This blog really helpful,could u please elobrate the reason for errors.Then it will be much useful for begginers like us.

    Some doubts :

    what it means :     Only if ‘this’ refers to the View


    Upto my knowledge in init method this means view only then why still it is throwing error.


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


    I didnt got what here prefix meant for.. .please clear me it will be helpful to me in many scenarios

    Thank you,

    Jagadeesh

    (0) 

Leave a Reply