Skip to Content
Technical Articles
Author's profile photo Ashish Anand

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&gt;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:

  1. Maximize: the maximum the better
  2. Minimize: the minimum the better
  3. 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 !! 🙂

 

 

 

 

 

Assigned tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      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?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Akshaya,

       

      You need to add below property in card setting:

      "dynamicSubtitleAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#dynamicSubtitle",

      annotation should look like:

      <Annotation Term="com.sap.vocabularies.UI.v1.HeaderInfo" Qualifier="dynamicSubtitle">
                          <Record Type="com.sap.vocabularies.UI.v1.HeaderInfoType">
                              <PropertyValue Property="TypeName" String="Sales Order"/>
                              <PropertyValue Property="TypeNamePlural" String="Sales Orders"/>
                              <PropertyValue Property="Description">
                                  <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                      <PropertyValue Property="Label" String="Customer"/>
                                      <PropertyValue Property="Value" Path="DynamicSubTitle"/>
                                  </Record>
                              </PropertyValue>
                              <PropertyValue Property="ImageUrl" String="sap-icon://sales-order"/>
                          </Record>
                      </Annotation>

      It will show first dataField as the subtitle.

      Hope it helps 🙂

      Thanks and Regards

      Ashish

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      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?

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Displays when used from same entityset associated with the chart. Thanks a lot Ashish!

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Welcome. One card in OVP can only be associated with one entity set whether it’s card header, content or footer.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish Anand

       

      Is it possible to have a label prefixed to the subtitle?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Akshaya,

      Ideally, you should do all concatenation at the backend (CDS). But you can try below to do via annotation:

      <Record Type="UI.DataField">
      	<PropertyValue Property="Value">
      		<Apply Function="odata.concat">
      			<String>Sales order n°</String>
      			<String> </String>
      			<Path>Vbeln</Path>
      			<String> - </String>
      			<Path>Ernam</Path>
      		</Apply>
      	</PropertyValue>
      </Record>

      Hope it helps 🙂

      Thanks and Regards

      Ashish

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Thanks Ashish. Works like Magic!

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish,

      Can the View switch have dynamic title?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      No

      Author's profile photo shinynickitha chellam
      shinynickitha chellam

      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.

      Author's profile photo Hian Joy
      Hian Joy

      Hi Ashish Anand,

      Is it possible to add a particular integer field coming from backend and show the sum in KPI header

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      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

      Author's profile photo Akash Nachnani
      Akash Nachnani

      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.

      Author's profile photo Nagendra Prasad
      Nagendra Prasad

      Hi Akash,

      Try “defaultCountMode”: “Request” instead “defaultCountMode”: “Inline”. It works.

       

      Author's profile photo Dheeraj Ahuja
      Dheeraj Ahuja

      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.

      Author's profile photo Aaron Xu
      Aaron Xu

      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

       

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula

      Hi Ashish,

      Can you please help in creating dynamic view switch for card header?

       

      Regards,

      Sai Nithesh