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.
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
Sample 3.2
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
Sample 4.2.2.
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.
New NetWeaver Information at SAP.com
Very Helpfull
