Intro

KPI Display is a component used to display a key number with a label and optional icon. It can be placed in headers, cards or other content areas.

Usage

• You need to highlight the number of objects with a certain status, in a series of statuses or types of objects
• You only need to show an avatar. Use sap.m.Avatar.
• For layouts where the Avatar and Employee Neame are the page title, such as People Profile.

Responsiveness and Adaptiveness

Types

There are two types of KPI Display – one with an icon and one without.

Components

User Preview is a "compound component" consisting of smaller Fiori components:

• KPI – clicks through to People Profile
• Label – sap.m.Label – clicks through to People Profile

Behavior & Interaction

The whole facet may be clickable to execute a filter function on a list or grid view of objects, but this is not required. If there is a group of facets that requires a group header, use the optional section header to the left of the facets.

Colors

The number or the icon may be colored depending on the use case:

• If the a semantic icon is needed, then the icon should be colored and the number set to Neutral.
• If a semantic icon is not needed, then the number should be colored.
• In a collection of KPIs, either all items should have an icon, or all items should not. KPIs appearing in the same group need to be formatted the same.
• If no coloring is needed, then the number should utilize Accent Color #10, and the number should use the Semantic Neutral style.
• If accent coloring is needed, then the icon should be set to the accent color, and the number set to Semantic Neutral style.

Resources

KPI Display is available in the SuccessFactors supplemental Sketch stencil library.