Support for Unique IDs

Stable IDs are used to identify and modify the controls within the controller during runtime. However, if you reuse or nest these views, these stable IDs are no longer unique. To avoid ambiguity, each view adds its own ID as prefix to all its child controls.

If the ID is created during instantiation of the control, it is unique by default. If you create further controls during runtime, the controller creates a unique ID by calling the oController.createId("ID") method. These methods add the necessary prefix to the ID.

If you want to modify the control with the ID <ID>, you can call the byId(<ID>) method on your view to get the correct control directly. You do not have to handle all the prefix stuff on your own.

The following view defines a button with the stable ID aButton (in the ButtonView):

<core:View viewName="sap.hcm.ButtonView" controllerName="sap.hcm.myController" xmlns="sap.ui.commons" xmlns:core="sap.ui.core"
           xmlns:html="http://www.w3.org/1999/xhtml">
      <Button id="aButton" text="Click me"/>
<core:View>

The following view defines a view embedding the same view several times (ContainerView):

<core:View viewName="sap.hcm.ContainerView" controllerName="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:core="sap.ui.core"
           xmlns:html="http://www.w3.org/1999/xhtml">
      <core:View id="ButtonView1" viewName="sap.hcm.ButtonView"/>
      <core:View id="ButtonView2" viewName="sap.hcm.ButtonView"/>
<core:View>

The view is created as follows:

...
   var oView = sap.ui.view({type:sap.ui.core.mvc.ViewType.XML, id:"myContainerView",viewName:"sap.hcm.ContainerView"});
...

The container view has the following IDs:

Both child view IDs have the prefix myContainerView--:

myContainerView--ButtonView1

myContainerView--ButtonView2

To get one of the child views, use the following code:

...
   var oButtonView1 = oView.byId("ButtonView1");
...

The button view has the following IDs:

ButtonView1--aButton

ButtonView2--aButton

To get the button control, use the following code:

...
   var oButtonView1 = oView.byId("ButtonView1");
   oButtonView1.byId("aButton");
...