SAPUI5: Why Does sap.ui.getCore().byId() Return Undefined?

🏷️

This is about why sap.ui.getCore().byId() might returns undefined in SAPUI5.

The reason for this is how the SAPUI5 framework assigns IDs to controls.

You’ll learn:

  • Why sap.ui.getCore().byId() might returns undefined
  • How to get the control anyway

Let’s get started!

Why Does sap.ui.getCore().byId() Returns Undefined?

sap.ui.getCore().byId() returns undefined when it doesn’t find a control with the to sap.ui.getCore().byId() passed ID.

For example, sap.ui.getCore().byId(“foo”) returns undefined if the SAPUI5 application does not contain a control with the set ID bar.

But what if there is actually in an XML view a control with an set ID of foo like:

<!-- in your XML view -->
 
<mvc:View
  id="view-1"
  controllerName="my.app.controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
 
    <Button id="foo" text="Click this"/>
 
<mvc:View>

And in the controller of the view is in the onAfterRendering() method an sap.ui.getCore().byId(“foo”)—but it returns undefined. However, this.byId(“foo”) works just fine:

// in your controller 
 
sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function (Controller) {
  "use strict";
 
  return Controller.extend("my.app.controller.View1Controller", {
 
    onAfterRendering: function() {
             
      // returns undefined
      var oButton = sap.ui.getCore().byId("bar");
 
      // works
      oButton = this.byId("bar");
 
    }
 
  });
 
});

Why does sap.ui.getCore.byId(“bar”) does not get the button with the ID foo?

And why does this.byId(“foo”) works?

First of all, this.byId() is the way to get a control from a view in its controller.

But what if you would like to get in a controller a control from another view then the controller’s view?—because this.byId() can only get controls from the view which is assigned to the controller.

The first assumption would be to use sap.ui.getCore().byId(“foo”) with foo as the ID of the control from the other view. But that does not work.

Here is why:

IDs of Controls Are Prefixed with the IDs of Its Views in SAPUI5

The views prefix the control IDs with its own IDs.

To avoid ID collisions of controls, each view adds its own ID as a prefix to all its child controls. For example, a view has the ID foo. A button control in the view has the ID bar. Then the prefix that the view add to each of its controls is foo–. Therefore, the ID of the button control of the view is foo–bar.

And this is the difference of this.byId() and sap.ui.getCore().byId():

A view’s byId() adds the prefix of the view automatically to the requested ID which is passed as argument to the method.

sap.ui.getCore().byId() does not add any prefix.

Behind the scenes this.byId() calls sap.ui.getCore().byId(). But this.byId() puts the argument this.createId(id) into sap.ui.getCore().byId()

sap.ui.getCore().byId(this.createId(id))

id stays the String argument from byId(id).

For example, foo in byId(“bar”):

The method createId() of the controller takes the ID of the controller’s view and prefixes it to the passed ID from byId(). Hence, this.byId(“foo”) calls behind the scenes sap.ui.getCore().byId(this.createId(“foo”)) and ends up in sap.ui.getCore().byId(“foo–bar”):

// this is what this.by.Id() calls behind the scenes 
 
View.prototype.byId = function(sId) {
 
    return sap.ui.getCore().byId(this.createId(sId));
 
};

To Use sap.ui.getCore().byId() the ID of the Control Needs to Be Prefixed

Therefore, sap.ui.getCore().byId() works only with the view prefix or nested views prefixes of the control added to the control’s ID. But in contrast to this.byId() works sap.ui.getCore().byId() for controls too that are in other views then the controller’s view:

<!-- in your XML view -->
 
<mvc:View
  id="foo"
  controllerName="myApp.controller.Foo"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
 
    <!-- view id is foo -->
    <!-- button control id is foo--bar -->
    <Button 
      id="bar" 
      text="Click this"/>
 
<mvc:View>

Nested Controls Require Multiple Prefixes and How to Deactivate Auto Prefixing

If a control is nested in multiple views or further controls then it is necessary to prefix the IDs of those controls as well.

For example, a view with the ID view-1 contains a simple form with the ID form-1 and the form contains an input with the ID input-1. Then the ID of the input would be view-1–bar-1—input-1.

By the way, it is possible to deactivate the prefixing of IDs in the manifest.json:

// in your manifest.json
...
 
sap.ui5 {
 
    ...
 
    autoPrefixId: false
 
}
 
...

However, this is not recommended.

🙌 More Articles

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

Leave a Comment

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

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu