Overview Page (OVP) Card headers

[AshishAnand]

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 !! 🙂