Ask Reuben

data-aui-name

Why does the id attribute vary?

How do I identify an HTML Web Element ?

If you study the generated HTML of a screen of a Genero application rendered using Universal Rendering, there are 4 attributes to be aware of in the generated HTML.  These are id, data_aui_id, data_aui_name, and class.  The mistake those doing GBC customisation make, particularly those with a web background, is looking at the id attribute to uniquely identify an element.  This mistake also occurs with users of Web Application testing tools such as Selenium who by default may use the id attribute to uniquely identify a web element.

A simple example of a HTML element from a Genero web application is the following …


<div class="mt-field gbc_dataContentPlaceholder gbc_WidgetBase gbc_EditWidget gbc_style_important w_504 g_measureable gbc_WidgetBase_standalone gbc_staticMeasure aui__94 disabled" __widgetbase="" __editwidget="" 
     id="w_504" 
     data-aui-id="94" 
     data-aui-name="formonly.r1"
>

… we can see that in this sample …

  • id = w_504
  • data-aui-id = 94
  • data-aui-name = formonly.r1
  • class =mt-field gbc_dataContentPlaceholder gbc_WidgetBase gbc_EditWidget gbc_style_important w_504 g_measureable gbc_WidgetBase_standalone gbc_staticMeasure aui__94 disabled (emphasis added)

The id value is generated at run-time and is not guaranteed to be persistent over time.  Adding another element to this form might see this value change, so that instead of “w_504” it might now say “w_505”.

The data-aui-id value has the same problem that it is not guaranteed to be persistent over time.  It represents the unique identifier of a node in our Abstract User Interface (AUI)  Tree.  This is the identifier that is used by methods such as om.DomDocument.getElementById which is typically used in conjunction with finding the value of the focus attribute of the User Interface root node.  Adding anything earlier in the AUI Tree including adding a new entry in the Action Defaults or StyleList will typically see this data-aui-id incremented and hence why it is not safe to rely on this value to be persistent over time.

The data-aui-name is populated with the name the 4gl developer associates with that particular GUI element.  This might be the name of the window, form, or field.  The 4gl developer would use this name in methods such as ui.Form.setFieldHidden, ui.Form.setElementHidden to identify the GUI element.  This same identifier can be used by the web developer, the QA tester etc. when wanting to identify a particular GUI element.  As long as the 4gl developer does not change the name of the field in the form file, then this value will be persistent over time.  Most 3rd party  tools will have a way of choosing the right attribute to be a unique identifier and resources such as Stack Overflow will typically give this answer. To interpret a response such as https://stackoverflow.com/questions/65459001/how-to-select-element-in-selenium-by-custom-identifier for Genero might be driver.find_element_by_css_locator('div[data-aui-name="formonly.r1"]').

The values in the class attribute can be used to select multiple widgets at once.  I bolded the two to note in the example above.  If you see gbc_????Widget then this is what the web developer can use to select all instances of a certain Widget or Container.  If you see gbc_style_??? then this is what the web developer can use to select all instances where the 4gl developer has added STYLE="???".

In summary, if anytime you are looking at our generated HTML and you are looking at the id attribute, you are using the wrong attribute.  You probably want to either be using the data-aui-name attribute to be using the name given by the 4gl developer, or using the class attribute and the values beginning gbc…