The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.

The launchpad is the entry point to SAP Fiori apps on mobile and desktop devices. The launchpad displays a home page with tiles. Each tile represents a business application that the user can launch. Tiles can also display live status indicators, such as the number of open tasks. The launchpad is role-based. In other words, the user’s role determines which app tiles are shown.

This article provides an overview of the main elements of the SAP Fiori launchpad.

Home Page

Spaces

User Actions Menu

Notifications

The shell bar is a universal header element that appears at the top of all screens. It provides the product or application context and offers global functions, such as search, notifications, and the user profile.

Components

Mandatory

The following components of the shell bar are mandatory:

1. Logo: Visual branding elements like the SAP logo or a company logo.
   Optional: Clicking the logo can navigate back to the product’s home page.
2. Title: Product name or application name.
   Optional: The title can offer access to a navigation menu.
3. User profile: Provides access to user-specific settings.

Optional

The following elements of the shell bar are optional

1. Back or side navigation button:
   • Back: Allows back navigation.
   • Side navigation button: Opens and closes a vertical navigation menu.
2. Menu: Option to display a menu when clicking the title.
3. Second title: Provides additional information on the context, such as the tenant name or scope.
4. Search
5. Notifications
6. Container for additional shell bar actions

Back and Branding Area

Title and Navigation Menu

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.

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.

Navigation Menu

Clicking the title in the shell bar opens the dropdown navigation menu. The height of the container depends on its content.

To close the menu again, users can click the page title, the dropdown arrow, or anywhere outside the navigation menu.

This interaction applies for all device types.

Navigation Hierarchy

The navigation menu displays the navigation path that led to the current page within an application. 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.

All My Apps

All My Apps lists the main applications assigned to a user’s role. These include apps from the home page group and the app finder (catalog).

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 access the search function from any screen within the SAP Fiori launchpad.

Optional Actions

In addition to the buttons for the enterprise search 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.

User Actions Menu Button

Responsiveness

The launchpad shell bar is fully responsive.

On size S, the search and notifications are displayed behind the overflow menu icon.

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

Related Links

The shell bar is a universal header element that appears at the top of all screens. It provides the product or application context and offers global functions, such as search, notifications, and the user profile.

Components

Mandatory

The following components of the shell bar are mandatory:

1. Logo: Visual branding elements like the SAP logo or a company logo.
   Optional: Clicking the logo can navigate back to the product’s home page.
2. Title: Product name or application name.
   Optional: The title can offer access to a navigation menu.
3. User profile: Provides access to user-specific settings.

Optional

The following elements of the shell bar are optional

1. Back or side navigation button:
   • Back: Allows back navigation.
   • Side navigation button: Opens and closes a vertical navigation menu.
2. Menu: Option to display a menu when clicking the title.
3. Second title: Provides additional information on the context, such as the tenant name or scope.
4. Search
5. Notifications
6. Container for additional shell bar actions

Back and Branding Area

Title and Navigation Menu

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.

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.

Navigation Menu

Clicking the title in the shell bar opens the dropdown navigation menu. The height of the container depends on its content.

To close the menu again, users can click the page title, the dropdown arrow, or anywhere outside the navigation menu.

This interaction applies for all device types.

Navigation Hierarchy

The navigation menu displays the navigation path that led to the current page within an application. 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.

All My Apps

All My Apps lists the main applications assigned to a user’s role. These include apps from the home page group and the app finder (catalog).

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 access the search function from any screen within the SAP Fiori launchpad.

Optional Actions

In addition to the buttons for the enterprise search 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.

User Actions Menu Button

Responsiveness

The launchpad shell bar is fully responsive.

On size S, the search and notifications are displayed behind the overflow menu icon.

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

Related Links

A tile is a container that represents an app on the SAP Fiori launchpad home page.

Tiles can display different types of content, which is based on data supplied by the app. They can contain an icon, a title, an informative text, KPIs, counters, and charts.

A link is a special representation of a tile. Links are displayed in a separate area below the tiles area and comprise a title and an optional subtitle. Most tile types can be converted to links, and links can be converted to tiles at any time.

Users can personalize their home page by selecting the tiles for the apps they want to use from the app finder. The apps available in the app finder depend on the user’s role.

The number of visible tiles on the launchpad home page depends on the screen resolution. If the tiles in a group do not fit in one row, they are wrapped to the next row.

Responsiveness

Alternative Configuration – Small Tiles for All Screen Sizes

To fit more tiles onto the screen, customers can opt to use the smaller tile size for all screen sizes. In this case, there is no special tile size for small screens.

Key users or administrators can change the tile size for all tiles on the launchpad centrally (property: sizeBehavior, value: Small).

Layout

The generic tile control supports the following dimensions:

• 2×2 tile
• 4×2 tile (wide)
• 2×1 tile (flat)
• 4×1 tile (flat wide)

The layout of the generic tile is fixed, with designated areas for the header, content, and footer.

Comparison Chart (Micro Chart)

Bullet Chart (Micro Chart)

Trend Chart/Area Chart (Micro Chart)

Column Chart (Micro Chart)

Basic Launch Tile

Monitoring Tile

SAP Jam Tile

Feed Tile

Behavior and Interaction

All tiles on the SAP Fiori launchpad support one click event and one navigation target.

Open App

All tiles have one click area that opens the corresponding app.

Styles

Guidelines

Do’s

• Use only this control.
• Only use tiles on the launchpad home page. Don’t use them anywhere else.
• In the content area, only show content types described in this guideline. For example, don’t play videos, animations, or gifs in the tiles.
• If you are not showing a KPI or a chart, try to show an icon instead to help users to distinguish the tiles.
• Use flat tiles to free up space and add variety to the SAP Fiori launchpad.
• Use short tile names.

Don’ts

• Do not use the standard tile (sap.m.StandardTile) or custom tile (sap.m.CustomTile). These are deprecated.
• Do not use the status area for error messages.
• Do not use the tile subtitle for explanations. Use the subtitle only if you need a differentiator (such as a specific view on the data).
• Do not use icons on KPI tiles; only use icons on basic launch tiles or monitoring tiles.
• Do not show icons next to an counter when you expect 5 digits or more.

Icons

• We have decided to stop unique launch icons being created for individual apps. Creating a unique icon for every app was and is not scalable in terms of iconography and production (hinting and PNG exportation).
• Projects without a SAP Fiori ID do not get an individual icon.
• Do not develop your own icons or use custom icons.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Intro

The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.

Adding Apps to “My Home”

If “My Home” is activated, the page is initially empty. The user can either import personalized app groups from other spaces, or add apps to the “My Home” page manually.

Importing Personalized Content

Adding Apps Manually

“My Home” Settings

Related Links

A tile is a container that represents an app on the SAP Fiori launchpad home page.

Tiles can display different types of content, which is based on data supplied by the app. They can contain an icon, a title, an informative text, KPIs, counters, and charts.

A link is a special representation of a tile. Links are displayed in a separate area below the tiles area and comprise a title and an optional subtitle. Most tile types can be converted to links, and links can be converted to tiles at any time.

Users can personalize their home page by selecting the tiles for the apps they want to use from the app finder. The apps available in the app finder depend on the user’s role.

The number of visible tiles on the launchpad home page depends on the screen resolution. If the tiles in a group do not fit in one row, they are wrapped to the next row.

Responsiveness

Alternative Configuration – Small Tiles for All Screen Sizes

To fit more tiles onto the screen, customers can opt to use the smaller tile size for all screen sizes. In this case, there is no special tile size for small screens.

Key users or administrators can change the tile size for all tiles on the launchpad centrally (property: sizeBehavior, value: Small).

Layout

The generic tile control supports the following dimensions:

• 2×2 tile
• 4×2 tile (wide)
• 2×1 tile (flat)
• 4×1 tile (flat wide)

The layout of the generic tile is fixed, with designated areas for the header, content, and footer.

Comparison Chart (Micro Chart)

Bullet Chart (Micro Chart)

Trend Chart/Area Chart (Micro Chart)

Column Chart (Micro Chart)

Basic Launch Tile

Monitoring Tile

SAP Jam Tile

Feed Tile

Behavior and Interaction

All tiles on the SAP Fiori launchpad support one click event and one navigation target.

Open App

All tiles have one click area that opens the corresponding app.

Styles

Guidelines

Do’s

• Use only this control.
• Only use tiles on the launchpad home page. Don’t use them anywhere else.
• In the content area, only show content types described in this guideline. For example, don’t play videos, animations, or gifs in the tiles.
• If you are not showing a KPI or a chart, try to show an icon instead to help users to distinguish the tiles.
• Use flat tiles to free up space and add variety to the SAP Fiori launchpad.
• Use short tile names.

Don’ts

• Do not use the standard tile (sap.m.StandardTile) or custom tile (sap.m.CustomTile). These are deprecated.
• Do not use the status area for error messages.
• Do not use the tile subtitle for explanations. Use the subtitle only if you need a differentiator (such as a specific view on the data).
• Do not use icons on KPI tiles; only use icons on basic launch tiles or monitoring tiles.
• Do not show icons next to an counter when you expect 5 digits or more.

Icons

• We have decided to stop unique launch icons being created for individual apps. Creating a unique icon for every app was and is not scalable in terms of iconography and production (hinting and PNG exportation).
• Projects without a SAP Fiori ID do not get an individual icon.
• Do not develop your own icons or use custom icons.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Intro

Notifications are the best way to make users aware of a situation that requires timely action or attention. This could be a situation that has just arisen or a task triggered by a workflow.

Users access notifications by clicking the bell icon in the shell bar at the top right of the screen.

In the notifications popover, the user can order notifications in various ways, take action, and navigate to the source of a specific notification.

Usage

• Use notifications to make users aware of situations that require attention.
• Reduce the amount of information and the number of actions to a minimum, but provide enough information to help users decide if the information is important.
• Use notification list items and notification list groups only in the SAP Fiori notifications popover.

Types

Individual notification list items are aggregated into notification list groups, based on sort criteria.
The groups are determined by date (newest to oldest), by type (A-Z), or by priority (high to low).

Properties for notification list items:

Components

Behavior and Interaction

Accessing the Notifications

Executing Actions

Close

Navigation

Show More

Mobile Integration (SAP S/4HANA only)

Apple iOS

The app icon badge on the mobile device might have a different count to the badge for notifications in the SAP Fiori shell bar. This can happen if some notifications have been disabled in the SAP Fiori settings dialog.

On a mobile device, only non-sensitive data is exposed. For legal reasons, no business data is shown on a locked screen or passed through third party networks. To see the sensitive data, users can always access the notifications on the SAP Fiori launchpad.

Similarly, business actions cannot be displayed or executed on native notifications.

Clicking a native notification triggers navigation to the corresponding app.

Resources

With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with the user actions menu.

A space and its pages structure the most relevant apps for users with a certain business role. The content of a space is visualized by tiles which allow users to quickly launch apps to access the business content they need to complete their business related tasks.

Users can easily personalize their pages directly by rearranging or adding tiles. Users have access to advanced personalization options via the edit mode. Users may have a personalized space “My Home”.

Video: Introducing SAP Fiori launchpad spaces

When to Use

Components

Top-Level Navigation

The top-level navigation is part of a space. It gives users access to all spaces and pages that they are assigned to, and enables users to navigate between those. An entry in the top-level navigation indicates a space. Multiple spaces are visualized by multiple entries. By selecting a space, users can access one or more pages belonging to the space.

Spaces

A space serves as an entry point for a business role and shows information and functions that are assigned to this business role. A space is represented as a navigation item in the top level navigation. A user may have multiple spaces assigned, which results in multiple entries in the top-level navigation. A space consists of one or multiple pages that are used to further structure the content of a space.

A space title is mandatory. Do not use the business role name as a space title, use the name of the work area of a business role instead.

Pages

A page is part of a space, and a space may have one or multiple pages. Multiple pages allow users to structure the space into multiple self-contained work-contexts. Business roles with fewer apps may use one page per space, whereas business roles with more apps may use multiple pages per space. A page consists of sections that are used to further structure the content.

Do not use function or product-oriented page titles, and do not repeat the space title. Use task-oriented page titles that summarize the tasks that can be performed on the page.

Sections

A section structures the content of a page semantically. To ensure consistency across pages within a space and across spaces, we highly recommend using a section “Quick Access” to summarize the most important apps and/or a section “Insights” to summarize the most important analytical apps. To aim for lean pages, we recommend using between 2 and 5 sections per page. A section consists of tiles that visualize the content of a space.

A section title is optional. Use a term summarizing the tasks that can be performed in the section.

Recently Added Apps

When the user adds an app to a page using the app finder, a dedicated Recently Added Apps section appears at the top of the page that contains the added app. Once the user moves the app to another section, the Recently Added Apps section disappears.

Tiles

The content of a space is visualized by tiles. Tiles allow users to quickly access business applications to complete their tasks. Different tile types and tile sizes are available. To aim for lean pages, we recommend using between 3-7 apps per section and 25 apps at most per page.

Links

The content of a space is visualized also by links. Links allow users to quickly access business applications to complete their tasks.

Behavior and Interaction

Users can switch between the launchpad home page and launchpad spaces. To personalize the pages, users may either directly rearrange tiles on a page or open the edit mode to have access to advanced personalization options.

Switching between Spaces and Home Page

Users can switch between the launchpad home page and launchpad spaces with the user actions menu. Navigate to Settings, then Spaces, and activate Use Spaces to switch to launchpad spaces. Deactivate Use Spaces to switch back to the launchpad home page. In both cases the launchpad reloads.

Personalization

To directly personalize the page, users can rearrange or add apps.

(1) Move: Users can rearrange tiles and links by dragging them to a new location in the same section or to another section.

(1) Add: Users can add apps by selecting App Finder in the user actions menu.

Open and Close Edit Mode

Edit Mode

Users may use the Edit Mode to access advanced personalization options, such as tile actions or section actions to personalize a page.

Tile Actions

(1) Remove: Users can remove tiles with the Remove icon  .

(2) Add: Users can add apps by clicking the Add Tile button.

(3) Move: Users can rearrange tiles and links by dragging them to a new location in the same section or to another section.

(4) Action Menu: Users can open the tile action menu to access further tile actions by clicking on the overflow icon  .

• (4a) Convert: Users can convert the size of a tile based on the current tile size into a link, a tile, a flat tile or a flat wide tile by clicking on the respective Convert action in the action menu.
• (4b) Move: Users can also select Move in the action menu to rearrange tiles.

Section Actions

(1) Rename Sections: Users can rename sections by typing the new name in the input field for the section title.

(2) Add Sections: Users can add a new section by clicking the Add Section button. The user is prompted to enter a new section name. If no name is entered, the placeholder text Enter section tile appears by default. Once the section is created, it appears below Add Section in the launchpad space.

(3) Move Sections: Users can rearrange a section by dragging individual section panels to a new location.

(4) Reset Sections: By clicking Reset Section, a user can reset a predefined section to its initial state, as defined by an administrator.

(5) Hide/Show Sections: Users can temporarily hide one or more sections on a page within a space by clicking the toggle button Hide Section. The Show Section button displays the section again.

(5) Delete Sections: Users can delete an empty section by clicking the Delete Section button.

Responsiveness

Top Tips

How to Design a SAP Fiori Launchpad Space

There are several means available to semantically structure and visualize the content of a space. Use multiple pages and sections to semantically structure the content of a space. Page and section titles may help identify the tasks that  the content relates to. Use tiles to visualize the content of a space. Beside tiles, more options to visualize the content will be available in later releases.

Spaces
A space comes with a predefined set of apps related to the user’s business role. Show only the most important and most used apps per space that users need to complete their daily tasks. To identify those apps, we recommend following the “Day in a life of…” approach: What are the most important apps for the users? How often do they use them? What do they need first, what do they need next? Are there any dependencies in the workflow? What are the insights they need on a regular basis? Which apps can be semantically bundled? Are there self-contained work-contexts? Structure the space according to these patterns.
To further structure a space you might use one or multiple pages depended on the number of assigned apps associated with the users’ business role.

Note: Don´t worry about the apps you leave out. Users still can access all apps in the app finder which they might use to add apps to their pages or to directly launch apps that they rarely use.

Sections
Use sections to semantically structure the content of a page. To ensure consistency across pages within a space and across spaces, we recommend using a section called “Quick Access” to summarize the most important apps, and/or a section called “Insights” to summarize the most important analytical apps.

Pages
Use multiple pages if you identify during the “Day in a life of…” approach several self-contained work-contexts. This might be the case for business roles which have many apps assigned. Each page should then reflect one self-contained work-context. Aim for lean pages and show only the most important and used apps on each page. Therefore, a page serves as a “favorites” page.

“Overview” Page – If you would like to provide a page which summarizes the most important and most used apps across the multiple work-context pages use a term which summarizes the most important tasks of the whole space or use “Overview” as page title. The Overview page may contain additional overall apps or generic apps such as “My Inbox”. To ensure consistency position this page as the first page on a multiple-pages space.

Tiles
To aim for lean pages do not overwhelm sections with apps, go for lean pages instead. Check the chapter tiles to choose appropriate tile types.

Guideline

In General

• Aim for lean spaces and pages:
  • Try to use between 2 and 5 sections per page.
  • Try to show between 2 and 7 apps per section, but 25 apps at most per page.
• Go for consistency for all titles within a space and across SAP Fiori.

Space Titles

• A space title is mandatory.
• Do not use business role names as space titles, use the name of the work area of the business role instead.
• Use specific terms for the application area such as “Internal Sales”, rather than “Sales”, or “Accounts Receivables” rather than “Accounting”.
• Try to avoid the term “Management” for non-managerial roles.
• In rare cases, you may need to use specifications or a space title to differentiate spaces for similar but not identical roles. In this exceptional case, a dash “-” can be used. Example: Project Controller – Finance.
• Examples for space titles are:
  • “Internal Sales” for the business role Internal Sales Representative
  • “Accounts Receivable” for the business role Accounts Receivable Accountant
  • “Convergent Invoicing” for the business role Invoicing Specialist
  • “In-House Repair” for the business role Service Representative – In-House Repair

Page Titles

• Do not use function or product-oriented page titles. Use work-context related terms that summarize the tasks that can be performed on the page. Example: “Long-Term Planning” instead of “Predictive Material and Resource Planning”.
• Do not repeat the space title.
• If a work-context specific term can’t be found for the page that summarizes the content of the pages across the space, use “Overview” as a page title.

 Section Titles

• A section title is optional.
• In case you summarize the most important apps in a section to provide quick access, do not use “Quick Start” as a section title, but “Quick Access”.
• In case you summarize the most important analytical apps in a section, do not use section titles such as “Analytics”, “Analysis”, “Reporting”; use “Insights” instead.
• For all other section titles, use task-oriented titles to summarize the tasks that can be performed. Example: “Sales Order Creation” instead of “Create Sales Order”.

Related Topics

Intro

The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.

Adding Apps to “My Home”

If “My Home” is activated, the page is initially empty. The user can either import personalized app groups from other spaces, or add apps to the “My Home” page manually.

Importing Personalized Content

Adding Apps Manually

“My Home” Settings

Related Links

The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to SAP Fiori apps on mobile and desktop devices.

The launchpad home page displays tiles and links that allow the user to launch apps, and may also show additional information. The page can be personalized and apps can be added, removed, or bundled in groups.

The SAP Fiori launchpad home page must be used for all SAP Fiori apps.

Responsiveness

Components

Modifying the Home Page in Tab Bar Mode

Users can personalize the home page in tab bar mode by choosing Edit Home Page in the user actions menu.

In addition, they can use Short Drop and Long Drop functions to move apps from one tab to another.

Long Drop

Drag any app onto another tab and keep it there for a short while. The selected tab opens, and you can position the app where you want it.

Note: The focus switches from the current tab to the selected tab. A message toast confirms that the app was moved.

Behavior and Interaction

Users can personalize their home page in a variety of ways. Tiles can be rearranged directly, but most actions require the user to activate the edit mode. For example, edit mode needs to be active to rearrange groups or customize tiles.

To enable more enhanced personalization functions, the user needs to open the user actions menu, and then select Edit Home Page.

To quit personalization, the user selects Done in the footer toolbar.

Tile and Link Actions

Generic Actions

(via Edit Home Page only)

When Edit Home Page is activated and the user clicks a tile, an action sheet appears showing a list of generic actions:

• Settings opens a dialog in which the user can change the information that is displayed on a tile, such as the title or description.
• Move opens a dialog in which the user can move the selected tile to a different group.
• Convert to Link transforms a tile into a link, while Convert to Tile transforms a link into a tile.

Tile designers can also add further generic actions.

Remove

(via Edit Home Page only)

Users can remove tiles and links with the Remove icon .

Add

Users can add apps with the Add icon ( ), either from an empty group in edit mode, or by selecting App Finder in the user actions menu.

Move

Users can rearrange tiles and links by dragging them to a new location in the same group, or by dragging them to a different group.

Open

Clicking a tile or link opens the underlying app or content item.

Group Actions

Via Edit Home Page, users can customize groups to their needs:

Adding Groups

Users can add a new group by clicking the + Add Group button. The user will be prompted to enter a new group name. If the user doesn’t immediately enter a name, the placeholder text Enter group name will appear as the default name. Once the group is created, it will appear below + Add Group on the launchpad home page.

Moving Groups

The user can rearrange a group by dragging it to a new location in the group panel.

Renaming Groups

Users can rename groups by clicking a group name. A text box appears in which the user can enter the new name, which is then saved automatically. To discard a change while the text box is visible, the user must press Escape.

Deleting Groups

Users can delete groups they have created (including all the tiles they contain) by pressing Delete. Note that predefined groups, such as My Home, or locked groups (as defined by customers) cannot be deleted.

Resetting Groups

By clicking Reset, a user can reset a predefined group to its initial state as defined by an administrator.

Hiding Groups

Resources

The SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.

The launchpad is the entry point to SAP Fiori apps on mobile and desktop devices. The launchpad displays a home page with tiles. Each tile represents a business application that the user can launch. Tiles can also display live status indicators, such as the number of open tasks. The launchpad is role-based. In other words, the user’s role determines which app tiles are shown.

This article provides an overview of the main elements of the SAP Fiori launchpad.

Home Page

Spaces

User Actions Menu

Notifications

The launchpad shell bar is the uppermost section of the SAP Fiori launchpad. It is always visible to give users access to various launchpad functions.

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

Page Title and Navigation Menu

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

Enterprise Search

Optional Actions

User Actions Menu Button

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

Resources

Type Selection

Suggestions

Result List

Personalized Search

Filters

A filter icon in the top left-hand corner offers additional options for filtering the search results. When the user clicks the icon, a filter panel appears on the left-hand side. In this panel the user can change the object type, which may also be depicted as a hierarchy (depending on the system configuration).

Once the results have been limited to a certain object type, thus ensuring a homogeneous result set, result-specific filters are offered. Only meaningful filters are included. For example, if all results are for the same country, the country filter is not shown.

Up to 5 one-click options are available for each filter. You can show the selection options in a list, or visualize them in a bar chart or pie chart. Multiple selection is supported for all visualizations.

Once the filter panel has been closed, the applied filters are visible in an infobar above the result list. On the right of the infobar, all filters can be cleared without reopening the filter panel.

Advanced Filters

Configuration

Creation of Search Models

Resources

A tile is a container that represents an app on the SAP Fiori launchpad home page.

Tiles can display different types of content, which is based on data supplied by the app. They can contain an icon, a title, an informative text, KPIs, counters, and charts.

A link is a special representation of a tile. Links are displayed in a separate area below the tiles area and comprise a title and an optional subtitle. Most tile types can be converted to links, and links can be converted to tiles at any time.

Users can personalize their home page by selecting the tiles for the apps they want to use from the app finder. The apps available in the app finder depend on the user’s role.

The number of visible tiles on the launchpad home page depends on the screen resolution. If the tiles in a group do not fit in one row, they are wrapped to the next row.

Responsiveness

Alternative Configuration – Small Tiles for All Screen Sizes

To fit more tiles onto the screen, customers can opt to use the smaller tile size for all screen sizes. In this case, there is no special tile size for small screens.

Key users or administrators can change the tile size for all tiles on the launchpad centrally (property: sizeBehavior, value: Small).

Layout

The generic tile control supports the following dimensions:

• 2×2 tile
• 4×2 tile (wide)
• 2×1 tile (flat)
• 4×1 tile (flat wide)

The layout of the generic tile is fixed, with designated areas for the header, content, and footer.

Comparison Chart (Micro Chart)

Bullet Chart (Micro Chart)

Trend Chart/Area Chart (Micro Chart)

Column Chart (Micro Chart)

Basic Launch Tile

Monitoring Tile

SAP Jam Tile

Feed Tile

Behavior and Interaction

All tiles on the SAP Fiori launchpad support one click event and one navigation target.

Open App

All tiles have one click area that opens the corresponding app.

Styles

Guidelines

Do’s

• Use only this control.
• Only use tiles on the launchpad home page. Don’t use them anywhere else.
• In the content area, only show content types described in this guideline. For example, don’t play videos, animations, or gifs in the tiles.
• If you are not showing a KPI or a chart, try to show an icon instead to help users to distinguish the tiles.
• Use flat tiles to free up space and add variety to the SAP Fiori launchpad.
• Use short tile names.

Don’ts

• Do not use the standard tile (sap.m.StandardTile) or custom tile (sap.m.CustomTile). These are deprecated.
• Do not use the status area for error messages.
• Do not use the tile subtitle for explanations. Use the subtitle only if you need a differentiator (such as a specific view on the data).
• Do not use icons on KPI tiles; only use icons on basic launch tiles or monitoring tiles.
• Do not show icons next to an counter when you expect 5 digits or more.

Icons

• We have decided to stop unique launch icons being created for individual apps. Creating a unique icon for every app was and is not scalable in terms of iconography and production (hinting and PNG exportation).
• Projects without a SAP Fiori ID do not get an individual icon.
• Do not develop your own icons or use custom icons.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:

• Recent Activities
• Frequently Used
• App Finder
• Settings
• Edit Home Page
• Contact Support
• Give Feedback
• App Settings
• About
• Sign Out
• Save as Tile

Most of the services are accessed via the user actions menu.

Behavior and Interaction

User Actions Menu on the Home Page

User Actions Menu in Applications

Overview of Services

Recent Activities

This service displays a list of the most recent user activities in reverse chronological order (most recent first). Recent activities are apps the user has been working with, or recent search queries, for example. The Recent Activities list can contain up to 30 items.

A single list item is represented by its title, the type of object, and a time stamp. For generic functions, such as search, an icon appears next to the list item. Each item can be listed only once. The last usage updates the timestamp and moves the item to the top of the list.

The whole list item triggers navigation to the corresponding URL target. However, there are no separate interactive elements within a list item. Apps start in the last state that is technically recoverable, enabling users to carry on where they left off.

Frequently Used

This service lists the items used most often during the last 30 working days (most frequently used first).

A single list item is represented by its title and the type of object. For generic functions, such as search, an icon appears next to the list item. Each item can be listed only once.

The whole list item triggers navigation to the corresponding URL target. However, there are no separate interactive elements within a list item. In contrast to the Recent Activities app list, apps opened via the Frequently Used tab start in their initial state, enabling users to start afresh.

Settings

Edit Home Page

Contact Support

Give Feedback

App Settings

About

Sign Out

Save as Tile

Resources

With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with the user actions menu.

A space and its pages structure the most relevant apps for users with a certain business role. The content of a space is visualized by tiles which allow users to quickly launch apps to access the business content they need to complete their business related tasks.

Users can easily personalize their pages directly by rearranging or adding tiles. Users have access to advanced personalization options via the edit mode. Users may have a personalized space “My Home”.

Video: Introducing SAP Fiori launchpad spaces

When to Use

Components

Top-Level Navigation

The top-level navigation is part of a space. It gives users access to all spaces and pages that they are assigned to, and enables users to navigate between those. An entry in the top-level navigation indicates a space. Multiple spaces are visualized by multiple entries. By selecting a space, users can access one or more pages belonging to the space.

Spaces

A space serves as an entry point for a business role and shows information and functions that are assigned to this business role. A space is represented as a navigation item in the top level navigation. A user may have multiple spaces assigned, which results in multiple entries in the top-level navigation. A space consists of one or multiple pages that are used to further structure the content of a space.

A space title is mandatory. Do not use the business role name as a space title, use the name of the work area of a business role instead.

Pages

A page is part of a space, and a space may have one or multiple pages. Multiple pages allow users to structure the space into multiple self-contained work-contexts. Business roles with fewer apps may use one page per space, whereas business roles with more apps may use multiple pages per space. A page consists of sections that are used to further structure the content.

Do not use function or product-oriented page titles, and do not repeat the space title. Use task-oriented page titles that summarize the tasks that can be performed on the page.

Sections

A section structures the content of a page semantically. To ensure consistency across pages within a space and across spaces, we highly recommend using a section “Quick Access” to summarize the most important apps and/or a section “Insights” to summarize the most important analytical apps. To aim for lean pages, we recommend using between 2 and 5 sections per page. A section consists of tiles that visualize the content of a space.

A section title is optional. Use a term summarizing the tasks that can be performed in the section.

Recently Added Apps

When the user adds an app to a page using the app finder, a dedicated Recently Added Apps section appears at the top of the page that contains the added app. Once the user moves the app to another section, the Recently Added Apps section disappears.

Tiles

The content of a space is visualized by tiles. Tiles allow users to quickly access business applications to complete their tasks. Different tile types and tile sizes are available. To aim for lean pages, we recommend using between 3-7 apps per section and 25 apps at most per page.

Links

The content of a space is visualized also by links. Links allow users to quickly access business applications to complete their tasks.

Behavior and Interaction

Users can switch between the launchpad home page and launchpad spaces. To personalize the pages, users may either directly rearrange tiles on a page or open the edit mode to have access to advanced personalization options.

Switching between Spaces and Home Page

Users can switch between the launchpad home page and launchpad spaces with the user actions menu. Navigate to Settings, then Spaces, and activate Use Spaces to switch to launchpad spaces. Deactivate Use Spaces to switch back to the launchpad home page. In both cases the launchpad reloads.

Personalization

To directly personalize the page, users can rearrange or add apps.

(1) Move: Users can rearrange tiles and links by dragging them to a new location in the same section or to another section.

(1) Add: Users can add apps by selecting App Finder in the user actions menu.

Open and Close Edit Mode

Edit Mode

Users may use the Edit Mode to access advanced personalization options, such as tile actions or section actions to personalize a page.

Tile Actions

(1) Remove: Users can remove tiles with the Remove icon  .

(2) Add: Users can add apps by clicking the Add Tile button.

(3) Move: Users can rearrange tiles and links by dragging them to a new location in the same section or to another section.

(4) Action Menu: Users can open the tile action menu to access further tile actions by clicking on the overflow icon  .

• (4a) Convert: Users can convert the size of a tile based on the current tile size into a link, a tile, a flat tile or a flat wide tile by clicking on the respective Convert action in the action menu.
• (4b) Move: Users can also select Move in the action menu to rearrange tiles.

Section Actions

(1) Rename Sections: Users can rename sections by typing the new name in the input field for the section title.

(2) Add Sections: Users can add a new section by clicking the Add Section button. The user is prompted to enter a new section name. If no name is entered, the placeholder text Enter section tile appears by default. Once the section is created, it appears below Add Section in the launchpad space.

(3) Move Sections: Users can rearrange a section by dragging individual section panels to a new location.

(4) Reset Sections: By clicking Reset Section, a user can reset a predefined section to its initial state, as defined by an administrator.

(5) Hide/Show Sections: Users can temporarily hide one or more sections on a page within a space by clicking the toggle button Hide Section. The Show Section button displays the section again.

(5) Delete Sections: Users can delete an empty section by clicking the Delete Section button.

Responsiveness

Top Tips

How to Design a SAP Fiori Launchpad Space

There are several means available to semantically structure and visualize the content of a space. Use multiple pages and sections to semantically structure the content of a space. Page and section titles may help identify the tasks that  the content relates to. Use tiles to visualize the content of a space. Beside tiles, more options to visualize the content will be available in later releases.

Spaces
A space comes with a predefined set of apps related to the user’s business role. Show only the most important and most used apps per space that users need to complete their daily tasks. To identify those apps, we recommend following the “Day in a life of…” approach: What are the most important apps for the users? How often do they use them? What do they need first, what do they need next? Are there any dependencies in the workflow? What are the insights they need on a regular basis? Which apps can be semantically bundled? Are there self-contained work-contexts? Structure the space according to these patterns.
To further structure a space you might use one or multiple pages depended on the number of assigned apps associated with the users’ business role.

Note: Don´t worry about the apps you leave out. Users still can access all apps in the app finder which they might use to add apps to their pages or to directly launch apps that they rarely use.

Sections
Use sections to semantically structure the content of a page. To ensure consistency across pages within a space and across spaces, we recommend using a section called “Quick Access” to summarize the most important apps, and/or a section called “Insights” to summarize the most important analytical apps.

Pages
Use multiple pages if you identify during the “Day in a life of…” approach several self-contained work-contexts. This might be the case for business roles which have many apps assigned. Each page should then reflect one self-contained work-context. Aim for lean pages and show only the most important and used apps on each page. Therefore, a page serves as a “favorites” page.

“Overview” Page – If you would like to provide a page which summarizes the most important and most used apps across the multiple work-context pages use a term which summarizes the most important tasks of the whole space or use “Overview” as page title. The Overview page may contain additional overall apps or generic apps such as “My Inbox”. To ensure consistency position this page as the first page on a multiple-pages space.

Tiles
To aim for lean pages do not overwhelm sections with apps, go for lean pages instead. Check the chapter tiles to choose appropriate tile types.

Guideline

In General

• Aim for lean spaces and pages:
  • Try to use between 2 and 5 sections per page.
  • Try to show between 2 and 7 apps per section, but 25 apps at most per page.
• Go for consistency for all titles within a space and across SAP Fiori.

Space Titles

• A space title is mandatory.
• Do not use business role names as space titles, use the name of the work area of the business role instead.
• Use specific terms for the application area such as “Internal Sales”, rather than “Sales”, or “Accounts Receivables” rather than “Accounting”.
• Try to avoid the term “Management” for non-managerial roles.
• In rare cases, you may need to use specifications or a space title to differentiate spaces for similar but not identical roles. In this exceptional case, a dash “-” can be used. Example: Project Controller – Finance.
• Examples for space titles are:
  • “Internal Sales” for the business role Internal Sales Representative
  • “Accounts Receivables” for the business role Accounts Receivables Accountant
  • “Convergent Invoicing” for the business role Invoicing Specialist
  • “In-House Repair” for the business role Service Representative – In-House Repair

Page Titles

• Do not use function or product-oriented page titles. Use work-context related terms that summarize the tasks that can be performed on the page. Example: “Long-Term Planning” instead of “Predictive Material and Resource Planning”.
• Do not repeat the space title.
• If a work-context specific term can’t be found for the page that summarizes the content of the pages across the space, use “Overview” as a page title.

 Section Titles

• A section title is optional.
• In case you summarize the most important apps in a section to provide quick access, do not use “Quick Start” as a section title, but “Quick Access”.
• In case you summarize the most important analytical apps in a section, do not use section titles such as “Analytics”, “Analysis”, “Reporting”; use “Insights” instead.
• For all other section titles, use task-oriented titles to summarize the tasks that can be performed. Example: “Sales Order Creation” instead of “Create Sales Order”.

Related Topics

The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to SAP Fiori apps on mobile and desktop devices.

The launchpad home page displays tiles and links that allow the user to launch apps, and may also show additional information. The page can be personalized and apps can be added, removed, or bundled in groups.

The SAP Fiori launchpad home page must be used for all SAP Fiori apps.

Responsiveness

Components

Modifying the Home Page in Tab Bar Mode

Users can personalize the home page in tab bar mode by choosing Edit Home Page in the user actions menu.

In addition, they can use Short Drop and Long Drop functions to move apps from one tab to another.

Long Drop

Drag any app onto another tab and keep it there for a short while. The selected tab opens, and you can position the app where you want it.

Note: The focus switches from the current tab to the selected tab. A message toast confirms that the app was moved.

Behavior and Interaction

Users can personalize their home page in a variety of ways. Tiles can be rearranged directly, but most actions require the user to activate the edit mode. For example, edit mode needs to be active to rearrange groups or customize tiles.

To enable more enhanced personalization functions, the user needs to open the user actions menu, and then select Edit Home Page.

To quit personalization, the user selects Done in the footer toolbar.

Tile and Link Actions

Generic Actions

(via Edit Home Page only)

When Edit Home Page is activated and the user clicks a tile, an action sheet appears showing a list of generic actions:

• Settings opens a dialog in which the user can change the information that is displayed on a tile, such as the title or description.
• Move opens a dialog in which the user can move the selected tile to a different group.
• Convert to Link transforms a tile into a link, while Convert to Tile transforms a link into a tile.

Tile designers can also add further generic actions.

Remove

(via Edit Home Page only)

Users can remove tiles and links with the Remove icon .

Add

Users can add apps with the Add icon ( ), either from an empty group in edit mode, or by selecting App Finder in the user actions menu.

Move

Users can rearrange tiles and links by dragging them to a new location in the same group, or by dragging them to a different group.

Open

Clicking a tile or link opens the underlying app or content item.

Group Actions

Via Edit Home Page, users can customize groups to their needs:

Adding Groups

Users can add a new group by clicking the + Add Group button. The user will be prompted to enter a new group name. If the user doesn’t immediately enter a name, the placeholder text Enter group name will appear as the default name. Once the group is created, it will appear below + Add Group on the launchpad home page.

Moving Groups

The user can rearrange a group by dragging it to a new location in the group panel.

Renaming Groups

Users can rename groups by clicking a group name. A text box appears in which the user can enter the new name, which is then saved automatically. To discard a change while the text box is visible, the user must press Escape.

Deleting Groups

Users can delete groups they have created (including all the tiles they contain) by pressing Delete. Note that predefined groups, such as My Home, or locked groups (as defined by customers) cannot be deleted.

Resetting Groups

By clicking Reset, a user can reset a predefined group to its initial state as defined by an administrator.

Hiding Groups

Resources

With SAPUI5 1.75, we introduced SAP Fiori launchpad spaces in parallel to the SAP Fiori launchpad home page. Users can switch between the two with the user actions menu.

A space and its pages structure the most relevant apps for users with a certain business role. The content of a space is visualized by tiles which allow users to quickly launch apps to access the business content they need to complete their business related tasks.

Users can easily personalize their pages directly by rearranging or adding tiles. Users have access to advanced personalization options via the edit mode. Users may have a personalized space “My Home”.

When to Use

Components

Top-Level Navigation

The top-level navigation is part of a space. It gives users access to all spaces and pages that they are assigned to, and enables users to navigate between those. An entry in the top-level navigation indicates a space. Multiple spaces are visualized by multiple entries. By selecting a space, users can access one or more pages belonging to the space.

Spaces

A space serves as an entry point for a business role and shows information and functions that are assigned to this business role. A space is represented as a navigation item in the top level navigation. A user may have multiple spaces assigned, which results in multiple entries in the top-level navigation. A space consists of one or multiple pages that are used to further structure the content of a space.

A space title is mandatory. Do not use the business role name as a space title, use the name of the work area of a business role instead.

Pages

A page is part of a space, and a space may have one or multiple pages. Multiple pages allow users to structure the space into multiple self-contained work-contexts. Business roles with fewer apps may use one page per space, whereas business roles with more apps may use multiple pages per space. A page consists of sections that are used to further structure the content.

Do not use function or product-oriented page titles, and do not repeat the space title. Use task-oriented page titles that summarize the tasks that can be performed on the page.

Sections

A section structures the content of a page semantically. To ensure consistency across pages within a space and across spaces, we highly recommend using a section “Quick Access” to summarize the most important apps and/or a section “Insights” to summarize the most important analytical apps. To aim for lean pages, we recommend using between 2 and 5 sections per page. A section consists of tiles that visualize the content of a space.

A section title is optional. Use a term summarizing the tasks that can be performed in the section.

Recently Added Apps

When the user adds an app to a page using the app finder, a dedicated Recently Added Apps section appears at the top of the page that contains the added app. Once the user moves the app to another section, the Recently Added Apps section disappears.

Tiles

The content of a space is visualized by tiles. Tiles allow users to quickly access business applications to complete their tasks. Different tile types and tile sizes are available. To aim for lean pages, we recommend using between 3-7 apps per section and 25 apps at most per page.

Line Tiles (Links)

The content of a space is visualized also by line tiles (links). Line tiles allow users to quickly access business applications to complete their tasks.

Behavior and Interaction

Users can switch between the launchpad home page and launchpad spaces. To personalize the pages, users may either directly rearrange tiles on a page or open the edit mode to have access to advanced personalization options.

Switching between Spaces and Home Page

Users can switch between the launchpad home page and launchpad spaces with the user actions menu. Navigate to Settings, then Spaces, and activate Use Spaces to switch to launchpad spaces. Deactivate Use Spaces to switch back to the launchpad home page. In both cases the launchpad reloads.

Personalization

To directly personalize the page, users can rearrange or add apps.

(1) Move: Users can rearrange tiles and links by dragging them to a new location in the same section or to another section.

(1) Add: Users can add apps by selecting App Finder in the user actions menu.

Open and Close Edit Mode

Edit Mode

Users may use the Edit Mode to access advanced personalization options, such as tile actions or section actions to personalize a page.

Tile Actions

(1) Remove: Users can remove tiles with the Remove icon  .

(2) Add: Users can add apps by clicking the Add Tile button.

(3) Move: Users can rearrange tiles and line tiles (links) by dragging them to a new location in the same section or to another section.

(4) Action Menu: Users can open the tile action menu to access further tile actions by clicking on the overflow icon  .

• (4a) Convert: Users can convert the size of a tile based on the current tile size into a line tile (link), a tile, a flat tile or a flat wide tile by clicking on the respective Convert action in the action menu.
• (4b) Move: Users can also select Move in the action menu to rearrange tiles.

Section Actions

(1) Rename Sections: Users can rename sections by typing the new name in the input field for the section title.

(2) Add Sections: Users can add a new section by clicking the Add Section button. The user is prompted to enter a new section name. If no name is entered, the placeholder text Enter section tile appears by default. Once the section is created, it appears below Add Section in the launchpad space.

(3) Move Sections: Users can rearrange a section by dragging individual section panels to a new location.

(4) Reset Sections: By clicking Reset Section, a user can reset a predefined section to its initial state, as defined by an administrator.

(5) Hide/Show Sections: Users can temporarily hide one or more sections on a page within a space by clicking the toggle button Hide Section. The Show Section button displays the section again.

(5) Delete Sections: Users can delete an empty section by clicking the Delete Section button.

Responsiveness

Top Tips

How to Design a Fiori Launchpad Space

There are several means available to semantically structure and visualize the content of a space. Use multiple pages and sections to semantically structure the content of a space. Page and section titles may help identify the tasks that  the content relates to. Use tiles to visualize the content of a space. Beside tiles, more options to visualize the content will be available in later releases.

Spaces
A space comes with a predefined set of apps related to the user’s business role. Show only the most important and most used apps per space that users need to complete their daily tasks. To identify those apps, we recommend following the “Day in a life of…” approach: What are the most important apps for the users? How often do they use them? What do they need first, what do they need next? Are there any dependencies in the workflow? What are the insights they need on a regular basis? Which apps can be semantically bundled? Are there self-contained work-contexts? Structure the space according to these patterns.
To further structure a space you might use one or multiple pages depended on the number of assigned apps associated with the users’ business role.

Note: Don´t worry about the apps you leave out. Users still can access all apps in the app finder which they might use to add apps to their pages or to directly launch apps that they rarely use.

Sections
Use sections to semantically structure the content of a page. To ensure consistency across pages within a space and across spaces, we recommend using a section called “Quick Access” to summarize the most important apps, and/or a section called “Insights” to summarize the most important analytical apps.

Pages
Use multiple pages if you identify during the “Day in a life of…” approach several self-contained work-contexts. This might be the case for business roles which have many apps assigned. Each page should then reflect one self-contained work-context. Aim for lean pages and show only the most important and used apps on each page. Therefore, a page serves as a “favorites” page.

“Overview” Page – If you would like to provide a page which summarizes the most important and most used apps across the multiple work-context pages use a term which summarizes the most important tasks of the whole space or use “Overview” as page title. The Overview page may contain additional overall apps or generic apps such as “My Inbox”. To ensure consistency position this page as the first page on a multiple-pages space.

Tiles
To aim for lean pages do not overwhelm sections with apps, go for lean pages instead. Check the chapter tiles to choose appropriate tile types.

Guideline

In General

• Aim for lean spaces and pages:
  • Try to use between 2 and 5 sections per page.
  • Try to show between 2 and 7 apps per section, but 25 apps at most per page.
• Go for consistency for all titles within a space and across Fiori. Align all titles with UA.

Space Titles

• A space title is mandatory.
• Do not use business role names as space titles, use the name of the work area of the business role instead.
• Use specific terms for the application area such as “Internal Sales”, rather than “Sales”, or “Accounts Receivables” rather than “Accounting”.
• Try to avoid the term “Management” for non-managerial roles.
• In rare cases, you may need to use specifications or a space title to differentiate spaces for similar but not identical roles. In this exceptional case, a dash “-” can be used. Example: Project Controller – Finance.
• Examples for space titles are:
  • “Internal Sales” for the business role Internal Sales Representative
  • “Accounts Receivables” for the business role Accounts Receivables Accountant
  • “Convergent Invoicing” for the business role Invoicing Specialist
  • “In-House Repair” for the business role Service Representative – In-House Repair

Page Titles

• Do not use function or product-oriented page titles. Use work-context related terms that summarize the tasks that can be performed on the page. Example: “Long-Term Planning” instead of “Predictive Material and Resource Planning”.
• Do not repeat the space title.
• If a work-context specific term can’t be found for the page that summarizes the content of the pages across the space, use “Overview” as a page title.

 Section Titles

• A section title is optional.
• In case you summarize the most important apps in a section to provide quick access, do not use “Quick Start” as a section title, but “Quick Access”.
• In case you summarize the most important analytical apps in a section, do not use section titles such as “Analytics”, “Analysis”, “Reporting”; use “Insights” instead.
• For all other section titles, use task-oriented titles to summarize the tasks that can be performed. Example: “Sales Order Creation” instead of “Create Sales Order”.

Related Topics

The “My Home” space of the SAP Fiori launchpad leads to a personalized page for the user. It serves as an entry point to a personalized set of SAP Fiori apps on mobile and desktop devices. This article provides an overview of the SAP Fiori launchpad “My Home” page.

Adding Apps to “My Home”

If “My Home” is activated, the page is initially empty. The user can either import personalized app groups from other spaces, or add apps to the “My Home” page manually.

Importing Personalized Content

Adding Apps Manually

“My Home” Settings

Related Links

The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to SAP Fiori apps on mobile and desktop devices.

The launchpad home page displays tiles and links that allow the user to launch apps, and may also show additional information. The page can be personalized and apps can be added, removed, or bundled in groups.

The SAP Fiori launchpad home page must be used for all SAP Fiori apps.

Responsiveness

Components

Modifying the Home Page in Tab Bar Mode

Users can personalize the home page in tab bar mode by choosing Edit Home Page in the user actions menu.

In addition, they can use Short Drop and Long Drop functions to move apps from one tab to another.

Long Drop

Drag any app onto another tab and keep it there for a short while. The selected tab opens, and you can position the app where you want it.

Note: The focus switches from the current tab to the selected tab. A message toast confirms that the app was moved.