SAP Fiori Elements – Overview Page - KPI Header

[Former Member]

You may be familier with adding List, Table and chart cards to your OVP application, in this blog let us look into the details of the KPI Header.

KPI Header is a feature supported by OVP starting  SAPUI5 version 1.44. You can provide your Key Performance Indicators (KPIs) in the card header with this feature, along with the target and deviation values if desired, as shown in the following Fig 1.



Fig 1. KPI Header

Here is a detailed description of the KPI Header shown above

Sr. No	Field	Annotation/setting	Description
1	25.9K	DataPointàValue (Path to property from where KPI value is read)	The numeric value after formatting. (KPI value of max 5 digits will be shown including decimal point)
2	85.0k	DataPointàTrendCalculationàReferenceValue	ReferenceValue from TrendCalculation
3	-69.6%	(DataPointàValue – DataPointàTrendCalculationàReferanceValue) / DataPointà TrendCalculationàReferenceValue (25867-85000)/85000 = -69.57%	Deviation value will be calculated from KPI value and target  value
4	Value Selection Info	from manifest.json file cardsàcard_IdàSettingsàvalueSelectionInfo	Value Selection Info is read from manifest. It describes people, number of items etc. This field is mandatory in case of KPI header.
5	By Lifecycle Descript., Delivery Description	PresentationVariantàGroupBy (PropertyPath taken as string)	On what is the card data grouped by. It returns a list of comma separated values. To enable this you need to add the property "showSortingInHeader": true. (default value is false)
6	EUR, not Completed, 0 – 80000	SelectionVariantà Ranges	On what is the card data filtered by. It returns a list of comma separated values. To enable this you need to add the property "showFilterInHeader": true. (default value is false)

Table 1 : KPI header section details

To show the KPI header in OVP card we need to include a data point annotation in the card settings.



Fig 2 – card setting in manifest with data point annotation to show KPI header

Here is a sample data point annotation for your reference:



Fig 3 – Sample Data Point Annotation

How is the KPI value calculated?

KPI value is the aggregation of data point annotation value property.

In the above annotation it is the aggregation of GrossAmount property values, and this aggregation is done at the backend.

KPI header without target and deviation

If you want to show only KPI value without target and deviation, then remove TrendCalculation from data point annotation.



Fig 4 – KPI header without target and deviation

Show KPI and Target value in %

To show KPI value in % add the following property level annotation org.oData.measur.V1.Unit for KPI value property(in this case GrossAmount).

<Annotations Target="GWSAMPLE_BASIC.SalesOrder/GrossAmount">

<Annotation Term="Org.OData.Measures.V1.Unit" String="%"/>

</Annotations>

Similar annotation is required for Target value property ,to show target value in %.



Fig 5 – KPI and Target value in %

Add Unit of Measure to KPI value

For adding unit of measure to KPI value you can use sap:unit in metadata or Org.OData.Measures.V1.ISOCurrency in annotations.

For example I have following data

{

CurrencyCode:"EUR"

GrossAmount:850

}

And If you wish to show 850 EUR then you need to use one of the following options.

This unit of measure EUR will be shown in subtitle, because of this the card subtitle is mandatory in case of KPI header.

Option 1 -  sap:unit in metadata

<Property Name="CurrencyCode" Type="Edm.String" MaxLength="5" sap:label="Currency" sap:updatable="false" sap:semantics="currency-code"/>

<Property Name="GrossAmount" Type="Edm.Decimal" Precision="16" Scale="3" sap:unit="CurrencyCode" sap:label="Gross Amt." sap:creatable="false" sap:updatable="false"/>

option 2 -  Org.OData.Measures.V1.ISOCurrency in annotations 

<Annotations Target="GWSAMPLE_BASIC.SalesOrder/GrossAmount">

<Annotation Term="Org.OData.Measures.V1.ISOCurrency" Path="CurrencyCode"/>

</Annotations>

KPI value arrow direction

The direction of the arrow pointing up or down depends on the property values (ReferenceValue, UpDifference, DownDifference) mentioned under TrendCalculation in the annotations and KPI value.

The sequence of conditions to compute arrow direction are as follows:

Sr No.	Condition	Arrow Direction
1	(upDifference is not defined or 0 ) and (KPI value - referance value >= 0)	trend-up
2	(downDifference is not defined or 0) and (KPI value - referance value <= 0)	trend-down
3	(if upDifference is defined) and (KPI value - referance value >= upDifference )	trend-up
4	(if downDifference is defined) and (KPI value - referance value <= downDifference )	trend-down

Table 2 – Sequential conditions for KPI value arrow direction

KPI value Color

It depends on Criticality or CriticalityCalculation from data point annotation. If you are using Criticality, it will take the color based on what is provided, Negative/Critical/Positive.

If you are using CriticalityCalculation, following are the cases depending on the ImprovementDirection –

1. Minimize/Minimizing

• Positive if Value <= ToleranceHigh (takes priority)


• Negative if Value > DeviationHigh

2. Maximize/Maximizing

• Positive if Value >= ToleranceLow (takes priority)


• Negative if Value < DeviationLow

3. Target

• Positive if ToleranceLow <= Value <= ToleranceHigh (takes priority)


• Negative if DeviationHigh < Value < DeviationLow

I have created a list card with KPI header for reference using nortwind service.  I have uploaded the project on github OVP_Northwind_KPI.

Note : This card is different from screenshot used in this blog.