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.jsFrontend: Two Fiori Elements applicationsnav-source: Navigation source appnav-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 patternAnnotation configurationsVerification 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 initiatedGroup 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 LinkIntent-Based Navigation (IBN) ButtonDirect IBN LinkURL LinkRow-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 actionsHiding 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 namesPass association propertiesExclude 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 triggersNavigation 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.
IntroductionThere 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-patternsThis 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 StructureThis project has a simple structure:Backend: CAP Node.jsFrontend: Two Fiori Elements applicationsnav-source: Navigation source appnav-target: Navigation target appThe 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 patternAnnotation configurationsVerification stepsFigure 1: Excerpt from the project README illustrating navigation patterns and documentationYou 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 watchAfter starting the app, open the FLP sandbox (/launchpad) and launch the application. Organizing Navigation PatternsIn this repository, navigation is organized from two perspectives:Group A — Navigation Trigger: How navigation is initiatedGroup B — Navigation Context: How to control what data is passed to the target applicationSeparating these two aspects makes it easier to understand how Fiori Elements navigation works. Group A — Navigation TriggersGroup A introduces common patterns for triggering navigation:Semantic LinkIntent-Based Navigation (IBN) ButtonDirect IBN LinkURL LinkRow-click navigation replacementAll patterns can be tested directly in the nav-source List Report.Figure 2: Navigation trigger patterns displayed in the nav-source List ReportIn 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 actionsHiding specific actions from semantic object popovers Group B — Navigation ContextGroup 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 namesPass association propertiesExclude sensitive or irrelevant fields from the navigation contextThese 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 patternThe diagram above provides a practical guideline for selecting the appropriate navigation pattern based on your scenario. ConclusionFiori Elements navigation is powerful but can be difficult to understand due to the number of available patterns.This sample project organizes navigation into:Navigation triggersNavigation contextand 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. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
