Components/Generic Tiles
fd-tile · 9 examples from SAP's documentation · Back to the gallery
About
The generic tile is a container that represents an app on the SAP Fiori launchpad home page. They can display types of content based on the data supplied from the app. In addition, they can contain an icon, information text, a title, KPIs, counters and charts. Tiles move to the next row if there is insufficient horizontal screen space to display them all.
Sizes
Generic tiles can be displayed in two tile dimensions: the default 1x1, and 2x1 (with the addition of a \
Layout
The layout of the generic tile is fixed with designated areas for the header, content area and footer. **The common elements displayed in generic tiles are:** | Element | Class | Description | | :------ | :------------- | :----------- | | Header (mandatory) | \
Launch tile
As the name suggests, the launch tile is used for when users need to launch an application from the launchpad. It can display several elements, such as a header, subtitle, refresh button, footer, KPIs and images. The header can contain a maximum of 3 lines; all 3 lines can be used for the title or one of the lines can be used for a subtitle. If a fourth line title or an optional subtitle line is required, the \
Launch tile with numeric content and launch icon
Launch tile with combined header and content
Launch tile (profile)
Launch tile (logo)
KPI tile
A KPI tile displays key performance indicators that 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, semantic values, and scaling factors. The number of digits is limited by the size of the tiles. To display a KPI tile, add the \
KPI tile with numeric content (size L)
KPI tile with numeric content (size M)
KPI tile with numeric content (size S)
Feed tile
The feed tile displays a news feed with a news headline, the source, and a time stamp. It shows new notifications in 10-second intervals, and tile content is updated every five minutes. If there are no new notifications, the most recent notifications are displayed. The feed tile’s headline uses the full width of the container and does not contain an icon. To display a feed tile, add the \
Badge tile
The badge tile displays very short and important information at the top right corner of the tile. It's recommended to add a badge to a tile when it has been newly added. Badges are not displayed when in action/edit mode.
Slide tile
The slide tile displays a news headline, a background image, the news source, and a time stamp. A start and pause button are always displayed on touch devices and can be revealed on desktops by hovering the mouse over the tile. The dots on the bottom of each tile identify the number of pages they contain. To display a slide tile, add the \
Link tile
The link tile displays links in a separate area below the tiles area and comprise a title and optional subtitle. They can be in list format or they can float above the content. Link tiles can also be viewed in action mode, displaying a close button at the top and an actions button on the bottom. To display a link tile, add the \
Link tile: Floating behaviour
Link tile: List behaviour
Link tile: Floating behaviour with badge
Link tile: List behaviour with badge
Link tile: Floating behaviour action mode
Action mode
While a tile is in action mode, a close button is displayed on the top right-hand corner of the tile. The action icon is displayed on the bottom right-hand corner, and is only an indicator. The click/touch area fills the entire tile, excluding the area reserved for the close button. To display generic tile in action mode, add the \