iView Containers - Trays

Introduction | What is a Tray? | Tray Functionality | Tray Types

Introduction

An iView consists of two parts: The actual application written by a development team and a framework or container encapsulating the application. This framework is implemented through a design element called tray which serves as a container for iViews. While the application implements most of the functionality and the behavior experienced by the user, the tray delivers interfaces to common functions used by nearly all iViews. These functions comprise an hide/show mechanism and the ability to personalize an iView. The tray is responsible for displaying the appropriate user interface elements, while the application delivers the content via standardized interfaces.

What is a Tray?

A tray is part of the portal framework. It serves exclusively as a container for iViews. A tray consists of a header bar and a content area (see figure 1). A status area may be offered in the future.

Figure 1: The iView tray (shown in "simple" tray design)

The header bar (see figure 1) contains the iView title (left) and small icons (right) for accessing standard tray functionality. See Tray Functionality below for the functions.

Trays are available in four different designs (see figure 2). The different designs are distinguished by the color of the content area, and by whether the content area has a border or not. For details see Tray Types below.

Figure 2: A portal page showing all four tray designs

Tray Functionality

The tray provides the following functions (see figure 1 above and 3 below).

Expand, close/open, refresh, edit, remove

Figure 3: The tray functions

Personalize (Edit)

The edit icon ( ) opens a dialog or personalize page that allows users to change the characteristics of an iView according to their needs.

Note: Currently, the personalization of an iView has to be handled by the iView itself. There is no general personalization interface available. See Personalizing iViews for preliminary proposals for personalization dialogs.

Toggle Open/Close (Restore/Collapse)

The tray has a toggle button that allows users to open (collapse) and close (restore) an iView. An open iView's header shows the "close" icon ( ). When the button is pressed, the iView is reduced to its header, and the toggle button shows the "open" icon ( ).

Expand (Open in a New Window)

The expand icon ( ) opens an iView in a new window. The original copy remains on the portal page.

Remove

If the user clicks the "remove" icon ( ) the iView disappears from the portal page. The user can show the iView again by adding it to the page on the "Personalize Page" page.

Refresh

The "refresh" icon ( ) refreshes an iView. Depending on the functionality behind it, a simple browser refresh or a more complex refresh handled by the application may be carried out.

Complex Refresh

Some iViews will contain data that is changing over time. Examples are stock quotes or inbox items. Depending on the character of the iView, knowing exactly how old or recent the displayed information is can be crucial to overall usability of the application. Besides knowing about the"age" of a piece of information it will in some cases be necessary to update the content of an iView as required. The intervals for the updating or "refresh" procedure can vary from once a day to every minute, from automatic to manual refresh. Setting this parameter will be handled via a Refresh button or personalized settings.

Note: Until now, there is no solution for automatically providing the refresh button in the tray. It must be placed within the iView manually and should be the rightmost button of the row which also contains iView's emphasized button (if there is any), i.e. usually at the bottom of the iView. Provide a hint on how old the information displayed in the iView is - don't just enter the last screen refresh date, but when the last query was conducted (if appropriate).

Further information: For information on messages in iViews see Messages; for error handling, error prevention and user support see Help and User Support.

Tray Types

Currently (ERP 5.0), there are four tray types available:

The form tray: a tray well suited to host forms
The border tray: a tray for complex content
The borderless tray: a simple tray
The text tray: a tray for texts

These tray types differ from each other on the following three dimensions:

header bar color,
background color, and
border color

Having a variety of tray designs at your disposal reduces the danger that a portal page has a monotonous visual appearance and helps users in differentiating iViews from each another.

Each of the trays comes with a name referring to its proposed content; we also provide the value that has to be assigned to the attribute design. The trays are presented here in order of their importance.

The Form Tray

The form tray (design = FORM) has a colored header bar, no outside border, and a light colored background color for the content. Use it whenever an iView's content consists of form elements, such as an entry field, a dropdown list box, checkboxes, or radio buttons: White input fields can be clearly distinguished from the slightly colored background of this tray type. Grouping of the elements sets them apart from the colored background.

Figure 3: The form tray

The Border Tray

The border tray (design = BORDER) has a colored header bar, an outside border, and no background color for the content. A collection of different elements is hardly recognized as a group. If such elements belong together they need a frame. Use this design to group such element collections and still retain a decent grouping.

Figure 4: The border tray

The Borderless Tray

The borderless tray (design = BORDERLESS) is the simplest tray type; it has a colored header bar, no outside border, and no background color for the content. Use this tray type for clearly shaped elements, e.g. link lists, that do not need an additional frame to group them. This design makes for a very light appearance of a portal page.

Figure 5: The borderless tray

The Text Tray

The text tray (design = TEXT) has a light colored header bar, no outside border, and a light colored background for the content (the same color as the header bar when the iView is in the open state). The slightly colored background makes text easier to read than a pure white background. This tray type is well suited to large amounts of body text, as they appear in news or articles.

Figure 6: The text tray

top