[[{“value”:”
Introduction:
This blog is going to help the people who just started the journey in SAPUI5/Fiori. It’s very basic level content which would help the beginners to understand Cross App Navigation and how it works.
In enterprise SAP applications, navigation isn’t just about moving between pages. it’s about maintaining consistency, security and scalability across multiple apps. That’s where the FLP friendly approach came into the picture.
If you are building apps with SAPUI5 inside the SAP Fiori Launchpad, relying on raw URLs or window.location is a shortcut that will eventually cause problems. Instead, SAP provides a structured service for cross-application navigation.
Overview:
Cross-App Navigation is a way for one app to open another app by describing what you want to do, not where it is. It also known as Intent-Based Navigation
One Liner: Cross-App Navigation = Navigate by intention, not by URL, with FLP resolving the correct app dynamically.
As a quick analogy which will help you to understand easily and recall it wisely.
Imagine that you are going to a hospital for the first time, you wouldn’t usually say/ask that you have to go to building B, floor 3, room 27. Instead you would prefer to say, I need to see a cardiologist. Then the hospital directs you correctly.
That’s exactly how navigation works in SAP using semantic intent. We have to describe what we have to do, not where it is.
Picture 1: SAP Fiori Navigation
Key Concepts
1. Semantic Object – Represents a business entity (e.g., Supplier, SalesOrder)
2. Action – Defines what you want to do (e.g., display, create, manage)
3. Parameters – Used to pass data between apps (like SupplierId)
How it works?
Let’s understand how it works. SAP recommends using the CrossApplicationNavigation service, which actually works on semantic objects and actions.
Example Snippet:
Source App:
// In our Source or current app:
sap.ushell.Container.getService(“CrossApplicationNavigation”)
.toExternal({
target: {
semanticObject: “SupplierQuotation”,
action: “display” // action can be like anything (display or manage)
},
params: {
supplierId: “SUP123” // As usual Key value pair, Here SalesOrderId is Key Property & 12345 is the value
isActive: false // Please convert this as Boolean value at target app
}
});
Snippet 1: Source App Code – To do Cross App
Target App:
// In our Target App:
onInit: function () {
const oComponentData = this.getOwnerComponent().getComponentData();
const oParams = oComponentData?.startupParameters;
if (oParams && oParams.supplierId) {
const sSupId = oParams.supplierId?.[0]; // always array
const bIsActive = Boolean(isActive?.[0]); // always array & we are converting to boolean using Boolean(X)
console.log(“Supplier Id:”, sSupId);
console.log(“Is Active:”, bIsActive ? “Yes” : “No”);
}
}
Snippet 2: Target App Code – To handle parameters
This is how we can retrieve it and handle the data.
What Happens Behind the Scenes?
When you trigger navigation:
- FLP resolves the intent (#SupplierQuotation)
- Matches it to a configured app
- Launches the correct application
- Passes parameters securely
URL Understanding: (Let’s Breakdown)
#SupplierQuotation-display?supplierId=SUP123&isActive=true
Picture 3: SAPUI5 Intent based Navigation – URL Understanding
For your understanding:
URL => #SupplierQuotation-display?supplierId=SUP123&isActive=true
# => means FLP Routing trigger
Supplier => means Semantic Object
display => means Action
? => means start of the parameters
supplierId=SUP123&isActive=true => means Business Data
/*IMPORTANT*/
How it basically passes: {
supplierId: [“SUP123”],
isActive: [“true”]
}
Snippet 3: URL Understanding Notes
Why Not Use Direct URLs?
We can navigate like this: window.location.href = “/sap/bc/ui5_ui5/sap/Z_SALES_APP/index.html?orderId=123”;
But this approach:
- Breaks in FLP environments
- Ignores role-based navigation
- Doesn’t integrate with intent-based routing
- Becomes hard to maintain across landscapes
Benefits of FLP Navigation:
- Role-based access control
- Loose coupling between apps
- Centralized navigation configuration
- Works across systems (Dev, QA, Prod)
- Supports deep linking & bookmarks
Challenges of FLP Navigation:
While handling SAPUI5 navigation parameter, we have to keep in our mind, that values are always wrapped as arrays, String representation even though it got passed as Number or Boolean and so we have to convert it properly in the target app.
Picture 4: SAPUI5 Navigation Parameter Handling Challenges
When Should You Use This?
Use FLP navigation when:
- Moving between SAP Fiori apps
- Working inside Launchpad
- Building enterprise-grade solutions
Avoid it only if you’re building a standalone UI5 app outside FLP
Conclusion:
Overall, cross app navigation in FLP separates intent from implementation, allowing applications to remain loosely coupled, easier to maintain and aligned with enterprise-level standards.
Hope that you got some idea about Cross app navigation in SAPUI5 in FLP Intent way.
Thank you for taking the time to read this blog! If you found this helpful, i would love to hear your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!
I’m still new to blogging, so if you notice anything that could be improved or corrected, please don’t hesitate to let me know!!
“}]]
#abap