Tray 

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

To enable the development of accessible applications, the accessibilityDescription property is checked during the syntax check if the caption property is not set.

The tooltip property is not checked.

A tooltip does not necessarily have to be set for this UI element, but it could make sense to set it if it contains detailed semantic information.

 

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.

...

       1.      Set the initial value of the property "expanded" of the Tray UI element to false.

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

       3.      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 the View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
accessibilityDescription	Translatable text		Yes
activateAccessKey	WDY_BOOLEAN	false	No
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
height	STRING		Yes
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
Header	1..1	Caption
Menu	0..1	Menu
Toolbar	0..1	ToolBar

 

Events in the View Designer

Name

onToggle

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

●        ScrollContainer

●        UIElementContainer

●        UIElement

●        ContextMenuProvider

●        ViewElement

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
activateAccessKey	ACTIVATE_ACCESS_KEY	WDY_BOOLEAN
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
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
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.