Skip to Content

We have so far looked at creating an SAP Fiori Overview Page and adding table, list and some of the analytic cards. In this blog we look at the stack cards in detail.

When you wish to display an aggregation of items that may also need a quick action to be taken right from the Overview Page, look no further than the Stack Card. Eg, Purchase orders awaiting approval

Fig 1.1

In Fig 1.1 the title and subTitle from card settings correspond to the “Purchase Orders – Awaiting Approval” and the “Sorted by delivery date” on the left side of the Stack Card. Stack can shows upto 20 items in an Object Stream as shown in Fig 1.2. Thus the right side of the stack provides the total number of items. In this example “65”

Each item could be acted upon, Eg: Approve, Reject without having to navigate to the instance. The Object stream is opened on clicking the right section of the card.

Fig 1.2

For the stack card shown in Fig 1.1 the manifest file would look like follows:

"card001": {
  "model": "GWSAMPLE_BASIC",
  "template": "sap.ovp.cards.stack",
  "settings": {
    "itemText": "{{card001_itemText}}",
    "title": "{{card001_title}}",
    "subTitle": "{{card001_subtitle}}",
    "entitySet": "PurchaseOrderLineItemSet",
    "annotationPath": "com.sap.vocabularies.UI.v1.FieldGroup#Note/Data,com.sap.vocabularies.UI.v1.FieldGroup#Note1/Data",
    "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification,com.sap.vocabularies.UI.v1.Identification#Awaiting_Approval"
  }
}

Snippet 1.1

Header – Purchase Orders – Awaiting Approval is same as the card title.

For every Item the header can be customised by providing the HeaderInfo annotation as shown below in Snippet 1.2: Type Name appears as the prefix for each of the quick view cards.

<Annotation Term="com.sap.vocabularies.UI.v1.HeaderInfo">
 <Record Type="com.sap.vocabularies.UI.v1.HeaderInfoType">
  <PropertyValue Property="TypeName" String="Purchase Order"/>
  <PropertyValue Property="TypeNamePlural" String="Purchase Order Items"/>
  <PropertyValue Property="Title">
   <Record Type="com.sap.vocabularies.UI.v1.DataField">
    <PropertyValue Property="Label" String="Purchase Order ID"/>
    <PropertyValue Property="Value" Path="ItemPosition"/>
   </Record>
  </PropertyValue>
  <PropertyValue Property="Description">
   <Record Type="com.sap.vocabularies.UI.v1.DataField">
    <PropertyValue Property="Label" String="Product ID"/>
    <PropertyValue Property="Value" Path="ProductName"/>
   </Record>
  </PropertyValue>
  <PropertyValue Property="ImageUrl" String="sap-icon://order-status"/>
 </Record>
</Annotation>

Snippet 1.2

itemText=> “POs awaiting approval” is used for the last card, which provides a link to further items. And the text “Purchase Order List” is picked from the IdentificationAnnotation–>Label

 

For the content within each of the object stream item, the Facets and FieldGroup annotation are used, sample is as follows:

<Annotation Term="com.sap.vocabularies.UI.v1.FieldGroup" Qualifier="Note">
 <Record Type="com.sap.vocabularies.UI.v1.FieldGroupType">
  <PropertyValue Property="Data">
   <Collection>
    <Record Type="com.sap.vocabularies.UI.v1.DataField">
     <PropertyValue Property="Label" String="Gross Amount (Tax Amount)"/>
     <PropertyValue Property="Value" Path="GrossAmount"/>
    </Record>
    <Record Type="com.sap.vocabularies.UI.v1.DataField">
     <PropertyValue Property="Label" String="Number Of Items (Unit)"/>
     <PropertyValue Property="Value" Path="Quantity"/>
    </Record>
   </Collection>
  </PropertyValue>
 </Record>
</Annotation>
<Annotation Term="com.sap.vocabularies.UI.v1.FieldGroup" Qualifier="Note1">
 <Record Type="com.sap.vocabularies.UI.v1.FieldGroupType">
  <PropertyValue Property="Data">
   <Collection>
    <Record Type="com.sap.vocabularies.UI.v1.DataField">
      <PropertyValue Property="Label" String="Ordered By"/>
      <PropertyValue Property="Value" Path="Name"/>
      <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium" Term="com.sap.vocabularies.UI.v1.Importance"/>
    </Record>
    <Record Type="com.sap.vocabularies.UI.v1.DataField">
     <PropertyValue Property="Label" String="Ordered On"/>
     <PropertyValue Property="Value" Path="DeliveryDate"/>
     <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium" Term="com.sap.vocabularies.UI.v1.Importance"/>
    </Record>
   </Collection>
  </PropertyValue>
 </Record>
</Annotation>
<Annotation Term="com.sap.vocabularies.UI.v1.Facets">
 <Collection>
  <Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">
   <Annotation Term="com.sap.vocabularies.UI.v1.IsSummary"/>
    <PropertyValue Property="Label" String="Note"/>
    <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#Note"/>
   </Record>
   <Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">
    <Annotation Term="com.sap.vocabularies.UI.v1.IsSummary"/>
     <PropertyValue Property="Label" String="Note1"/>
     <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#Note1"/>
   </Record>
  </Collection>
</Annotation>

Navigation can be different from the View All and from the last card shown in the Object Stream, and could be a comma separated value for IdentificationAnnotation as shown in the manifest example. Snippet 1.3 has the details

<Annotation Term="com.sap.vocabularies.UI.v1.Identification">
	<Collection>
		<Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation">
			<PropertyValue Property="SemanticObject" String="Action"/>
			<PropertyValue Property="Action" String="toappnavsample"/>
			<PropertyValue Property="Label" String="Purchase Order List"/>
		</Record>
	</Collection>
</Annotation>
<Annotation Term="com.sap.vocabularies.UI.v1.Identification" Qualifier="Awaiting_Approval">
	<Collection>
		<Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation">
			<PropertyValue Property="SemanticObject" String="Action"/>
			<PropertyValue Property="Action" String="toappnavsample"/>
			<PropertyValue Property="Label" String="Purchase Order List"/>
			<Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
		</Record>
		<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAction">
			<Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
			<PropertyValue Property="Label" String="Approve"/>
			<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/PurchaseOrder_Confirm"/>
		</Record>
		<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAction">
			<Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
			<PropertyValue Property="Label" String="Reject"/>
			<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/PurchaseOrder_Cancel"/>
		</Record>
	</Collection>
</Annotation>

You can try your hands on the Overview page – Stack card using the sample project here

This project makes use of the local metadata, annotation files and mock data and thus has to be run as Unit test with mock data in Web IDE.

To report this post you need to login first.

8 Comments

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

  1. Ravindra Sonar

    Hi Prasita,

     

    Nicely explained !!! Kudos…

     

    I need one information … between the cards I want to show the static Image … I am not able to realize it by any means …. could you please have a look and let me know how can I add Image in between the cards?

     

    Regards,

    Ravindra Sonar

    (0) 
  2. Ravindra Sonar

    Hey Prasita,

     

    Yes, I would like to add the static image in between the two cards….

    I have taken a screenshot .. where blue box place should be filled with an Image … and the other cards should get realigned …

    is it possible???

    (0) 
  3. Ravindra Sonar

    Hi Prasita,

     

    thanks for the heads-up … I will see what I can do for …

    By the way one more question — can we put a branding logo in the area highlighted in a screenshot?

    i was thinking to write some JS code to replace the DOM element into Image but the problem is getting worst to know when the page is fully loaded.

     

    is there any easy way out? 

    (0) 
  4. Ravindra Sonar

    Hi Prasita,

     

    somehow I figured it out …… not the best solution but working for me just now … I managed it with some skills I acquired over the years 🙂

    I have so many questions for you … is it okay to just ask what is possible and what is not here?

    Quite confused because the available information is too much and there is no practical example I can see anywhere…

    I want to use the other charts like TreeMap, Pie, Scatter, Radar, Heatmap on on my overview page ,,, but somehow I am not able to see how to manage the annotations file for these map types…

    can you tell me where can I find this information????

    your help would be really great …. thanks a lot for entertaining my questions …… 🙂

    by the way I am attaching the logos I set it so far … looks nice the branding 🙂

     

    (0) 

Leave a Reply