Updated: January 20, 2022

KPI Header

Intro

The KPI header displays numerical data the user needs to keep track of during the day. It is typically used in an overview pattern to provide the user with contextual information.

KPI header on iPhone (left) and on iPad (right)
KPI header on iPhone (left) and on iPad (right)

 

Anatomy

The KPI header is a container that includes multiple KPIs that are important to the user. There are several different ways to present KPI numbers — for additional guidance, see KPIs.

KPI header in regular width
KPI header in regular width

Adaptive Design

Compact Width

Given the limited horizontal space of compact width, the KPI header can hold a maximum of 3 KPIs in a single page. The actual number may be smaller, depending on the width of the individual KPIs.

Page controls allow multiple KPIs to be displayed in compact width without being crowded into one container.

KPI header in compact width with 2 KPIs (left) and with 3 KPIs (right)
KPI header in compact width with 2 KPIs (left) and with 3 KPIs (right)
KPI header in compact width page 1/2 (left) and page 2/2 (right)
KPI header in compact width page 1/2 (left) and page 2/2 (right)

 

Regular Width

In regular width, you may include up to four KPIs in the header. If more numbers need to be displayed, consider placing them in the content area.

Only the large variation of the KPI progress view can be used in the KPI header. The KPI progress view will always be displayed first, followed by any other KPIs.

KPI header in regular width
KPI header in regular width

Resources

Related Component: KPIs

Development: FUIKPIHeader

SAP Fiori for Android: KPIs