User Interface Elements

Navigation Bar | Object Header | Tab Strip | Group Box | List Table

Navigation Bar

The navigation bar is mandatory and appears on all application pages except editing pages.

Title Bar

Figure 1: Navigation bar

Required Properties

  • Height: 27 pix
  • Width: 240 pix
  • SAP logo
  • Background color: #FFFFFF
  • Text size: 2
  • Text color: #000000
  • Bottom border:
    • Height: 2 pix
    • Width: 240 pix
    • Color: #FF9A00

The navigation bar is used on the ME home page, the start page, and application pages, with the following properties.

1) On the ME home page, the navigation bar displays "Welcome [Username]".

  • Text font: Bold and italic

Title Bar

Figure 2: Home page navigation bar

2) On the start page, the navigation bar displays a link to the ME home page.

  • Text font: Bold

Title bar

Figure 3: Start page navigation bar

3) On application pages, the navigation bar displays a navigation list box.

  • Links to the ME home and start pages should be contained in the navigation list.
  • Links in the navigation list box should be consistent with the links in the start page menu.
  • The list height should not exceed what can be displayed on the screen of the target device.

Recommended

Include a separator line between the application name and other links.

Title Bar

Figure 4: Application page navigation bar

Note: The navigation bar is not used on editing pages, where users must save or cancel to exit the screen.

 

Object Header

An object header is used to label an object, and display action and navigation icons.

Object Header

Figure 5: Object header

Required Properties

  • Header text:
    • Size: 2
    • Font format: Bold
    • Font color: White #000000
  • Spacing:
    • 1 pix space between left edge of page and text
    • 1 pix space between right edge of page and icon
    • 1 pix space between each icon
  • Icons
    • At minimum, provide the Back button
    • Provide Action icons relating to the object
    • On Editing pages: Only Save and Cancel should be provided.

Object Header

Figure 6: Object header with Save and Cancel icons

Optional

An object header can be used to keep navigational context if the object hierarchy if an application is very complex. However, this can lead to undesirably large object headers, and should be used with care. For example:

Object Header

Figure 7: Object header with path information

 

Tab Strip

A tab strip is used in the lowest level of navigation.

Tabstrip

Figure 8: Tab strip

Required Properties

  • Active tab text:
    • Size: 2
    • Font format: Bold
    • Font color: White #FFFFFF
  • Inacvite tab text:
    • Size: 2
    • Font format: Regular
    • Font color: Black #000000
  • Spacing between tabs: 1 pix
  • Leading and trailing space between the tab border and text: 2pix
  • Note: It is preferable to remove underlines in inactive tabs if possible. However, the current PocketIE does not support a CSS to remove underlines for links.
  • Underline
    • Height: 2 pix

 

Group Box

Group Box with Footer

Figure 9: Group box

Required Properties

  • Header text:
    • Size: 2
    • Format: Bold
    • Font color: #000000
  • Content text:
    • Sixe: 2
    • Format: Regular
    • Font color: #000000
  • Border
    • Line width: 1 pix
    • Color: #003366
  • Footer: Optional
    • Prev link is not displayed on the first page
    • Next link is not displayed on the last page

 

List Table

Required Properties

  • Table header text:
    • Size: 2
    • Format: Bold
    • Font color: #000000
  • Column header text:
    • Size: 2
    • Format: Bold
    • Font color: #000000
  • Column text:
    • Size: 2
    • Format: Regular
    • Font color: #000000
  • Table footer:
    • Space between paging icons: 2 pix
    • Paging: Current page / Total pages
    • Font color: #000000

Optional Properties

  • Icons can be added as shown below.
  • Filtering tabs can be added. The filtering tabs (A-E, F-J,…) should be changed according to languages, if possible.

List Table with Tabs

Figure 10: List table with tabs

List Table without Tabs

Figure 11: List table without tabs

  • If more filtering options for a table are available than can be reasonably shown with tabs, a single tab containing a dropdown list of the filtering options can be used. The list box should be preceded by the column label text of the filtered column.

    List Table with Dropdown

    Figure 12: Filtering options for a table

  • Displaying multiple rows per record in a table is allowed, though not recommended.

 

top top

Source:  SAP Style Guide for White-Collar Worker PDAs