Show TOC Start of Content Area

Object documentation Tray API  Locate the document in its SAP Library structure

Definition

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.

A Tray UI element may have an optional menu represented by the menu element. A toolbar can be inserted as well - see Toolbar.

The following graphic shows how the UI element is displayed when a Menu UI element and a UI element are used within the Tray UI element.

This graphic is explained in the accompanying text

Description of UI Element Properties

     accessibilityDescription

When accessibility is activated, the assigned text is added to the tooltip. This description provides semantic details of the UI element and is only read by the screen reader if the user focuses the complete Ul element.

     defaultButtonId

Specifies the ID of the assigned default button.

     design

Describes the appearance of the Tray UI element. The designproperty can take the following values and is represented by enumeration type WDTrayDesign.

fill

The content area appears with a background color.

plain

The content area appears with a white background and a frame.

transparent

The background is transparent; the content area appears without a frame.

     expanded

Specifies whether the Tray UI element is expanded. The value false only shows a header with the expand icon. The toolbar and content area are invisible in this state. Pressing the button expands the Tray UI element and the expand button and the expand button changes to a collapse button.

     hasContentPadding

Specifies whether there is a padding between the content area and the tray border.

     height

Determines the height of the Tray, which you can specify in relative CSS units like em or ex.

     scrollingMode

Specifies how the scroll bar appears within the UI element container.
The
scrollingMode property can be filled with the following values and is represented by the enumeration type WDScrollingMode.

auto

The scroll bar within the container is activated automatically.

both

A vertical and horizontal scroll bar are activated.

none

Scrolling within the text context is not possible.

     width

Determines the width of the Tray. You can specify this in CSS sizes, such as em, ex, pixels or percentage values.

Properties Overview

Name

Interface

Type

Initial Value

Bindable

Value Required

accessibilityDescription

IWDScrollContainer

String (Translatable Text)

 

bindable

No

defaultButtonId

IWDScrollContainer

String

 

bindable

No

design

IWDTray

WDTrayDesign

transparent

bindable

No

enabled

IWDUIElement

boolean

true

bindable

No

expanded

IWDTray

boolean

true

bindable

No

hasContentPadding

IWDTray

boolean

true

bindable

No

height

IWDUIElementContainer

String (CSS size)

 

bindable

No

scrollingMode

IWDScrollContainer

WDScrollingMode

none

bindable

No

tooltip

IWDUIElement

String (TranslatableText)

 

bindable

No

visible

IWDUIElement

WDVisibility

visible

bindable

No

width

IWDUIElementContainer

String (CSS size)

 

bindable

No

 

Events

·         The event onToggle is triggered when the user expands or collapses the tray. The event parameter is the new state. The value true means that the tray has been expanded.

Event Parameter

Type

expanded

boolean

See Parameter Mapping.

End of Content Area