TransparentContainer

The TransparentContainer is a UI container that cannot be displayed. A TransparentContainer UI element is transparent and can be filled with an any quantity of UI elements (children). In addition, the TransparentContainer UI element allows you to arrange its inserted UI elements through the specified layout.

You can use the TransparentContainer element in two different ways:

As a layout container (isLayoutContainer = true)
In this case, you use this element to design the layout of other UI elements. The TransparentContainer element itself does not have a tab stop and is not announced by a screen reader in accessibility mode.
As a grouping container (isLayoutContainer = false)
In this case, you use this element to group other UI elements. The TransparentContainer element then has a semantic meaning, like a Group element. It has a tab stop and is read by a screen reader.

TransparentContainer and Accessibility

Reading using screen containers only makes sense for accessibility if TransparentContainer.isLayoutContainer = false.

The accessibility text is determined as follows by a TransparentContainer:

By the values that are defined for the TransparentContainer properties tooltip and accessibilityDescription
If the properties named under 1. have not been set, then for accessibility reasons, the text of the values for the tooltip properties and the text of the UI element SectionHeader is used.
If neither the properties under 1. nor 2. have been set, then for accessibility reasons, the text of the values for the tooltip properties and the text of the label UI element, which belongs to the TransparentContainer, are used.

TransparentContainer and SectionHeader

Set TransparentContainer.isLayoutContainer = false to have the title of a TransparentContainer read out by a screen reader.This means that the TransparentContainer itself contains semantic information.

Also use a SectionHeader in TransparentContainer.

Use Cases

TransparentContainer as Layout for a Form

You can use the TransparentContainer as a grouping element for a form in which you insert the SectionHeader as the title and insert further UI elements underneath.

Also specify TransparentContainer.isLayoutContainer = false.This defines that the TransparentContainer itself is important and has semantic meaning.

If you use the TransparentContainer element as a grouping container for accessibility reasons, you can create a title for this group in one of two ways:

If you do not want a visible group title, set values for TransparentContainer.accessibilityDescription and TransparentContainer.tooltip
Use the SectionHeader element as a visible group title. This element then replaces or represents the accessibilityDescription property.

Proceed as described below for the various cases:

Grouping Without Title

Set the property isLayoutContainer=false.
In the accessibilityDescription property, create a text that represents the group title.

Grouping with Title

Use the SectionHeader element as the title for the TransparentContainer element.
Use the labeledBy, property to associate the TransparentContainer element with the SectionHeader element.
The text and the tooltip of the SectionHeader element are read automatically as the accessibilityDescription of the TransparentContainer element, if its accessibilityDescription and tooltip are empty.

TransparentContainer as Melting Group-Like UI Element

You can use a TransparentContainer as a bracket to determine that the contents of several fields belong together, for example, for currency specifications.

Tip

You can find an example in the system in the DEMO_UIEL_LAYOUT component of the demo_uiel_melting_group application.

A TransparentContainer becomes a Melting-Group-like UI element if the following conditions are met:

No other containers are nested in the TransparentContainer
The TransparentContainer should only contain UI elements such as InputFields, DropDown lists, TextViews, and so on.
The isLayoutContainer property must be set to FALSE.
Since the TransparentContainer groups together fields that belong together, you must define that TransparentContainer.isLayoutContainer = FALSE.
There should be a Label with the property islabelFor = <ID of the TransparentContainer>.
You set the label before the TransparentContainer. The label has to refer to the TransparentContainer. The relevant properties of the label are then used for the accessibility texts.

Tip

Example of accessible grouping:

If you want to display a check text in a TextView element after an InputField element, use a TransparentContainer element with MatrixLayout (not a FlowLayout), to group the InputField and its following text. To make this construction accessible in this context, bind a label to the TransparentContainer element (using the labelFor property) and create an additional tooltip for the field and the check text. This tooltip is optional for the field, but mandatory for the TextView element.

TransparentContainer for Layout Purposes Only

In this case, you use the TransparentContainer for layout purposes only.

You also specify TransparentContainer.isLayoutContainer = true. Screen readers do not read the accessibilityDescription property in this case.

Arrange the elements when you use the layout container in such a way that the sequence of the tabs cannot unexpectedly be moved. This means: Nest the TransparentContainer so that the tab sequence cannot jump between different groupings.

Caution

Make sure the nesting depth is not too high.

Implementation Details

Runtime Class

CL_WD_TRANSPARENT_CONTAINER

Properties in the View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
accessibilityDescription	Translatable text		Yes
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	No
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		No
defaultButtonId	WDY_MD_UI_ELEMENT_REFERENCE		Yes
enabled	WDY_BOOLEAN	true	Yes
handleHotkeys	WDY_BOOLEAN	false	No
height	STRING		Yes
isLayoutContainer	WDY_BOOLEAN	true	No
labeledBy	WDY_MD_UI_ELEMENT_REFERENCE		No
scrollingMode	WDUI_SCROLLING_MODE	none	Yes
tooltip	Translatable text		Yes
visible	WDUI_VISIBILITY	visible	Yes
width	STRING		Yes

Aggregations in the View Designer

Name	Cardinality	Type
Element	0..n	UIElement

Note

Other properties that can be inherited are defined in the associated higher-level classes. The associated UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. Bear in mind the different spellings.

Dynamic Programming of Properties

View Designer Name	Runtime Name	Type
accessibilityDescription	ACCESSIBILITY_DESCR	WDY_MD_TRANSLATABLE_TEXT
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_TRANSPARENT_CONTAINER=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_TRANSPARENT_CONTAINER=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_TRANSPARENT_CONTAINER=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
defaultButtonId	DEFAULT_BUTTON_ID	WDY_MD_UI_ELEMENT_REFERENCE
enabled	ENABLED	WDY_BOOLEAN
handleHotkeys	HANDLE_HOTKEYS	WDY_BOOLEAN
height	HEIGHT	STRING
isLayoutContainer	IS_LAYOUT_CONTAINER	WDY_BOOLEAN
labeledBy	LABELED_BY	WDY_MD_UI_ELEMENT_REFERENCE
scrollingMode	SCROLLING_MODE	WDUI_SCROLLING_MODE
scrollingMode: auto	CL_WD_TRANSPARENT_CONTAINER=>E_SCROLLING_MODE-AUTO
scrollingMode: both	CL_WD_TRANSPARENT_CONTAINER=>E_SCROLLING_MODE-BOTH
scrollingMode: none	CL_WD_TRANSPARENT_CONTAINER=>E_SCROLLING_MODE-NONE
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_TRANSPARENT_CONTAINER=>E_VISIBLE-NONE
visible: visible	CL_WD_TRANSPARENT_CONTAINER=>E_VISIBLE-VISIBLE
width	WIDTH	STRING

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
Element	CHILDREN	0..n

Example

In the system you can find an example of a TransparentContainer as a melting group-like UI element in the DEMO_UIEL_LAYOUT component of the demo_uiel_melting_group application.