Tray

Use

The Tray UI element (IWDTray) is a UI element container like the Group UI element container and can be used to group a set of UI elements under one common title. Unlike the Group UI element it provides additional functions. For example, the Tray UI element can be displayed or hidden.

Example of the Visual Display

Performance Issues with Tray Views

If, for the Tray UI element, no action handler has been defined for the event Tray.onToggle, the content is always sent to the browser. The opening and closing of the Tray is handled fully in the browser.

If there is an action handler for the onToggle event, the content of the Tray is only sent to the browser if expanded=true, that is, the Tray is open.

Proceed as follows to ensure that the content of the Tray is sent to the browser only if the Tray is to be opened.

Set the initial value of the property "expanded" of the Tray UI element to false.
Define an action handler for the Tray.onToggle event.

The content of the Tray will then be sent to the browser only if it is open. This saves time for closed Trays. The phase model of views that have been embedded in a closed tray will be processed nevertheless.
When a Tray is first opened, we recommend you execute a navigation in the Tray.onToggle action handler to the view that is displayed in the opening Tray. Then the view will not be instantiated until the Tray is opened.

Implementation Details

Runtime Class

CL_WD_TRAY

Properties in View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
accessibilityDescription	Translatable text		Yes
activateAccessKey	WDY_BOOLEAN	false	No
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
design	WDUI_TRAY_DESIGN	transparent	Yes
enabled	WDY_BOOLEAN	true	Yes
expandable	WDY_BOOLEAN	true	Yes
expanded	WDY_BOOLEAN	true	Yes
handleHotkeys	WDY_BOOLEAN	false	No
hasContentPadding	WDY_BOOLEAN	true	Yes
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
Header	1..1	Caption
Menu	0..1	Menu
Toolbar	0..1	ToolBar

Events in View Designer

Name

onToggle

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
activateAccessKey	ACTIVATE_ACCESS_KEY	WDY_BOOLEAN
ariaLandmark	ARIA_LANDMARK	WDUI_ARIA_LANDMARK
ariaLandmark: Application	CL_WD_GROUP=>E_ARIA_LANDMARK-APPLICATION
ariaLandmark: Article	CL_WD_GROUP=>E_ARIA_LANDMARK-ARTICLE
ariaLandmark: Banner	CL_WD_GROUP=>E_ARIA_LANDMARK-BANNER
ariaLandmark: Complementary	CL_WD_GROUP=>E_ARIA_LANDMARK-COMPLEMENTARY
ariaLandmark: Contentinfo	CL_WD_GROUP=>E_ARIA_LANDMARK-CONTENTINFO
ariaLandmark: Form	CL_WD_GROUP=>E_ARIA_LANDMARK-FORM
ariaLandmark: Main	CL_WD_GROUP=>E_ARIA_LANDMARK-MAIN
ariaLandmark: Navigation	CL_WD_GROUP=>E_ARIA_LANDMARK-NAVIGATION
ariaLandmark: None	CL_WD_GROUP=>E_ARIA_LANDMARK-NONE
ariaLandmark: Search	CL_WD_GROUP=>E_ARIA_LANDMARK-SEARCH
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_TRAY=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_TRAY=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_TRAY=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
defaultButtonId	DEFAULT_BUTTON_ID	WDY_MD_UI_ELEMENT_REFERENCE
design	DESIGN	WDUI_TRAY_DESIGN
design: fill	CL_WD_TRAY=>E_DESIGN-FILL
design: plain	CL_WD_TRAY=>E_DESIGN-PLAIN
design: transparent	CL_WD_TRAY=>E_DESIGN-TRANSPARENT
enabled	ENABLED	WDY_BOOLEAN
expandable	EXPANDABLE	WDY_BOOLEAN
expanded	EXPANDED	WDY_BOOLEAN
handleHotkeys	HANDLE_HOTKEYS	WDY_BOOLEAN
hasContentPadding	HAS_CONTENT_PADDING	WDY_BOOLEAN
height	HEIGHT	STRING
heightImpact	HEIGHT_IMPACT	WDUI_TRAY_HEIGHT_IMPACT
heightImpact: heightOfContent	CL_WD_TRAY=>E_HEIGHT_IMPACT-HEIGHTOFCONTEXT
heightImpact: heightOfTray	CL_WD_TRAY=>E_HEIGHT_IMPACT-HEIGHTOFTRAY
scrollingMode	SCROLLING_MODE	WDUI_SCROLLING_MODE
scrollingMode: auto	CL_WD_TRAY=>E_SCROLLING_MODE-AUTO
scrollingMode: both	CL_WD_TRAY=>E_SCROLLING_MODE-BOTH
scrollingMode: none	CL_WD_TRAY=>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_TRAY=>E_VISIBLE-NONE
visible: visible	CL_WD_TRAY=>E_VISIBLE-VISIBLE
width	WIDTH	STRING

Dynamic Programming of Events

View Designer Name	Runtime Name
onToggle	ON_TOGGLE

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
Element	CHILDREN	0..n
Header	HEADER	1..1
Menu	POPUP_MENU	0..1
Toolbar	TOOLBAR	0..1

Example

You can find examples of this interface element in the system in the Web Dynpro application WDR_TEST_UI_ELEMENTS, and in the component WDR_TEST_EVENTS in the view Tray.