Skip to Content
Author's profile photo Prasita Prabhakaran

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.

Assigned tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      Hi Prasita,

      Thank you for your blog,

      I have two questions,

      One of them how can I use filter on list car header like as below image?

      Second one how can I navigate to another sapui5 view when onclick card header?

       

       

      Best regards,

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Kaan,

      The filter at card level is not supported. To navigate from header you will have to use identification Annotation.

      Regards,

      Prasita

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      Hi,

      Thank you for reply.

      How to use identification Annotation. Do you have any documentation?

       

      Best Regards,

      Kaan,

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Kaan,

      You can look for UI.Identification for EntityTypeNorthwindModel.Customer_and_Suppliers_by_City at https://github.com/Prasita/OVPTableCard/blob/master/webapp/localService/NorthWind/annotation0.xml for an example.

      Regards,

      Prasita

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      Hi,

      That’s great!.

      Thank you for reply ?

       

      Best Regards,

      Kaan.

       

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      Hi Prasita,

      I could navigate new webpage with identification but I try to navigate new sapui5 page.

      Another problem is that on OVP, I couldn't add any table or custom component under the cards.

      So clearly I want to navigate new sapui5 page in same application.

      I click to overall operation status then navigate another sapui5 page like below.

      This page contains cards and table.

      Is it possible?

      if yes, how can I do?

       

      Best Regards,

      Kaan.

       

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Kaan,

      If the target application is also a UI5 application and is available via FLP, you can use DataFieldForIntentBasedNavigation within identification annotation and provide the required Semantic Object-Action to access the target app.

      General extension concepts in OVP can be checked in the below links:

      UI5 1.48 :http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5-sdk-dist-1.48/#/topic/b240f612227547d99e7fe76dd03da375

      Ui5 1.50:http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5-sdk-dist-1.50/#/topic/b240f612227547d99e7fe76dd03da375

      Regards,

      Prasita

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      Hi Prasita,

       

      My target is not application, it is page in same ovp application.

      Another problem is that I couldnt use both card and custom list in same ovp page.

       

      Best Regards,

      Kaan.

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Kaan,

      For the navigation to work the target needs to be registered on FLP with a semantic object - action. A mix of regular ovp cards and custom cards is supported.

      Regards,

      Prasita

      Author's profile photo Pablo Ruiz Navas
      Pablo Ruiz Navas

      Hi Prasita,

      Regarding filtering, do you know if it is possible to apply card filtering using custom filters (link)? I was able to set up custom filters in the Smart Filter bar as explained on the provided link, but I can't apply filters only to specific cards, all cards are affected by the filtering.

      I also raised a new question regarding this, but for the moment no valuable information -> link to question

      Thanks in advance, any hint is really appreciated.

      Regards,

      Pablo.

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Our custom filter expert will get back to you on this shortly 🙂

      Author's profile photo E. Aruna Devi
      E. Aruna Devi

      Hi,

      I created a Table card, but I wanted to navigate from table card to object page for each line item.

      Any idea how we do this.

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hi Devi,

      This is done using identificationAnnotation. You can find additional info on Card Navigation here. Please note that the target has to be a different application.

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Prasita,

      Thank you for excellent blog again !

      I tried to look for a way to to have line item values with decimals but did not find any annotations. Is there a way ?

      Want to display values in the screenshot with at least one or two decimal places.

      Thanks,

      Tanveer

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hi Tanveer,

       

      If the scaling is done (Eg 71K) the decimals won't be shown.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Prasita ,

      Is it possible to have the criticality at the lineitem level?

      A bar at the side of the row will be colored like in normal list report table?

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      No, this is not supported yet