Show TOC Start of Content Area

Object documentation Tray This graphic is explained in the accompanying text  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 a PopupMenu. 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.

Note 

If you create a new Web Dynpro component and do not set a value to this property, the Tray will expand to the width the containing UI elements require. If you want the Tray to expand to the entire view, set the value to 100%.

 

Properties Overview

Name

Interface

Type

Initial Value

Bindable

accessibilityDescription

IWDScrollContainer

String (Translatable Text)

 

bindable

defaultButtonId

IWDScrollContainer

String

 

bindable

design

IWDTray

WDTrayDesign

transparent

bindable

enabled

IWDUIElement

boolean

true

bindable

expanded

IWDTray

boolean

true

bindable

hasContentPadding

IWDTray

boolean

true

bindable

height

IWDUIElementContainer

String (CSS size)

 

bindable

scrollingMode

IWDScrollContainer

WDScrollingMode

none

bindable

tooltip

IWDUIElement

String (TranslatableText)

 

bindable

visible

IWDUIElement

WDVisibility

visible

bindable

width

IWDUIElementContainer

String (CSS size)

 

bindable

 

Events

·         onToggle (boolean expanded)

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.

End of Content Area