Tray Sizes and Arrangement

Tray Sizes

Trays are the containers in which iViews appear. The tray is part of the portal framework, not part of the iView (more information on trays is available in iView Containers - Trays). Currently, there exist two tray versions: (1) the tray provided by the SAP Portal portal framework, and (2) the HTMLB tray. Both trays differ with respect to the functionality that they offer in the tray header (see iView Containers - Trays for details).

Note: Trays are reserved for use in iViews. They are not allowed for Web applications (IACs) or other application types.

Classes

The restriction of iView classes to three increases their reuse value and maximizes the flexibility for both 1024 x 768 and 800 x 600 monitor resolutions. The iView sizes are optimized for a screen resolution of 1024 x 768. In full-screen modus, there is no wasted space or horizontal scrolling if the iViews are exactly the recommended size. At a resolution of 800 x 600 there are a few pixels of extra space.

Trays come in different sizes, such as narrow, medium and wide iViews; below we present the different sizes that have been defined for use in the SAP portal environment.

Figure 1: Different types of trays, depending on the overall page layout

Despite the fact that we suggest the content not exceed a certain width in pixels, you as a developer should not define the width of your iView in pixels. The width of your iView content should be set to 100%.

Figure 2: iView sizes should be set to 100%

Arrangement in Columns

iViews of the same width should be organized into columns on a portal page. That is to say, narrow iViews appear only below other narrow iViews, medium iViews appear only below other medium iViews, etc. This arrangement of iViews into columns produces a harmonious effect and an organized appearance, helping the user to concentrate on the task at hand and not on unraveling a puzzle on the page. Cockpits, however, must not follow this rule.

Figure 3: Usage of different iView classes with respect to column layout of portal pages

Figure 4 (below) shows two schematic example pages, one negative (left), and one positive example (right) :

Yes

Figure 4: iViews must be organized in columns

For possible column arrangements see the following paragraph.

Column Arrangements

There are four kinds of columns: the full-size column is for Web applications (IACs), not for iViews; the narrow column is optimized for narrow iViews; the medium column is optimized for Medium iViews; the wide column is optimized for Wide iViews. The following are the available standard templates using these column types (see figure 5):

Figure 5: Templates for a screen resolution of 1024*768 (also usable for 800*600)

Placement

The initial tray position on a portal page cannot be determined by the developer but is set by the system administrator for a certain user role. Therefore, iView developers typically do not know, where their iViews will appear on a portal page. In addition, users may personalize their pages and change the position of iViews or remove them from the page.

Spacing

Spacing between Trays

The spacing between trays on a portal page is handled by the portal framework.

Spacing between Tray Border and iView Content

The exact spacing between the tray border and the actual content of an iView is determined by the portal framework and should not be changed by the iView developer (currently, this spacing is 10 pixels).

Spacing within iViews

For the rules regarding the spacing within iViews see page Layout within iViews.

top