- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Launchpad Shell Bar
Intro
Components
Launchpad shell bar - Components
The SAP Fiori launchpad always contains the following:
- Back button (when an app is launched)
- Area for branding purposes (1)
- Page title (and an optional second title) with navigation menu (2)
- Enterprise search (3)
- CoPilot button (4)
- Optional actions
- Notifications button (5)
- User actions menu (6)
Back and Branding Area
When an app is launched, the Back icon is displayed next to the branding element.
Back navigates to the previously visited screens. The branding element takes the user directly to the home page.
If the user is editing an object in an application without draft handling, and tries to navigate away via Back or Home, show a data loss message.
The branding area usually shows the company logo, as defined by the administrator. The branding area cannot be left out.
If a deep link to an application is called, and there are no SAP Fiori entries in the browser history, do not display the Back button.
Shell bar with 'Back' button and branding area
Page Title and Navigation Menu
Page Title
The title inside the shell always indicates the user’s position in the system. The navigation menu is a quick way to browse the hierarchical structure of applications.
For the home page, the title is Home. In the app finder, it changes to App Finder.
In the initial screen of an application, the title is usually the application name, such as Manage Products. This name must match the app name used on the launchpad tile.
When the user navigates to a different page or subpage, the title should change to reflect the page content. On an object page, for example, the page title is the name of the business object.
Exception: Flexible Column Layout
In the flexible column layout, the shell bar displays the application name. The title only changes when the user switches to full screen mode or navigates. On size S, the title changes when the user navigates between the different panels.
The second title is an optional part of the launchpad shell bar. You can use it to declare specific system specifications, such as SAP Fiori Demo Cloud Edition. Do not use it for a welcome text or for similar purposes.
Shell bar with branding area and second title
Navigation Menu
Clicking the page title in the shell bar opens the drop-down navigation menu. The height of the container depends on its content.
To close the menu again, users can click the page title, click anywhere outside the navigation menu, or click the drop-down arrow.
This interaction applies for all device types.
All My Apps
All My Apps lists the main applications assigned to a user’s role. For example, apps from the home page group and the app finder (catalog).
Navigation Hierarchy
The navigation menu displays the previous navigation steps within an application that led to the current page. The current hierarchy level is represented by the page name only. Selecting a navigation entry opens the respective page in-place.
The menu only shows hierarchy levels within the current application, and there is only one entry per hierarchy level.
The entry page of an app always displays as “Home”, and is the first entry. Drill-in navigation adds further hierarchical entries to the navigation menu. If a user navigates to an app using a deep link, the navigation menu also shows the hierarchy levels for the previous app.
The entries are ordered according to the hierarchy, starting with Home, down to the current hierarchy level (= page name). Each entry consists of a title, subtitle, and icon.
- Use the title to display the name of the previous page (mandatory).
- Use the subtitle to describe the previous object (optional).
- Use the application icon if the previous page was the application start page (mandatory if an application icon was defined).
- Use the default icon for further navigation steps, or if no application icon was defined.
SAP CoPilot
Clicking the Open CoPilot button in the shell bar opens SAP CoPilot in a pop-up window. Users can drag the window to the desired position. The system memorizes this position and opens SAP CoPilot in the same spot next time.
To close SAP CoPilot, users can either click the cross icon ( ) on the top right of the dialog, or click the SAP CoPilot icon again in the shell bar.
Enterprise Search
The Search icon for the enterprise search is on the top right, to the very left of the group. You can use it to search across all apps and business objects, such as materials, customers, and maintenance plans. Users can search function from any screen within the SAP Fiori launchpad.
Optional Actions
In addition to the buttons for the enterprise search, SAP CoPilot, and notifications, key users or administrators can add more actions to the shell bar. The optional actions are placed to the right of the search button. If an action is placed in the shell bar, it is no longer available in the user actions menu.
Since actions in the shell bar are very prominent, we only recommend placing additional actions in the shell bar if users need to access them frequently.
Responsiveness
The launchpad shell bar is fully responsive.
On size S, the search and notifications are displayed behind the overflow menu icon.
When an application is launched, the launchpad shell bar changes its appearance. The app title merges into the shell bar. In addition, a Home button and a Back button are visible next to the branding area.
Lean Mode
The user can right-click a tile and choose Open Link in New Tab or Open Link in New Window from the context menu. In these cases, the app opens in lean mode, and its shell only shows contextual services for the app.
The lean mode was introduced to avoid inconsistent behavior when working with different tabs or windows in parallel, and to improve performance.
The following services do not appear in lean mode:
- Shell: Home, Enterprise Search, Notifications
- Navigation Menu: Related Apps, All My Apps, Home (from navigation hierarchy)
- User Actions Menu: Settings, App Finder, Recent Activities, Frequently Used
Standalone Mode
If an application supports standalone mode, it can be run directly by specifying the SAPUI5 component of the application in the URL. In this case, administrators don’t need to configure target mapping and a catalog, or assign the catalog to relevant users on an ABAP-based front-end server. Administrators can also configure the header bar of a standalone application to hide some of the UI elements provided by the shell bar, or hide the header bar altogether.
The standalone mode gives users direct access to selected apps that do not require contextual navigation. It is relevant for the following two use cases:
- Launching an SAP Fiori app directly by calling a URL, without showing the SAP Fiori launchpad to the end user
- Launching an app as an iView in the SAP Portal without showing the SAP Fiori launchpad to the end user
As a result, some shell bar components might not be necessary in certain contexts. For more information on the different standalone modes, see SAP Help Portal.
Resources
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.