Header Area

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

Texts in the Header Area

• Mandatory header
  The header can have up to two lines of text before it is truncated.
• Optional subtitle
  The subtitle can have one line of text before it is truncated.
• Condition
  A total of three lines is available for the title and subtitle (two for the header and one for the subtitle).

Content Area

The content area is not mandatory. The content itself is defined by the apps and can comprise KPIs, charts, texts, or icons. Only show content types that are described on this page. Do not use custom icons.

Tip: If you are not showing a KPI or a chart, try to show an icon instead to help users to distinguish the tiles.

Footer Area

The status area is an optional, text-only area, and cannot display any other content.

Visual Representation

Apps can be visualized as tiles or links. While there are many types of tiles, links share a similar look: they comprise a title an optional subtitle.

Find more information on links and the conversion between tiles and links in the Homepage chapter.

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 x 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 x 1 tile behaves as one tile – with one headline, subtitle, clickable area, and target.

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

• 1 x 1 tile with two or three entries
• 2 x 1 tile with up to four entries

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

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.

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.

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

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.

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.

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.

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.

Default, Hover, Pressed State

The default state is without any overlay.

The gray overlay indicates that the tile is in hover state.

The darker shade of gray and the dotted line indicate the pressed state. The dotted line also indicates the focused state.