Skip to Content

We know that when we create a new UI5 control instance, we can explicitly pass an id into constructor. In this case, developer takes responsibility to ensure the id is unique.

/wp-content/uploads/2016/05/clipboard1_951974.png

We can find the unique id in rendered page.

/wp-content/uploads/2016/05/clipboard2_951975.png

An alternative is we do not pass any id but let UI5 framework to automatically generate one.

Above code will have a button with id “__button0” generated.

/wp-content/uploads/2016/05/clipboard3_951976.png

Question: how can I find exactly location of code where UI5 does the trick?

Since I don’t know exactly where should I start to debug, I even do not know which js file I should start with.

As a result, I plan to manually bring some trouble to UI5 framework, so that it can raise some complain message in Chrome development tool console to give me some idea. So I write the following code. I assume line 11 will lead to some mistake due to the duplicate control id.

/wp-content/uploads/2016/05/clipboard4_951977.png

When I refresh the application, I see the expected error message in console. Ckick the third frame in callstack: Core.registerElement to view its source code:

/wp-content/uploads/2016/05/clipboard5_951978.png

Here below we can understand the UI5 framework logic how to detect duplicate control id:

1. There is a central repository to store all registered control instance. See this.mElements in line 40711.

2. in line 40700, scan against the central repository with the id of new control to be registered. If byId returns one, it means there is already existing control with the same id. Duplication detected!

/wp-content/uploads/2016/05/clipboard6_951979.png

/wp-content/uploads/2016/05/clipboard7_951980.png

So far we still do not know where id is generated. Type oElement.getId in console and the source code of this function is printed out. Then we know for every control instance, it has a property sId to store its ID.

/wp-content/uploads/2016/05/clipboard8_951981.png

Perform key word search within the same JS file where registerElement is implemented with keyword “.sId”, only 11 matches found.

Then we find a constructor function which looks like just what I am looking for. The logic of automatic ID generation if not explicitly specified is implemented between line 29062 and 29064. Set a breakpoint to verify our guess.

/wp-content/uploads/2016/05/clipboard10_951982.png

Write the following code in controller:

var myButton = new sap.ui.commons.Button({
   text: "press me~"
  });

In the runtime breakpoint is triggered.

/wp-content/uploads/2016/05/clipboard12_951985.png

The ID fragment, “button”, comes from this.getName() in line 33711.

/wp-content/uploads/2016/05/clipboard13_951986.png

UI5 framework internally maintains a counter as the postfix of each control id.

/wp-content/uploads/2016/05/clipboard14_951987.png

This is the reason why we can see lots of number postfix in every UI5 application:

/wp-content/uploads/2016/05/clipboard15_951988.png

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply