Skip to Content

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",
            "customParams": "getParameters",
            "staticParameters": {
              "name": "Abhishek",
              "surname": "Waghela"
            },
            "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.

To report this post you need to login first.

1 Comment

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

  1. Jeroen Vanattenhoven

    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”, …

    (0) 

Leave a Reply