Subject: SAP-Fiori-Design-Guidelines
Domain: SAP User Experience and Application Development
Effective navigation is a cornerstone of great user experience in SAP Fiori applications. As SAP Fiori evolves, complex business scenarios require more sophisticated navigation techniques to maintain clarity, efficiency, and usability. Implementing advanced navigation patterns within SAP Fiori apps ensures users can easily access relevant information, switch contexts seamlessly, and complete their tasks without confusion.
This article explores advanced SAP Fiori navigation patterns, their importance, and practical implementation strategies aligned with SAP Fiori design guidelines.
Basic navigation like simple page-to-page linking may suffice for straightforward apps. However, real-world enterprise applications often involve complex data relationships, multiple user roles, and layered workflows. Advanced navigation patterns help by:
SAP Fiori’s design guidelines emphasize navigation consistency and role-based context to empower users in complex environments.
The Flexible Column Layout (FCL) pattern enables responsive multi-column views where users can drill down into detailed information without losing the context of their initial page.
sap.f.FlexibleColumnLayout control in SAPUI5 apps to split the screen into up to three columns: master, detail, and detail-detail.Semantic object navigation decouples navigation from specific URL paths, using semantic objects and actions defined in the SAP Fiori Launchpad.
CrossApplicationNavigation service to enable navigation to other apps or specific views within apps based on semantic objects.Intent-based navigation uses a combination of semantic objects and actions to determine navigation targets dynamically.
Dialogs and popovers enable contextual navigation without leaving the current screen, supporting quick interactions and secondary tasks.
sap.m.Dialog and sap.m.Popover for lightweight, modal or non-modal interaction windows.Breadcrumbs display the user’s navigation path, enabling easy backtracking through hierarchical data structures.
sap.m.Breadcrumbs control to show the path dynamically based on navigation context.Here’s a quick overview of how to implement some advanced navigation features in SAPUI5:
var oFCL = new sap.f.FlexibleColumnLayout({
layout: "TwoColumnsMidExpanded",
beginColumnPages: [new sap.m.Page({title: "Master Page"})],
midColumnPages: [new sap.m.Page({title: "Detail Page"})]
});
var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
var hash = (oCrossAppNavigator && oCrossAppNavigator.hrefForExternal({
target: { semanticObject: "SalesOrder", action: "display" },
params: { "SalesOrderID": "12345" }
})) || "";
oCrossAppNavigator.toExternal({ target: { shellHash: hash } });
var oDialog = new sap.m.Dialog({
title: 'Edit Details',
content: [/* UI controls */],
beginButton: new sap.m.Button({
text: 'Save',
press: function () {
oDialog.close();
}
}),
endButton: new sap.m.Button({
text: 'Cancel',
press: function () {
oDialog.close();
}
})
});
oDialog.open();
Implementing advanced navigation patterns in SAP Fiori is critical for creating rich, user-friendly applications that support complex workflows and enterprise-scale scenarios. Leveraging SAP Fiori’s flexible column layouts, semantic object navigation, intent-based navigation, and contextual dialogs ensures that users can navigate seamlessly and efficiently.
By following SAP Fiori design guidelines and best practices, developers and UX designers can deliver intuitive navigation experiences that reduce user effort, improve productivity, and enhance overall satisfaction in SAP landscapes.