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.
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,
Hello Kaan,
The filter at card level is not supported. To navigate from header you will have to use identification Annotation.
Regards,
Prasita
Hi,
Thank you for reply.
How to use identification Annotation. Do you have any documentation?
Best Regards,
Kaan,
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
Hi,
That’s great!.
Thank you for reply ?
Best Regards,
Kaan.
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.
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
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.
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
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.
Our custom filter expert will get back to you on this shortly 🙂
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.
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.
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
Hi Tanveer,
If the scaling is done (Eg 71K) the decimals won't be shown.
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?
No, this is not supported yet
Hi Prasita,
Thank you for blog!
how we can achieve card to card navigation in OVP ?
After selecting the record from first card, selected record should reflect in another card.
Best Regards,
Sohel.
Hi Prasita,
Can we enable scrolling in table cards?
Best Regards,
Ravina