Layout within iViews

General Considerations | Rules for Specific Controls

This page present layout rules for iViews. We start with general considerations about spacing and grouping of elements within iViews. Then follow rules for complex controls, such as tabstrips, group boxes, tables, and trees.

 

General Considerations

General Rules for Separating and Grouping Screen Elements

To separate and group screen elements within an iView, rely on the Gestalt Laws. The most prominent one, the Law of the "good Gestalt", states that the human brain always tries to organize the perceived elements into sensible structures. Following the Law of Proximity, items that are spatially near to each other are seen as belonging together - no group boxes needed!

Use white space for structuring information in iViews: Field groups, tables or compound elements like the shuffler should be separated from other elements by empty lines.

Example: Separate a shuffler by an empty line from the table below it.

Whenever possible, use empty lines instead of group boxes for clustering screen elements. Empty lines use less space and are visually less complex than group boxes (group boxes also currently interfere with the tray design).

Exception: When using narrow iViews of low height, there is little room left for the content. In this case, try to design the iView without separating elements, that is, without empty lines. Make sure that the layout does not become confusing!

Hint: Empty lines or columns can be realized by using a grid layout. Grid layouts can be nested.

Spacing Within iViews

For the exact spacing values within iViews, refer to the SAP Portals HTMLB Guidelines. However, application developers usually do not have to care about spacing values in pixels because they can use layout controls provided by HTMLB, which care for the correct spacing. Such layout controls are the grid layout and the flow layout; other controls may follow in the future. Application developers only need to consult the SAP Portals HTMLB Guidelines if these controls are not at their disposal and as long as these controls do not work as intended (in the latter case we also recommend not to set the spacing manually).

For developers who cannot use the HTMLB library, we provide the spacing rules in short. Please, refer to the SAP Portals HTMLB Guidelines for details and changed.

Overview of the Spacing Rules Within iViews

  • Spacing between tray and content:
    • Offset between tray border/header and content: 10 pixels
  • Spacing between grouped controls:
    • Spacing between primary and secondary groups: 10 pixels
    • Spacing between group controls with header and border: 10 pixels
    • Offset within groups, i.e. between group border and content: 5 pixels
    • Spacing within groups: 10 pixels between title and content, 10 pixels between content and buttons
    • Spacing between soft groups: 15 pixels horizontally, 30 pixels vertically
  • Spacing between single controls:
    • Vertical spacing between single elements: 5 pixels for fields and dropdown list boxes, 8 pixels for checkboxes and radio buttons
    • Horizontal spacing between multiple columns: 15 pixels
    • Horizontal spacing between label and input element, width of label column: Width of widest label plus an offset of 8 to 22 pixels
    • Spacing between selection element and label: 8 pixels for checkboxes and radio buttons

Starting Point for Placing Screen Elements

Start adding elements to an iView in its upper left corner. Do not insert spaces or other spacing elements manually - the correct distance to the iView frame will be created automatically when the iView appears in the portal.

What if there is no Content Yet?

Sometimes, an iView does not yet contain any information, for example if a "My Events" iView has not yet been personalized. Instead of just presenting the empty iView, use the opportunity to provide some text that explains the iView and its functions. This way no space is wasted and the user is given hints on how to operate the iView.

 

Rules for Specific Controls

Simple Form Elements

Simple form elements, such as fields, labels, selection elements (radio buttons and checkboxes), can be easily arranged in a tabular fashion using the grid layout. As grid layouts can be nested, one grid layout may be used for the global arrangement of the groups, while inner grid layouts care for the arrangement of the different field groups.

See the SAP Portals HTMLB Guidelines for instructions on how to use the grid layout for forms.

Tabstrips

Tabstrips may be used in iViews, for example to display different views. However, restrict their use to cases where the views look very differently (e.g. tables of different width) and where other presentations would cause an unstable environment.

Figure 1: Tabstrip with table inside

Tabs may contain dynamic information so that users get a quick overview and are informed about important data, events or changes within the views.

Nesting Rules

  • Tabstrips may contain tables or group boxes.
  • Tabstrips may not be nested! This is "information hiding."

For views and alternatives to tabstrips that consume less space, see Selecting Views.

Group Boxes

Group boxes may be used in iViews, but only if there are no other methods available for separating fields or information. We rather recommend considering using white space for grouping/separating elements.

Alternatives to Group Boxes

As alternatives to group boxes

  • Separate groups by white space or lines
  • Label groups with simple headings (possibly in combination with separators)

Group Box Types

HTMLB offers several group box types with different looks. The type is determined by the attribute design.

The primary (figure 2a, design = PRIMARYCOLOR) and secondary groups (figure 2b, design = SECONDARYCOLOR) allow to visualize groups through a simple, flat background color. Both are suitable for textual content. Controls with a white background color, such as input fields and checkboxes, stand out well on both group designs.

Figure 2a-b: Primary and secondary group

Header group 1 (figure 2c, design = SECONDARYBOXCOLOR ) is best suited for forms; its light body background color lets white input fields stand out well. Header group 2 (figure 2d, design = SECONDARYBOX) has a white body background color, which makes it unsuitable for forms. Textual content and lists work best with this group style.

Figure 2c-d: Header group 1 and 2

The group box design (figure 2e, design = SAPCOLOR) has a transparent body background. Because of its border and header bar, it has a quite dominant appearance.

Figure 2e: Group box (with header and frame)

Header

The group boxes have headers to describe their content (set it by using the attribute title). Phrase header titles either as object descriptions (e.g. "Address Data"), or as instructions (e.g. "Enter Address Data").

Nesting Rules

  • Do not nest group boxes.
    Exception: You may nest different group box types - but use this option with care.

  • Group boxes should not contain:

    • Tables
    • Tabstrips
    • Trees
  • Combination of Tray Types with Group Box Types: Currently, there are no specific rules as to which tray type should be combined with which group box type. Nevertheless, there does exist a rule of thumb: Always arrange group boxes from dark to light - if you have to use group boxes within trays, place lighter group boxes within darker trays.

Tables

Tables are "high-level" screen elements that present simple elements, such as fields, texts, or dropdown list boxes in a "grid" arrangement.

For details on the use of tables, take a look at PortalDataViewer and Tables. 

 

Figure 3: Table

Nesting Rules

  • You can place tables inside tabstrips (see figure 1 above)
  • Do not place tables inside group boxes.

Trees

Trees are like tables "high level" screen elements. You should avoid using trees in iViews, especially trees with more than 2-3 levels. Consider using dropdown lists, the shuffler (filter) or tabstrips in combination with tables in order to select partial data sets. This leads to a far less complex user interface than large trees that have to be scrolled or paged through.

Figure 4: Tree

Nesting Rules

  • You can place trees inside tabstrips
  • Do not place trees inside group boxes.

Images, Graphics, Charts

Images, graphics, charts etc. are on the same level as tables or trees. Therefore, the same nesting rules apply.

For details on the use of graphics and charts, see Graphics and Charts.

 

top top

Source:  SAP iView Guidelines