Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member103161
Contributor
You would by now have created your own Overview Page application, and also played around with different card types. In this blog I will be getting into the details of adding table cards.

Table card is very similar to the List Card with an additional column header. Fig 1 shows a regular Table card



Fig 1

Navigation concepts are similar for both list and table cards and you can refer to List card blog to check the details.

For the above card I have used Northwind service, annotation used is as in Sample 1.1 and Manifest snippet for sap.ovp is as in Sample 1.2
<Annotations Target="NorthwindModel.Customer_and_Suppliers_by_City">
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="City"/>
<PropertyValue Property="Label" String="City"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="CompanyName"/>
<PropertyValue Property="Label" String="Company Name"/>
</Record>

<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ContactName"/>
<PropertyValue Property="Label" String="Contact Name"/>
</Record>
</Collection>
</Annotation>
</Annotations>

Sample 1.1
	"sap.ovp": {
"globalFilterModel": "NorthWind",
"globalFilterEntityType": "Category",
"cards": {
"Test_OVPTest_card01": {
"model": "NorthWind",
"template": "sap.ovp.cards.table",
"settings": {
"title": "{{Test_OVPTest_card01_title}}",
"entitySet": "Customer_and_Suppliers_by_Cities",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
}
}
}
}

Sample 1.2

Table card gives additional semantic colouring capabilities to columns, based on criticality calculation. Here is a sample card:



Fig 2

For the above card I have used Northwind service, annotation used is as in Sample 2.1 and Manifest snippet for sap.ovp is as in Sample 2.2

 
<Annotations Target="NorthwindModel.Category_Sales_for_1997">
<Annotation Term="UI.DataPoint" Qualifier="Sales">
<Record Type="UI.DataPointType">
<PropertyValue Property="Title" String="Sales"/>
<PropertyValue Property="Value" Path="CategorySales"/>
<PropertyValue Property="CriticalityCalculation">
<Record Type="UI.CriticalityCalculationType">
<PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Maximize"/>
<PropertyValue Property="ToleranceRangeLowValue" Int="500000"/>
<PropertyValue Property="ToleranceRangeHighValue" Int="700000"/>
</Record>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="CategoryName"/>
<PropertyValue Property="Label" String="Category"/>
</Record>
<Record Type="UI.DataFieldForAnnotation">
<PropertyValue Property="Label" String="Sales"/>
<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Sales"/>
</Record>
</Collection>
</Annotation>
</Annotations>

Sample 2.1
			"Test_OVPTest_card02": {
"model": "NorthWind",
"template": "sap.ovp.cards.table",
"settings": {
"title": "{{Test_OVPTest_card02_title}}",
"entitySet": "Category_Sales_for_1997",
"addODataSelect": false,
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
}
}

Sample 2.2

You can download the project using Northwind service for OVP Table Card sample here

This blog will be updated with features for SAPUI5 1.52 by mid Feb 2018. Do send in your feedback and queries.
19 Comments