SAP Fiori Overview Page – Table Cards in detail

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.