SAP Fiori Elements – Overview Page – 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
|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|
(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).
<Annotation Term=”Org.OData.Measures.V1.Unit” String=”%”/>
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
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
<Annotation Term=”Org.OData.Measures.V1.ISOCurrency” Path=”CurrencyCode”/>
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 –
- Positive if Value <= ToleranceHigh (takes priority)
- Negative if Value > DeviationHigh
- Positive if Value >= ToleranceLow (takes priority)
- Negative if Value < DeviationLow
- 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.