Overview
In S10 applications, users can directly jump to SAP transactions or Fiori apps to retrieve additional information or perform further actions. These navigation jumps can be integrated flexibly at different points in the application:
  • In info blocks in the detail area of an object:
    Buttons provide a clear way to implement navigation.
  • Directly in a table or list:
    An order number can be displayed as underlined text that triggers navigation on click.
  • In action bars or via icons:
    Icons or links can also serve as navigation entry points.
General Approach
Navigation is always performed via a JavaScript function that generates the appropriate URL to a SAP transaction or Fiori app. The basic structure remains the same regardless of whether the call is triggered by a button, text, or icon.

HTML base structure:

HTML
General JavaScript function:

JavaScript
Option 1: Navigation via button in an info block
This variant is especially suitable for detail sections of an object. The user expands an entry and clicks a button inside the info block to navigate.

HTML example:

HTML
JavaScript function:

JavaScript
Option 2: Navigation directly from a table/list (e.g. underlined order number)
Another option is navigation directly from a table or list. Here, an underlined order number acts as a clickable link.

HTML example:

HTML
The function display_maintenance_order() uses the text content of the <div> as a parameter and opens the transaction with the corresponding order number.
Option 3: Navigation via icons or action bars
Besides buttons and text links, icons or symbols can also be used as navigation entry points. This is especially useful for quick access in toolbars or tables.

HTML example:

HTML
Important Notes and Tips
  • Info blocks structure detail areas: They are ideal for navigation to deeper information.
  • Place navigation wisely: Underlined text in tables is intuitive for users.
  • Use outside info blocks: Toolbars and quick actions can also contain navigation triggers.
  • Fiori URL analysis: Use browser developer tools to inspect Fiori app URLs.
Summary
Navigation to SAP transactions or Fiori apps provides a flexible way to give users quick access to external applications. It can be integrated in different ways:
  • In info blocks as buttons
  • In tables as clickable text or icons
  • In toolbars for quick access
The key component is the JavaScript function that builds the correct target URL.

Component S10 Framework