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.

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
|

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

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.
|

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.

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.

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:

Figure 7: Object header with path information
Tab Strip
A tab strip is used in the lowest level of navigation.
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
Group Box

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.

Figure 10: List table with tabs
|

Figure 11: List table without tabs
|
top
Source: SAP
Style Guide for White-Collar Worker PDAs
|