SAP Fiori Overview Page – List Cards in detail
Now that you have created your Overview Page application, you can decide on the type of cards based on your scenario. A typical use case could be a list of items that needs immediate attention are displayed along with the criticality indicators.
In this blog post, we will explore the features that list card has to offer.
List Card displays an array of items in a vertical list. For List or Table cards, clicking on the header as shown in Fig 1. will navigate to the link as specified in identification annotation – sample as shown in Sample 1
Fig 1.
<Annotation Qualifier ="NonManagedSpend1" Term =" UI.Identification">
<Collection>
<Record Type="UI.DataFieldForIntentBasedNavigation">
<PropertyValue Property="Criticality" String="UI.CriticalityType/Neutral"/>
<Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance"/>
<PropertyValue Property="SemanticObject"String="PurchaseOrder"/>
<PropertyValue Property="Action" String="analyzeNonManagedSpendSBKPI"/>
<PropertyValue Property="Label"String="Non Managed Spend"/>
</Record>
</Collection>
</Annotation>Sample 1.
Clicking on an item or row in the cardas shown in Fig 2, will open that specific item detail view as specified in the lineItem annotation in Sample 2:
Fig 2.
< Annotation Qualifier = "OverduePO_Supplier" Term = "UI.LineItem " >
< Collection >
< Record Type = "UI.DataField " > … < /Record >
< Record Type = "UI.DataField " > … < /Record >
< Record Type = "UI.DataField " > … < /Record >
< Record Type = "UI.DataFieldForIntentBasedNavigation " >
< PropertyValue Property = "SemanticObject" String = "PurchaseOrder" />
< PropertyValue Property = "Action" String = "manage"/>
< PropertyValue Property = "Label" String = "Object Page" />
< /Record>
< /Collection>
< /Annotation>Sample 2.
Note that if there is no navigation specified inside lineItem, the same navigation added to identification is used also for lineItem, and this time it includes the context of the selected line added as parameters to the url parameters
The “Condensed” list card shows minimal information – two lines of text and a number, and inherits the properties of the Standard List Item UI5 control -sap.m.StandartListItem as shown in Fig 3.
Fig 3.
Following is the Annotation property usage details for a standard/condensed List Card:
|
ObjectListItem Property |
Entity Annotation path |
Property location in List Item UI |
Comments |
|---|---|---|---|
| title | First DataField of LineItem | Top left | |
| description | Second DataField of LineItem | Bottom left | |
| info | First DataPoint/Value | Top right | If no data point exist the next DataField will be used (Third) |
| infoState |
First DataPoint/Criticality or First DataPoint/CriticalityCalculation or |
color | If no data point exist or no Criticality state would default to “None” |
Related manifest snippet and annotation sample are as shown in Sample 3.1 and Sample 3.2
In this case the Data “Out of stock” has been coloured using criticality calculation as shown in Sample 3.3
"card002": {
"model": "salesOrder",
"template": "sap.ovp.cards.list",
"settings": {
"title": "Reorder Soon",
"subTitle": "Less than 10 in stock",
"listType": "condensed",
"entitySet": "ProductSet",
"sortBy": "Availability_Status",
"sortOrder": "Descending",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#ReorderSoon",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#identify1",
"defaultSpan": {
"rows": 3,
"cols": 1
}
}
}Sample 3.1
<Annotation Term="com.sap.vocabularies.UI.v1.LineItem" Qualifier="ReorderSoon">
<Collection>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Supplier ID"/>
<PropertyValue Property="Value" Path="Name"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Supplier Name"/>
<PropertyValue Property="Value" Path="SupplierName"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Category"/>
<PropertyValue Property="Value" Path="Category"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation" Qualifier="Price">
<PropertyValue Property="Label" String="Unit Price"/>
<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#Stock_Availibility"/>
</Record>
</Collection>
</Annotation>Sample 3.2
<Annotation Term="com.sap.vocabularies.UI.v1.DataPoint" Qualifier="Stock_Availibility">
<Record Type="com.sap.vocabularies.UI.v1.DataPointType">
<PropertyValue Property="Title" String="Stock Availibility"/>
<PropertyValue Property="Description" Path="Name"/>
<PropertyValue Property="Value" Path="Availability_Status"/>
<PropertyValue Property="Criticality" Path="StatusCriticality"/>
</Record>
</Annotation>The “Extended” list card displays more information – three lines of text and three numbers, and inherits the properties of the Object List Item UI5 control -sap.m.ObjectListItem.
Bar Chart List Card
The Bar Chart List Card adds a chart component to a list. A Progress Bar [new chart] can be embedded in either a Condensed Fig 4.1 or Extended List format Fig 4.2.
Fig 4.1
Fig 4.2
Here are the annotation mapping details for an Extended List Card:
|
ObjectListItem Property |
Entity Annotation path |
Property location in List Item UI |
Comments |
|---|---|---|---|
| title | First DataField of LineItem | Top left | |
| First ObjectAttribute (under attributes aggregation) | Second DataField of LineItem | Middle left | |
| number | First DataPoint/Value | Top right | If no data point exist the next DataField will be used (Third) |
| numberState |
First DataPoint/Criticality or First DataPoint/CriticalityCalculation or |
color | If no data point exist or no Criticality state would default to “None” |
| firstStatus | Second DataPoint/Value | Middle right | If no data point exist the next DataField will be used (Third if one DataPoint was provided or Forth if none) |
| Second ObjectAttribute (under attributes aggregation) | Third DataField of LineItem | Bottom left | if the third DataField was used already the next available will be used (Fifth – if no DataPoints was provided Forth – if one DataPoints was provided) |
| secondStatus | Third DataPoint/Value | Bottom right | If no data point exist the next DataField will be used (Forth if 2 DataPoints was provided, Fifth if one, and Sixth if none) |
You would have noticed the semantic colouring used in bars in Fig 4.2. this is achieved using manifest and annotation setting as in Sample 4.2.1 and Samples 4.2.2 and 4.2.3
"card009": {
"model": "salesOrder",
"template": "sap.ovp.cards.list",
"settings": {
"title": "Contract Monitoring",
"subTitle": "Per Supplier",
"valueSelectionInfo": "Total contract volume",
"listFlavor": "bar",
"listType": "extended",
"entitySet": "SalesOrderSet",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#View1",
"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#line1",
"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#line",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#line",
}
}Sample 4.2.1
<Annotation Term="com.sap.vocabularies.UI.v1.LineItem" Qualifier="View1">
<Collection>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Customer"/>
<PropertyValue Property="Value" Path="CustomerName"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Order ID"/>
<PropertyValue Property="Value" Path="SalesOrderID"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Net Amt."/>
<PropertyValue Property="Value" Path="NetAmount"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation">
<PropertyValue Property="Label" String="TaxAmount"/>
<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#TaxAmount"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation">
<PropertyValue Property="Label" String="ValidToDate"/>
<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#ValidToDate"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Gross Amt."/>
<PropertyValue Property="Value" Path="GrossAmount"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Created at"/>
<PropertyValue Property="Value" Path="CreatedAt"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Status"/>
<PropertyValue Property="Value" Path="LifecycleStatus"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Changed at"/>
<PropertyValue Property="Value" Path="ChangedAt"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue Property="Label" String="Customer"/>
<PropertyValue Property="Value" Path="ToBusinessPartner/EmailAddress"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation">
<PropertyValue Property="Label" String="ContractAmount"/>
<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#ContractAmount"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation">
<PropertyValue Property="Label" String="NetAmount"/>
<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#NetAmount"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation">
<PropertyValue Property="Label" String="Amount"/>
<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#Amount"/>
</Record>
</Collection>
</Annotation>Sample 4.2.2.
<Annotation Term="com.sap.vocabularies.UI.v1.DataPoint" Qualifier="line">
<Record Type="com.sap.vocabularies.UI.v1.DataPointType">
<PropertyValue Property="Title" String="Sales Orders Amounts by Status"/>
<PropertyValue Property="Description" String="Subtitle from data point annotation description property"/>
<PropertyValue Property="Value" Path="GrossAmount"/>
<PropertyValue Property="CriticalityCalculation">
<Record Type="com.sap.vocabularies.UI.v1.CriticalityCalculationType">
<PropertyValue Property="ImprovementDirection" EnumMember="com.sap.vocabularies.UI.v1.ImprovementDirectionType/Maximizing"/>
<PropertyValue Property="ToleranceRangeLowValue" String="3000"/>
<PropertyValue Property="DeviationRangeLowValue" String="4000"/>
</Record>
</PropertyValue>
<PropertyValue Property="ValueFormat">
<Record Type="com.sap.vocabularies.UI.v1.NumberFormat">
<PropertyValue Property="NumberOfFractionalDigits" Int="1"/>
</Record>
</PropertyValue>
</Record>
</Annotation>Sample 4.2.3
Note that the count of records in List card was shown in a separate footer row, starting SAPUI5 1.48 onwards this is available in the header section.
The KPI shown in the header area will be discussed in detail in another blog post.
One thing I'm missing in all articles on Overview Page and the use of Cards, is what the requirements are for the Gateway service that you are using for a card.
I suppose this is also different for each card type.
So is it documented somewhere what you have to implement, and in which circumstances? $count, orderby, getentityset, sap:semantics="aggregate", ...
Hello Jeroen,
Here is a list to begin with:
batch (optional) – Ensures in minimizing the network traffic
$orderBy – Presentation variant
$select – To Support selection variant and presentation variant
$filter – To support filtering
$count – To Show the count in the card headers
$skip (optional) – To Skip top ‘x’ records
$top – To get top ‘x’ records to show in cards
$expand – To support navigation
Associations between entity sets as applicable
PS: this is not exhaustive, and the detailed documentation for gateway must be referred to.
Former Member Thanks for compiling this list.
Regards,
Prasita
Hi Prasita,
How to pass dynamic parameters to input parameters of odata source ?
I understand that we can pass hard coded values ui.selectionVariant but how to pass dynamic values ? For example current date, Need to pass current date as input parameter to xsodata.
Thanks,
Tanveer
Hello Tanveer,
You can make use of Custom Filters/Custom Navigation to achieve this:
https://sapui5.hana.ondemand.com/#/topic/4739893805f74a409e241698858ee424
https://sapui5.hana.ondemand.com/#/topic/40051b67edaf457cad37d552c37b497d
SelectionVariant does not support usage of path as of now
Regards,
Prasita
Hi Prasita, thanks for the blog, I found it really useful! I would like to know where to find other setting instructions like " defaultSpan" to change the layout of the cards. Thanks
Hello Pierfrancesco,
I am glad you find the blog useful. defaultSpan is not a released Feature yet. I shall update you once this is available.
Regards,
Prasita
Hi Prasita,
Is this functionality implemented yet? Do you know when this will be?
Thanks,
Jose
Hello Jose,
This is available with SAPUI5 version 1.52. you can find further info here: https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.52.1/en-US/f194b411027e4402a0be0537fa7b803b.html
Hi,
Does anyone know how to represent the progress (completion of the progress bar) in the progress bar? I can't detect which part of the annotation does this, in my case the progress bar is always full even if the percentage is lower than 100%. Thanks in advance.
Regards,
Pablo.
Hello Pablo,
Is the data returned in this case in %? I guess that could be an issue.
If the value is not in percentage Max and Min is selected from among the present set of values, else in case of percentage Value Min is 0 and Max is 100.
Regards,
Prasita
Hi Prasita,
Yes, you are right, that was the reason. As soon as I added more entries the progress is properly reflected in the bars. Thanks!
In any case, how do you specify a percentage data? I don't find the way in the metadata or annotation. I was using Decimal data type for this percentage values.
Regards,
Pablo.
Hi Pablo,
Were you able to figure this out? As to how to specify the percentage
Hi Zaki,
Yes, I was able to work this out. See details from my annotations.
Hope it helps.
Regards,
Pablo.
Hi Pablo,
I tried the exact same thing but it just doesnt seem to work
Can you tell me whats it that I am doing wrong here?
JSON Structure
{
"Region": "Northwest",
"Total": 5200000,
"Current": 1170000,
"Percentage": 22.5,
"__metadata": {
"uri": "DailyPnL('Northwest')",
"type": "ZDEMO_SRV.DailyPnL"
}
}
Card
The only difference I can see is with the ValueFormat....give it a try.
I tried that but it doesnt seem to work either. Whats the edm type you have used for percentage?
Prasita Can you please help?
Hi Zaki,
I forgot this last annotation. Please, give it a try:
<Annotations Target="Percent">
<Annotation Term="Org.OData.Measures.V1.Unit" String="%"/>
</Annotations>
Regards,
Pablo.
Perfect! It worked. Thanks a lot
Hi Prasita,
I am using List card with KPI header ( Datapoint annotations)
What annotations would be required get the values display for "Target" and "Deviation" as shown in screenshot below ?
Also, does these labels has to be "Target" and "Deviation" only can we rename it ?
Thanks,
Tanveer
Former Member please comment
Hello Tanveer,
Target value will be read from data point annotation.
DataPoint annotation -> TrendCalculation -> ReferanceValue
deviation value will be calculated from KPI value and target value as below.
Devation value = (KPI-ReferanceValue/ReferanceValue)
(25867-85000)/85000 = -69.57%
its not possible to change target an deviation text.
Thanks,
Nitin Magdum.
Hi Nitin/Prasita
It is great to have this Target and the Deviation as standard. But in many cases in which I came across with users, I would like to see the following features.
Thanks and Keep upi the good work.
Regards
Suresh
Hi Suresh,
Really looking forward for the same kind of features too, in my case I even need to hide Deviation figure and just keep the Target. I'm trying to do it using custom code at onAfterRendering event using a custom controller but it is working weirdly when applying filters.
I really expected that these kind of features (change labels, hide information,...) must be achievable by annotation modeler. Found nothing in the standard documentation.
Regards,
Pablo.
Thank you for your feedback, is there a specific scenario for which you would need this? This will help us in evaluating the requirement.
Hi Prasita,
Not really an specific business scenario, they are only customer requirements to modify certain labels or hide UI elements.
Regards,
Pablo.
Thank you for your feedback, I have emailed you for creating a feature request, so that this can be evaluated for further releases.
You can find the details for Target and Deviation explained here, within the section for DataPoint annotation. The labels Target, and Deviation cannot be changed.
Hi Prasita,
Thank you for all replies.. Helps a lot!!
One thing I noticed in list and table cards. These cards show only top few records. for example I have list of 10 records but card shows only top 3. what needs to be done so that we can scroll thru all records in the card on a desktop and hand held devices, say Ipad ?
Thanks
Tanveer
Hi Tanveer,
Ideally a navigation to the corresponding app with the detailed information would be the recommendation. OVP serves the purpose of a step between the basic information displayed using SAP Fiori launchpad and the details shown in corresponding SAP Fiori applications.
However with newer versions of SAPUI5 you will have an option to resize the card to suit your requirements. This too will limit the display to the number of lines that fit into the size selected. Scroll will not be an option in this as well.
Regards,
Prasita
Hi Prasita,
One query regarding OVP. I have a parameterized cds view for my list card C_MntrPurchaseOrderOvwPage, with currency field as parameter. I do not need any aggregation to be added to any of the fields in my cds.
As a result it appears as C_MntrPurchaseOrderOvwPageSet(without aggreagation) and not as C_MntrPurchaseOrderOvwPagesResults(with aggregation) in the service.
However in the get call, the call goes for C_MntrPurchaseOrderOvwPageSet without parameters passed in case of no aggregation. Is it mandatory to have aggregation in parametrized view?
Entity set and type and are maintained properly in Manifest and Annotation file. Also parameters are passed in annotation file for selection variant.
Currently I am adding aggregation in the cds. Hence parameter is getting passed.
Kindly Let me know if I need to make any changes.
Thanks & Regards,
Sindhu
As per the core Analytics support on parameters, it is mandatory to have aggregations for parameters to work.
Hi Prasita,
thanks for this detailed Post. I have one question concerning List Card. There happens to exist a StandardListImage.fragment.xml in source which I managed to activate with:
Anyways I either get it to show text/description and count OR the image. As soon as I add the IconUrl DataField the icon appears but everything else disappears. How do I get this right?
<Annotations Target="SERVICENAME.ENTITY"> <Annotation Term="UI.LineItem"> <Collection> <Record Type="UI.DataField"> <PropertyValue Property="Label" String="Title" /> <PropertyValue Property="Value" Path="TitleProperty" /> </Record> <Record Type="UI.DataField"> <PropertyValue Property="Label" String="Description" /> <PropertyValue Property="Value" Path="DescriptionProperty" /> </Record> <Record Type="UI.DataField"> <PropertyValue Property="Label" String="Info" /> <PropertyValue Property="Value" Path="CountProperty" /> </Record> <!--<Record Type="UI.DataField">--> <!--<PropertyValue Property="Label" String="Icon" />--> <!--<PropertyValue Property="IconUrl" Path="IconProperty" />--> <!--</Record>--> </Collection> </Annotation> </Annotations>BR
Chris
Hi Prasita ,
Nice blog !!
Can you please help on where to add $top – To get top ‘x’ records to show in cards.
I am using data from IOT-MMS to display on cards , and need to display only last 5mins data.
Also , Please let me know if how I can add custom filter to display last 5min data only on Cards .
Thank You:)
BR,
Atul.
Hi Atul,
We don't support usage of $top by means of annotations in OVP. You can perhaps considering a descending sort on the creationTime to achieve this.
Hi Prasita,
Great blog ! Can you kindly suggest which one is the best practice for writing annotations – Through web ide annotation modeller or through cds view?
Thank you for your comments. First preference will be for cds, and if not supported then via the annotation modeller.
Thank you for the quick reply !
Hi,
I have followed the blog in my code to use Bar Chart List Card, however the datapoint is not shown in the default "Blue" color.
I am curious if this is related to the number-format in the backed, as it is "Edm.Decimal" currently.
Can you figure it out?
Best regards,
Kimi Xu
Check for infoState as described in Fig 3.
Hi Prasita,
I'm using an extended list card. But somehow The list title of every lineitem doesnt appear in bold.
Please elaborate your use case
hi Prasita,
I'm not able to display company name ( Purchase order associated with businesspartner entity).
Regards
Godson
Hello Godson,
This should be working. I have rechecked the same in the latest UI5 version. Please confirm the UI5 version being used and the data being fetched from the backend.
Regards,
Prasita
How to add hyper link in List card and table card