Get Control ID Defined in XML Fragment

Question

I have a fragment having many input fields. I want to check the ID of the input field in which text was entered. When I do oEvent.getSource().getId(), I get "someId-controlId". I am not sure what that "someId" is of. But after "-" is the "controlId" for sure. Could anyone advise how to separate the control ID from the output I am getting or how to extract control ID in controller?

Answer 1

The way how the global ID is created depends on how the fragment was created. Moreover, this is how separators are currently used between the ID segments:

• Components append "---"
• Views append "--"
• Controls / elements append "-" (e.g. for cloned instances via aggregation binding)

Sample output:

"componentId---viewId--controlId-__clone0"

The number of separators, how they are inserted, or even which character is used to separate each segment might change in later versions. In fact, there is a warning in the documentation not to rely on the current syntax:

Do not rely on the specific prefixing syntax because it may change at some point.

To make it worse, no errors are thrown when such a separator was indeed used in the id definition. Assuming the separator character might be included in the id definition makes extracting the right part from the global ID much harder and unpredictable.

In order to make each control distinguishable, a better approach would be to add CustomData.

<Input change=".onChange">
  <customData>
    <core:CustomData key="is" value="A" />
  </customData>
</Input>
<Input change=".onChange">
  <customData>
    <core:CustomData key="is" value="B" />
  </customData>
</Input>
<Input change=".onChange">
  <customData>
    <core:CustomData key="is" value="C" />
  </customData>
</Input>

The custom data can be then retrieved in the Controller via the API data:

onChange: function(oEvent) {
  const inputIsFrom = oEvent.getSource().data("is"); // returns: "A", "B", or "C"
  // ...
},