Updated: May 13, 2020

Tile

sap.m.GenericTile

Intro

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.

Tiles - Launchpad
Tiles - Launchpad

Responsiveness

By default, the standard tile size is responsive. The tile size is independent of the device: small screens get smaller tiles (even on a desktop device), and all larger screens (including some smartphone screens) get larger tiles.

The examples below show how the tiles render for different screen sizes.

Tiles – Size S
Tiles – Size S
Tiles – Size M
Tiles – Size M

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).

Large tiles (responsive)
Large tiles (responsive)
Small tiles
Small tiles
Warning
Do not use this option for single tiles. Because all tiles on the launchpad need to be consistent (all responsive, or all small), the tile size should not be defined at app level.

Layout

The generic tile control currently supports two tile dimensions (1×1 and 2×1).

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

Tile layout
Tile layout

Header Area

The header area is mandatory, and contains the title and an (optional) subtitle. The header is always in the upper left corner of the tile, except on feed tiles.

Title Text (Required)

The title can have up to two lines of text before it is truncated (or three lines if there is no subtitle).

The title text supports hyphenation (property: wrappingtype = Hyphenated). Switching on hyphenation activates it for all languages that have hyphenation support.

Subtitle (Optional)

The subtitle can have one line of text before it is truncated.

Basic tile with hyphenated header text
Basic tile with hyphenated header text

Content Area

The content area is optional. The content itself is defined by the apps and can be a KPI, counter, chart, text, or icon.

Footer Area

The footer is optional, and comprises a single line of text. It is typically used to qualify the content (for example, the period and currency for a KPI), but can also contain a refresh icon and status.

Visual Representation

Apps can be visualized as tiles or links. While there are many types of tiles, links always have the same format: they comprise a title an optional subtitle.

For more information about links and the conversion between tiles and links, see SAP Fiori Launchpad Home Page.

Tiles and links
Tiles and links

Types

KPI Tile

Key performance indicators (KPIs) are used to measure and monitor a company’s performance at a strategic and operational level.

The tile displays the KPI values as large, easy-to-recognize digits. In addition, you can show deviation arrows, negative values, and scaling factors. You can also use semantic colors to emphasize the content. The number of digits is limited by the size of the tiles.

You can use the 2×1 tile to combine the content of two tiles into one. For example, you can show a KPI next to a comparison chart (as shown on the right), or use any other combination such as KPI/KPI, chart/chart, and so on. You can show different information in both the content and status areas. However, in all other respects, the 2×1 tile behaves as one tile – with one headline, subtitle, clickable area, and target.

KPI tile
KPI tile

Comparison Chart (Micro Chart)

You can use comparison charts to show detailed comparisons with semantic coloring for entries in a “Top N” list. You can choose between two different layouts:

  • 1×1 tile with two or three entries
  • 2×1 tile with up to four entries
Tile with comparison micro chart
Tile with comparison micro chart

Bullet Chart (Micro Chart)

bullet chart is a variation of a bar chart. It compares a single, primary value to one or more target values. The primary value is shown in the context of qualitative ranges (thresholds) such as poor, satisfactory, and good.

See the image on the right for examples of different bullet charts:

  • The chart on the left focuses on the actual value in relation to the target value and the forecast.
  • The chart in the middle shows the same combination, but without the forecast.
  • The chart on the right focuses on the delta between the actual value and the target value. Note that the delta visualization never shows the forecast.

All the charts show certain thresholds to give the user a sense of orientation.

Tile with bullet micro chart
Tile with bullet micro chart

Trend Chart/Area Chart (Micro Chart)

You can use trend charts (also known as area charts) to show cumulated totals over time, based on amounts or percentages. In this example, you can see a stacked trend chart. You can also use trend charts to depict trends for related attributes.

The trend chart is similar to the plot chart, except that the area below the plotted line is colored to indicate the volume.

Tile with area micro chart
Tile with area micro chart

Column Chart (Micro Chart)

You can use column charts (bar charts) to compare categories using vertical bars. One axis of the chart shows the specific categories, while the other axis represents a discrete value. You can also cluster multiple bars into groups within the column chart.

Tile with column micro chart
Tile with column micro chart

Basic Launch Tile

The most basic type of launch tile contains a title and an icon.

Basic launch tile
Basic launch tile

Monitoring Tile

Use the monitoring tile when you want to display status updates or an object count.

You can also apply semantic colors to the status bar to indicate a positive, negative, or critical status.

Monitoring tile
Monitoring tile

SAP Jam Tile

If an organization uses SAP Jam, users can also add SAP Jam tiles to the launchpad. The SAP Jam tile shows the content of new notifications in 10-second intervals. It can scroll through up to 10 new notifications. Tile content is updated every five minutes. If there are no new notifications, the tile displays the most recent notification. If the 2 x 1 tile does not contain an icon, the headline uses the full length of the container. For more information, see collaboration.

SAP Jam tile (2x1)
SAP Jam tile (2x1)

Feed Tile

The feed tile is a special tile that shows a news feed. It refreshes every three to five seconds and is twice the size of a standard tile. In addition to the news headline, it comes with a background image, the news source, and a time stamp. The feed tile flips through news messages, which are configured for the tile. For accessibility reasons, the tile contains a start and pause button which can be found by hovering the mouse over the tile on desktop devices. On touch devices, the buttons are always displayed. Additionally, the number of slides contained the tile is visualized as dots on on the bottom of the tile.

Feed/news tile (2x1)
Feed/news tile (2x1)

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.

Tile - Interaction
Tile - Interaction

Styles

Tile Loading

When a tile is loading, the standard loading indicator appears in the center of the tile. The tile itself is overlayed in white.

If a tile cannot be loaded, a warning icon and text appear at the bottom of the tile. Error messages should not be displayed in the status area. For each tile, the error text can be defined individually by the system administrator when preparing the tile.

Tile loading (right) and failing to load (left)
Tile loading (right) and failing to load (left)

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 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.

Elements and Controls

Implementation