TransparentContainer

Use

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 the following way:

  1. 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.

  2. 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 for a TransparentContainer from the values that are defined for properties tooltip and accessibilityDescription of the TransparentContainer.

  • If the properties named under 1. have not been set, then for accessibility reasons, the text of the values for the tooltip and text properties 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 and text properties 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.

In addition, you define the following: TransparentContainer.isLayoutContainer = false 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 the following way:

  1. If you do not want the group title to be visible, set the values for TransparentContainer.accessibilityDescription and TransparentContainer.tooltip.

  2. 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

  1. Use the SectionHeader element as the title for the TransparentContainer element.

  2. 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.

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

  1. No other containers are nested in the TransparentContainer

    The TransparentContainer should only contain UI elements such as InputFields, DropDown lists, TextViews, and so on.

  2. The isLayoutContainer property must be set to FALSE.

    Since the TransparentContainer groups together fields that belong together, you must define that TransparentContainer.isLayoutContainer = FALSE.

  3. You want a label with Property islabelFor = <D des 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.

TransparentContainer for Layout Purposes Only

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

You also specify that 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. In other words: Nest the TransparentContainer so that the tab sequence cannot jump between different groupings.

Implementation Details

Runtime Class

CL_WD_TRANSPARENT_CONTAINER

Properties in View Designer

Name

Type

Initial Value

Bindable

id

STRING

(automatic)

No

accessibilityDescription

Translatable text

Yes

ariaLandmark

WDUI_ARIA_LANDMARK

None

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

explanation

Translatable text

No

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

scrollLeft

I

0

No

scrollTop

I

0

No
styleClassName STRING 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

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name

Runtime Name

Type

accessibilityDescription

ACCESSIBILITY_DESCR

WDY_MD_TRANSLATABLE_TEXT

ariaLandmark

ARIA_LANDMARK

WDUI_ARIA_LANDMARK

ariaLandmark: Application

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-APPLICATION

ariaLandmark: Article

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-ARTICLE

ariaLandmark: Banner

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-BANNER

ariaLandmark: Complementary

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-COMPLEMENTARY

ariaLandmark: Contentinfo

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-CONTENTINFO

ariaLandmark: Form

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-FORM

ariaLandmark: Main

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-MAIN

ariaLandmark: Navigation

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-NAVIGATION

ariaLandmark: None

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-NONE

ariaLandmark: Search

CL_WD_TRANSPARENT_CONTAINER=>E_ARIA_LANDMARK-SEARCH

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

explanation

EXPLANATION

WDY_MD_TRANSLATABLE_TEXT

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

scrollLeft

SCROLL_LEFT

I

scrollTop

SCROLL_TOP

I
styleClassName STYLE_CLASS_NAME STRING

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

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.