Intro

This article describes how to navigate to create, display, and edit screens from a list report when you need to integrate classic UIs for some or all of these actions.

SAP Fiori apps vs. Classic UIs

In addition to SAP Fiori, SAP S/4HANA uses other UI technologies, such as SAP Web GUI and WebDynpro, which were available prior to SAP Fiori. We refer to these technologies as classic UIs.

In many cases, an SAP Fiori app and a classic UI are available. They are often used in parallel to create, edit, or display objects. The SAP Fiori app can differ from the classic UI in two ways:

• The SAP Fiori app covers parts of the broader scope of the classic UI. This can be due to strategic decisions to exclude edge cases or because the full scope isn’t yet covered.
• The SAP Fiori app offers additional functions not available in the classic UI.

Navigation to Classic UIs

Classic UIs for create, edit, and display actions were not part of the standard SAP Fiori navigation flow from the SAP Fiori elements list report. This means that each classic UI needed a tile on the launchpad.

Now, the list report supports direct navigation to the classic UIs, thus supporting the standard navigation from a list report to business objects. Tiles on the launchpad are not necessarily needed. See the example.

Technical Background

Classic UIs for displaying and editing objects start with a selection screen that requires the ID of the object. After entering the ID, the user navigates to the display or edit screens.

The SAP Fiori elements list report skips the entry screen and navigates directly to the classic UI. Changes carried out in the classic edit UI are reflected in the list report. Objects created using the classic create UI are also reflected in the list report.

When to Use

Use the list report as the entry point for:

• Searching, filtering, and navigating to objects in classic UIs to edit and display them
• Creating objects using a classic UI

Components

In the list report, you can offer navigation to classic UIs via the table toolbar or within a line item. If users need to access both the SAP Fiori and classic UIs for the same task, you can offer both side by side. This section outlines which UI elements to use.

List report – UI elements

1. Table toolbar
   For the create action, you can choose either a simple or a split menu button:
   1. Simple button
      Use it if you want to offer direct access to the create app.
   2. Split menu button
      Use it if both an SAP Fiori app and a classic UI are available for the create action.
2. Line item
   For display and edit, you have the following options:
   1. Navigation Use it to navigate directly to the object in display mode.
   2. Edit Use it to navigate directly to the object in edit mode.
   3. Smart link
      Use it to show all edit and display navigation options.

Navigation Flows

The navigation flows depend on the mix of SAP Fiori apps and classic UIs that you need to open from your list report. This section outlines the typical navigation flows for three use cases:

• Classic UIs only
  Classic UIs are used for all actions (create, display, edit)
• Mainly SAP Fiori apps (~80% SAP Fiori apps)
  For most create, edit, and display tasks, SAP Fiori apps are available and cover the most essential features. The corresponding classic UIs offer features not yet implemented in the SAP Fiori app. For a few tasks, only classic UIs are available.
• Mainly classic UIs (~20% SAP Fiori apps)
  For create, edit, and display tasks, classic UIs are available. SAP Fiori apps are either not available or do not offer all features of the corresponding classic UI.

Classic UIs Only

Use the list report as the entry point for navigating to the classic UIs.

Create, Edit, Delete – Classic UIs Only

Create, display, edit – navigation to classic UIs only

In the list report, the user chooses:

1. Create button
   The classic create UI opens. On the create page, the main navigation options are:
   • Finalizing action Create: Saves the object and goes back to the list report.
   • Exit action: Exits the create UI and navigates to the list report.
   • Cancel action: Discards any entries and goes back to the list report.
2. Navigation
   The classic display UI opens. On the display page, the main navigation options are:
   • Shell bar back icon : Goes back to previous page (list report).
   • Edit action: Switches to the classic edit UI.
3. Edit The classic edit UI opens. On the edit page, the main navigation options are:
   • Finalizing action Save: Saves the object and goes back to the list report.
   • Shell bar back icon : Goes back to previous page (list report).
   • Exit action: Exits the edit UI and navigates to the list report
   • Display action: Switches to classic display UI.
   • Cancel action: Discards any entries and goes back to the list report.

Mainly SAP Fiori Apps

This section outlines the flows for the following scenario:

• For creating a purchase order, both an SAP Fiori app (most essential features) and a classic UI (all features) are available. Depending on their needs, users can decide where to create the purchase order. See Integration of SAP Fiori App and Classic UI for Create.
• For displaying and editing a purchase order, both an SAP Fiori app (most essential features) and a classic UI (all features) are available. The default navigation points to the SAP Fiori app. However, the smart link also allows users to navigate to the classic edit and display UIs. See Integration of SAP Fiori App and Classic UI for Display and Edit.

Create – SAP Fiori app and Classic UI

Create – navigation to SAP Fiori app or classic UI via split menu button

In the list report, the user chooses from the split menu button Create:

1. Purchase Order
   The SAP Fiori create app opens. The main navigation options are:
   • Finalizing action Create: Saves the object and goes back to the list report.
   • Shell bar back icon : Goes back to previous page (list report).
   • Cancel action: Discards any entries and goes back to the list report.
2. Purchase Order (ME21N)
   The classic create UI opens. The main navigation options are:
   • Finalizing action (Create in the example): Saves the object and goes back to the list report.
   • Exit action: Exits the create app and navigates to the list report.
   • Cancel action: Discards any entries and goes back to the list report.

Display, Edit – SAP Fiori App (Default) and Classic UIs

Display, edit – navigation to SAP Fiori app or classic UIs

In the list report, the user chooses:

1. Navigation The SAP Fiori display app opens. On the display page, the main navigation options are:
   • Shell bar back icon : Goes back to previous page (list report).
   • Edit action: Switches to SAP Fiori edit app.
2. Edit
   The SAP Fiori edit app opens. On the edit page, the main navigation options are:
   • Finalizing action Save: Saves the object and goes back to the list report.
   • Shell bar back icon : Goes back to previous page (list report).
   • Cancel action. Discards any entries and goes back to the list report.
3. Smart Link
   Both SAP Fiori and classic display and edit apps are available.

Mainly Classic UIs

This section outlines the flows for the following scenario:

• For creating a purchase order, only a classic UI is available.
• For displaying a purchase order, both an SAP Fiori app (most essential features) and a classic UI (all features) are available. In this case, the SAP Fiori app is used.
• For editing a purchase order, only a classic UI is available.

Create – Classic UI Only

Create – navigation to classic UI only

In the list report, the user chooses Create (1).

The classic create UI is opened. On the create page, the main navigation options are:

• Finalizing action (Create in the example): Saves the object and goes back to the list report.
• Exit action: Exits the create app and navigates to the list report.
• Cancel action. Discards any entries and goes back to the list report.

Display – SAP Fiori App (Default) and Classic UI

Display – navigation to SAP Fiori app or classic UI

In the list report, the user chooses the navigation icon (2).

The SAP Fiori display app opens. On the display page, the main navigation options are:

• Edit action: Switches to the classic edit UI.
• Shell bar back icon : Goes back to previous page (list report).

The user can navigate to the classic display UI using the smart link.

Edit – Classic UI Only

Edit – navigation to classic UI only

In the list report, the user chooses the edit icon (3).

The classic edit UI opens. On the edit page, the main navigation options are:

• Finalizing action (Save in the example): Saves the object and goes back to the list report.
• Shell bar back icon : Goes back to previous page (list report).
• Exit action: Exits the edit UI and navigates to the list report.
• Display action: Switches to the SAP Fiori display app.
• Cancel action: Discards any entries and goes back to the list report.

Example

Before: In Purchasing, the user navigates to the classic UIs to create, edit, and display purchase orders using tiles on the launchpad.

Launchpad

Now: The user navigates to the classic UIs via the Manage Purchase Orders list report.

Launchpad and list report

From the list report, the user can:

1. Create a purchase order.
   The split menu button enables navigation to both the SAP Fiori app and the classic UI (ME21N).
2. Edit a purchase order (classic UI ME22).
3. Display a purchase order (classic UI ME23N).

Top Tips

• If your SAP Fiori apps and the corresponding classic UIs cover the same features, just offer the SAP Fiori apps within your navigation.
• Collect all SAP Fiori and classic UIs for create, edit, and display actions and define a navigation flow, starting from the list report.
  Use the example flows as a reference.
• For navigating from the list report:
  • For create, use a button.
  • For edit and display, use the line item edit and navigation icons and a smart link.
• If you need to offer both an SAP Fiori app and a classic UI via the create button or a smart link:
  • Place the SAP Fiori app first and the classic UI below.
  • Add the transaction code for classic UIs in parentheses:
    <action (transaction code)>
  • In the split menu button, show Create on the button and the object type (such as Purchase Order) in the menu list.
  • In the smart link, show all edit and display apps and UIs.

Related Links