Navigation SAP Fiori For Web Design Guidelines.p
Navigation SAP Fiori For Web Design Guidelines.p
Navigation
Intro
Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new
screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new
screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).
SAP Fiori combines the hub-and-spoke navigation model with an application network model. A central home page (the SAP
Fiori launchpad home page or SAP Fiori launchpad spaces) is the center of all navigation paths. The user starts from the
home page and navigates forward into the apps through multiple screens. Multiple apps can form a process. The
ubiquitous back navigation function allows the user to go back to the previous screen. The user can always navigate back to
the launchpad home page via logo. The logo navigates back to the first page of the launchpad. This is often My Home, if
available.
Feedback
Hub and spoke and application network navigation model
Individual apps can be connected to build up navigation flows. There are different ways to build a connection:
By transferring context between apps, one modular app can build on the input of the previous app(s). This way, individual
apps can be reused in different contexts. More complex functionality can be combined using individual modules or apps.
After each navigation step, the user can always navigate back using the browser’s back button or the back arrow icon in
the shell bar.
Back Navigation
The user can always navigate back to the previous page with the back button in the upper left corner of the shell bar. In
addition, the browser’s back arrow icon ( ) offers the same function. The browser history can be used to go back to previous
steps. All pages can be bookmarked and the URL can be forwarded to give other users access to the same page.
Exceptions
Switching between display and edit mode is not a navigation step and therefore does not result in a new URL. An exception is
made for the draft. Here, a unique number is added to the URL to distinguish drafts from active documents.
More information:
For more information, check out the navigation section of the flexible column layout article.
After switching to edit mode, a GUID is added to the URL to identify the current draft version. The user may bookmark the
current changes as a draft version. If the user switches back to display mode via Save, the object will be shown with the
saved changes. If the user switches back to display mode via Cancel, the object will be shown without the changes.
When the user navigates to a bookmarked draft version, a dialog pops up prompting the user to decide whether the
application should continue in edit mode with changes of the draft version, or whether the active version should be shown
in display mode.
Exceptions
If another user is locking the object, the active version is shown with the status Locked by… in display mode.
If another user’s lock on an object has expired, the active version is shown with status Unsaved Changes
in display mode.
The behavior in edit scenarios is described in the article on managing objects. More information about deep linking and
bookmarking can be found in the draft handling article.
1. Always create a new entry in the browser history when the user opens a new app. When the user navigates to a
different page within the same app, create a new entry to allow back navigation to the previous page. In these cases,
users can return to the previous page using the back button or the browser’s back arrow icon.
2. Replace the URL in the browser history if only parts of the page are changed. This is important to avoid
unnecessarily long back chains when navigating back in the browser history. An example of this is when the user
selects an item in the list column of a flexible column layout on a tablet or desktop device. On smartphones, the
flexible column layout is divided into separate pages, and rule 1. above applies: a new entry needs to be added to the
history. You will also need to replace the URL when the user navigates through a list of items using the up/down
arrows, or applies a filter to a list.
3. Keep the same URL if you don’t need to mark a new state for the app. This could be the case after choosing a
selection. The URL also stays the same when switching between display and edit modes (see exception below).
Exception
There is an exception when working on a draft version (see Edit and Display). In this case, the URL stays unchanged and a
GUID is added to identify the draft version.
Tip: Learn more about bookmarking and deep linking in the draft handling article.
Deep Links
A page of an application that is not its entry page can be bookmarked or shared as a deep link. Ideally, the full UI state of the
page is retrieved. Technically, this includes every part that is represented in the URL.
For example, a list-detail app in a flexible column layout gets a new URL when another entry is selected in the list and shown
in the details area. This state with the new item can be used as a deep link.
If a deep link to an application is called and there are no SAP Fiori entries in the browser history, do not display a
back button.
Apps with draft handling functionality allow deep linking to a page in edit mode. Apps without draft handling allow deep
linking only to the display mode of an object. In the latter case, the deep link always navigates to the display mode. For more
information about deep linking and bookmarking for drafts, see Draft Handling.
For more information about deep linking and bookmarking for drafts, see the draft handling article. For the flexible column
layout, see the flexible column layout article.
Quick View
Users can navigate from a quick view to those of the different users/objects. In this case, a back button is placed on the top
left of the quick view box to allow the user to navigate back to the first or previous quick view. All other links lead to new
pages and close the quick view.
Example of a quick view
Smart Link
The smart link opens a popover containing detailed information about the corresponding object, as well as links to related
apps. Opening related apps follow the guidelines described in the section Navigation within Apps.
Example of a quick view
Any SAP Fiori app should run in a standard HTML5 browser. Like with any other webpage, users can create shortcuts
to either the launchpad or the individual app to support a more integrated experience. The user can save a reference to an
app on the desktop or home page of the native OS. When this reference is followed, the app can be launched directly,
bypassing the SAP Fiori launchpad home page. On smartphones, this hides the browser controls and displays the app in full-
screen mode.
Related Links
Related Articles
My Home
© 2024 SAP SE. All rights reserved. Privacy | Legal Disclosure | Copyright | Terms of Use | Go.SAP.com | SAP Community Network
Cookie Preferences