Skip to Content

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.

To report this post you need to login first.

13 Comments

You must be Logged on to comment or reply to a post.

  1. 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,

     

    (0) 
          1. 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.

             

             

            (0) 
            1. Prasita Prabhakaran 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

              (0) 
              1. 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.

                 

                (0) 
                1. Prasita Prabhakaran 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

                  (0) 
      1. 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.

         

        (0) 

Leave a Reply