Fiori Elements Navigation Patterns Showcase

[MioYasutake]

Introduction

There are multiple ways to navigate from a Fiori Elements application to another application (outbound navigation).

While the SAPUI5 documentation explains each annotation in detail, it is often focused on code snippets, making it difficult to visualize how each navigation pattern actually behaves in the UI.

To address this, I created a sample repository that demonstrates various Fiori Elements navigation patterns along with their actual UI behavior.

https://github.com/miyasuta/fiori-navigation-patterns

This repository focuses on navigation patterns that can be implemented using annotations only.
Controller extension-based approaches are out of scope and may be covered separately in the future.

In this blog, I will provide an overview of this sample project.

 

Project Structure

This project has a simple structure:

• Backend: CAP Node.js
• Frontend: Two Fiori Elements applications
  • nav-source: Navigation source app
  • nav-target: Navigation target app

The nav-source app demonstrates various navigation patterns, while the nav-target app shows how navigation context is received.

The README includes:

• UI screenshots for each navigation pattern
• Annotation configurations
• Verification steps

Figure 1: Excerpt from the project README illustrating navigation patterns and documentation

You can either read the README or run the project locally to explore the behavior yourself.

git clone https://github.com/miyasuta/fiori-navigation-patterns.git
cd fiori-navigation-patterns
npm install
cds watch

After starting the app, open the FLP sandbox (/launchpad) and launch the application.

Organizing Navigation Patterns

In this repository, navigation is organized from two perspectives:

• Group A — Navigation Trigger: How navigation is initiated
• Group B — Navigation Context: How to control what data is passed to the target application

Separating these two aspects makes it easier to understand how Fiori Elements navigation works.

Group A — Navigation Triggers

Group A introduces common patterns for triggering navigation:

• Semantic Link
• Intent-Based Navigation (IBN) Button
• Direct IBN Link
• URL Link
• Row-click navigation replacement

All patterns can be tested directly in the nav-source List Report.

Figure 2: Navigation trigger patterns displayed in the nav-source List Report

In addition to the main patterns, the repository also covers a few supplementary behaviors, such as:

• Dynamic semantic objects (supported only for semantic links)
• Conditional visibility of navigation actions
• Hiding specific actions from semantic object popovers

Group B — Navigation Context

Group B explains how to modify parameter mappings and control which data is passed (or not passed) to the target application.

In particular, it covers how to:

• Map local fields to different parameter names
• Pass association properties
• Exclude sensitive or irrelevant fields from the navigation context

These patterns help you control exactly what information is transferred during navigation and how it is interpreted by the target application.

Which Navigation Pattern Should You Use?

Since there are multiple options, it is not always obvious which pattern to choose.

This repository provides a simple decision guideline:

Figure 3: Decision guideline for choosing the appropriate navigation pattern

The diagram above provides a practical guideline for selecting the appropriate navigation pattern based on your scenario.

 

Conclusion

Fiori Elements navigation is powerful but can be difficult to understand due to the number of available patterns.

This sample project organizes navigation into:

• Navigation triggers
• Navigation context

and allows you to explore both aspects through working examples.

I hope this repository helps you better understand and design navigation in your Fiori Elements applications.