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.

    Structure Chart


    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.

 

Start Page

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.

Synchronization group box

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.

 

List Page

Figure 4: Example of an application page at level 1 (lists)

Level 2 Pages: Details

Required

The label displayed from the navigation list—for example, Customers—should 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 tab—for example, the Orders tab—goes to level 3.

Detaill Page

Figure 5: Example of an application page at level 2 (details)

Level 3 Pages: Lists/Details

Required

The label displayed from the navigation list—for example, Customers—should 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 table—for example, the 301 link —would link to a level 2 detail page.

 

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.

Editing Page

Figure 7: Example of an editing page

 

top top

Source:  SAP Style Guide for White-Collar Worker PDAs