Technical Articles
Overview Page (OVP) Card headers
prerequisites
Make sure you have been to the previous blog of this blog series.
OVP card header may contain the following information about OVP cards:
Title and subtitle
Both the title and subtitles are very important information about the card. OVP card title and subtitle can be maximum of 3 and 2 lines respectively.
Unit of measure (if any) of data point will be added to the subtitle as a suffix.
Subtitle can be changed dynamically using HeaderInfo annotation:
In case of KPI Header If the subtitle is not mentioned in manifest then it will read from data point annotation description property string or path.
Counter information
Counter information displays the number of items out of the total number of items on the top right corner of the card. In case, all the items are displayed on the card, the counter information is not displayed.
KPI
OVP card KPI can be set using dataPointAnnotationPath setting of the card which should point to a datapoint annotation. KPI value is the aggregation of data point annotation value property. in this example, its aggregation of GrossAmount property value and this aggregation is done at the backend side.
"card06": {
"model": "GWSAMPLE_BASIC",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{card06_title}}",
"subTitle": "{{card06_subTitle}}",
"entitySet": "SalesOrderSet",
"listType": "condensed",
"listFlavor": "standard",
"addODataSelect": false,
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#header",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
"valueSelectionInfo": "{{card06_valueSelectionInfo}}",
"defaultSpan": {
"rows": 5,
"cols": 1
}
}
}
below is the datapoint annotation
<Annotation Term="UI.DataPoint" Qualifier="header">
<Record Type="UI.DataPointType">
<PropertyValue Property="Title" String="{@i18n>TOTAL_SALES}"/>
<PropertyValue Property="Value" Path="GrossAmount"/>
<PropertyValue Property="CriticalityCalculation">
<Record Type="UI.CriticalityCalculationType">
<PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Maximize"/>
<PropertyValue Property="ToleranceRangeLowValue" String="3000"/>
<PropertyValue Property="DeviationRangeLowValue" String="4000"/>
</Record>
</PropertyValue>
<PropertyValue Property="TrendCalculation">
<Record Type="UI.TrendCalculationType">
<PropertyValue Property="ReferenceValue" String="15000"/>
<PropertyValue Property="UpDifference" Decimal="5000"/>
<PropertyValue Property="StrongUpDifference" Decimal="10000"/>
<PropertyValue Property="DownDifference" Decimal="1000"/>
<PropertyValue Property="StrongDownDifference" Decimal="2000"/>
</Record>
</PropertyValue>
</Record>
</Annotation>
Criticality calculation is used to show the semantic colour of the KPI:
ImprovementDirection: describes in which direction change is seen as an improvement, supports the following three values:
- Maximize: the maximum the better
- Minimize: the minimum the better
- Target: The closer to the target, the better
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.
1 | (upDifference is not defined or 0 ) and (KPI value – reference value >= 0) | trend-up |
2 | (downDifference is not defined or 0) and (KPI value – reference value <= 0) | trend-down |
3 | (if upDifference is defined) and (KPI value – reference value >= upDifference ) | trend-up |
4 | (if downDifference is defined) and (KPI value – reference value <= downDifference ) | trend-down |
Showing KPI value with %
If you want to show KPI value in percentage then you need to add following annotation for the KPI value property (here for example GrossAmount).
<Annotations Target="GWSAMPLE_BASIC.SalesOrder/GrossAmount">
<Annotation Term="Org.OData.Measures.V1.Unit" String="%"/>
</Annotations>
Adding Unit of measure to the KPI
For adding a unit of measure to KPI value you can use:
sap:unit in the 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"/>
Org.OData.Measures.V1.ISOCurrency in annotations
<Annotations Target="GWSAMPLE_BASIC.SalesOrder/GrossAmount">
<Annotation Term="Org.OData.Measures.V1.ISOCurrency" Path="CurrenyCode"/>
</Annotations>
This Unit of measure will also be added in card subtitle as a suffix.
Combining it all together
The output of the above exercise will be a list card with a header:
A –> header
B –> subheader with a unit of measure (EUR) as the suffix
C –> Counter information
D –> KPI with semantic coloring and arrow(green)
E –> value selection text
F –> target and deviation trends
View Switch
View switches allow the end user to choose from different available views within the same card. For the cards that need to show multiple views, we need to specify a property “tabs” in the manifest file. The “tabs” property consists of an array of card properties. These card properties include information about the LineItem, SelectionVariant, PresentationVariant, etc. Each value in the “tabs” array denote a different view which is to be shown in the card.
"card06": {
"model": "GWSAMPLE_BASIC",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{card06_title}}",
"subTitle": "{{card06_subTitle}}",
"entitySet": "SalesOrderSet",
"listType": "condensed",
"listFlavor": "standard",
"addODataSelect": false,
"valueSelectionInfo": "{{card06_valueSelectionInfo}}",
"tabs": [{
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#header",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
"value": "View Switch 1"
}, {
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#header",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
"value": "View Switch 2"
}],
"defaultSpan": {
"rows": 5,
"cols": 1
}
}
}
I have not specified different settings for tabs for the sake of simplicity, but you can play around it and change the settings of each tab.
Conclusion
We have successfully created a list card with KPI header including title, dynamic subtitle, KPI value, trend arrow, selection information, target and deviation information and view switches. We also learnt about different card settings and annotations related to card headers and KPIs.
Next is what
In my next blog of this blog series, I’ll discuss card OVP card navigation and authorization. Stay connected !! 🙂
Ashish Anand : I tried header info annotation and gave it as deference in dynamic subtitle annotation path. It somehow doesn't get displayed any leads?
Hi Akshaya,
You need to add below property in card setting:
"dynamicSubtitleAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#dynamicSubtitle",
annotation should look like:
It will show first dataField as the subtitle.
Hope it helps 🙂
Thanks and Regards
Ashish
Tried but it doesn't display:(
Can the annotation be from any entity or it should essentially be from the entity associated with the chart card?
Displays when used from same entityset associated with the chart. Thanks a lot Ashish!
Welcome. One card in OVP can only be associated with one entity set whether it’s card header, content or footer.
Hi Ashish Anand
Is it possible to have a label prefixed to the subtitle?
Hi Akshaya,
Ideally, you should do all concatenation at the backend (CDS). But you can try below to do via annotation:
Hope it helps 🙂
Thanks and Regards
Ashish
Thanks Ashish. Works like Magic!
Hi Ashish,
Can the View switch have dynamic title?
No
Hi Ashish,
Can informations fed to 'valueSelectionInfo' be dynamic? If yes, how much can we add? I would like to create a card header similar to the below.
Hi Ashish Anand,
Is it possible to add a particular integer field coming from backend and show the sum in KPI header
Hi Joy,
No, the KPI should be an aggregated value coming from backend as it's not scalable to add the business logic at the client-side.
Thanks and Regards
Ashish
Hi Ashish Anand,
Thanks for the blog.
I have a question regarding counter information. In my case, it is showing wrong counter info. So I wanted to hide counter information for some cards. Is there any way , we can hide this counter info?
Currently I have 3 records for a list card but it is showing 3 of 6 records. I don't know why this is showing wrong info.
Thanks.
Hi Akash,
Try “defaultCountMode”: “Request” instead “defaultCountMode”: “Inline”. It works.
I'm displaying a card which shows number of records for each countries in donut chart (e.g. India 2, Germany3, USA 1). I want to show the total records in my KPI i.e. 2+3+1 =6. THere is no property in Odata which gives this number.
Hi Ashish,
Recently I was working on a OVP project. I have a question about
the annotation Org.OData.Measures.V1.ISOCurrency , I dont't how to implememt it when I used CDS and ABAP. Generally, the metadata didn't have this annotation even I have currency field.
Regards,
Aaron
Hi Ashish,
Can you please help in creating dynamic view switch for card header?
Regards,
Sai Nithesh