Structure and Layout
Overview | Start Page |
Application Pages
Overview
- ME Applications have their own start page, which contains a menu
list of the top-level functions (similar to business components in CRM).
- A list page is shown immediately after objects (e.g. partners, products,
etc.) are specified in a menu list or navigation
list.
- Detail pages for the specified object have their
own object header.
- Lowest level pages have tabstrips
for displaying information (subscreens) and objects relevant to the
selected object.

Figure 1: Overview of the page hierarchy
for ME applications
Start Page
The start page is the first screen a user sees after starting the
application. It offers a main menu, which is titled by the name
of the application.
- Text font: Arial
- Text color: Black #000000
- Text size: 2
- Links format: Underline
- Links color: #225A8D
Required
The navigation bar with the SAP
logo should be displayed, with the SAP logo linking to the ME home
page.
A link to the the ME home page should be provided on the right
side of the navigation bar.
The group box for the menu is mandatory.
|

Figure 2: Example of a start page
|
Optional
A group box
for synchronization should be included only if the application must
handle synchronization independent of the SAP Mobile Infrastructure.
|

Figure 3: Example of a synchronization group
box
|
Application Pages
In application pages, users can perform various actions, such as viewing,
listing, editing, saving, etc.
Level 1 Pages: Lists
Required
The label displayed from the navigation
list should correspond to the objects listed in the page.
The table list is used for listing selected objects.
Navigation
This page would be displayed after selecting Customers in
the start page menu. On this sample page, three customers are displayed,
with customer numbers. Clicking a link in the No. column
opens the detail page for the selected customer.
|

Figure 4: Example of an application
page at level 1 (lists)
|
|
|
Level 2 Pages: Details
Required
The label displayed from the navigation
listfor example, Customersshould correspond
to the objects listed in the page.
The object header
should display the selected object Customer 1.
The group box
is displaying the detail information.
Additional tabs
should be used for additional detail information relevant to the
object.
Navigation
Selecting a tabfor example, the Orders tabgoes
to level 3.
|

Figure 5: Example of an application
page at level 2 (details)
|
|
Level 3 Pages: Lists/Details
Required
The label displayed from the navigation
listfor example, Customersshould correspond
to the objects listed in the page.
The active tab should be changed according to user's selection.
A list table
for objects relevant to the selected tab should be displayed.
Navigation
Clicking links in the tablefor example, the 301 link
would link to a level 2 detail
page.
|

Figure 6: Example of an application
page at level 3 (lists/details)
|
|
Editing Pages
Required
The entire navigation
bar should be removed so that the user is forced to explicitly
save or cancel to exit this page. Any links that can exit this page
without explicitly saving or canceling should not be available on
editing pages.
- Text font: Arial
- Text color: Black #000000
- Text size: 2
- Links format: Underline
- Links color: #225A8D
- Required fields indicator (asterix)
- Color: Red #D0001D
- Format: Bold
Recommended
If one object contains many fields to be edited, it is preferable
to add a link to avoid vertical scrolling.
Navigation
Application users can exit this page only by clicking the Save
and Cancel icons located in the object header.
|

Figure 7: Example of an editing page
|
|
top
Source: SAP
Style Guide for White-Collar Worker PDAs
|