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

23 Comments

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) 
    1. Prasita Prabhakaran Post author

      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.

      Palla Golla Dwarakesh Thanks for compiling this list.

      Regards,

      Prasita

       

       

      (0) 
  2. Tanveer Shaikh

    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

    (0) 
  3. Pierfrancesco La Spada

     

    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

    (1) 
        1. Prasita Prabhakaran Post author

          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

           

          (0) 
  4. Pablo Ruiz Navas

    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.

     

    (0) 
    1. Prasita Prabhakaran Post author

      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

      (1) 
      1. Pablo Ruiz Navas

        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.

         

        (0) 
  5. Tanveer Shaikh

    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

    (0) 
    1. Nitin Magdum

      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.

      (0) 
      1. Suresh Babu

        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.

        1. Should be able to change the Labels(Target, Deviation) to whatever users want.
        2. We should be able to simply have a absolute value with an optional requirement to display %deviation

        Thanks and Keep upi the good work.

        Regards

        Suresh

         

        (0) 
        1. Pablo Ruiz Navas

          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.

           

          (0) 
  6. Tanveer Shaikh

    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

     

    (0) 
    1. Prasita Prabhakaran Post author

      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

      (0) 
  7. Sindhu Kishore

    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

     

    (0) 

Leave a Reply