July 16, 2018 4 minute read

SAP Fiori Overview Page – Stack Cards, Quick View cards and actions

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.

17 Comments

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

Ravindra Sonar

September 25, 2018 at 10:28 am

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

Prasita Prabhakaran

Blog Post Author

September 25, 2018 at 11:31 am

Hello Ravindra,

Thank you for the comments!

Would you need an image in between the quick view cards?

Ravindra Sonar

September 25, 2018 at 12:04 pm

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???

Prasita Prabhakaran

Blog Post Author

September 26, 2018 at 9:00 am

We don't have a standard card template to suit this requirement. You can make use of custom card to achieve a static image.

Ravindra Sonar

September 26, 2018 at 10:03 am

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?

Prasita Prabhakaran

Blog Post Author

September 27, 2018 at 12:28 pm

There is no standard way to achieve this as part of OVP. But the App title could have your company logo as discussed in this blog

Ravindra Sonar

September 27, 2018 at 5:07 pm

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

Prasita Prabhakaran

Blog Post Author

September 28, 2018 at 3:40 am

You can find the list of supported chart types within ovp cards here

P1942535458 Anoop Pavuluri

April 3, 2019 at 4:59 pm

Hi Prasita, I have some issues on the stack card that I could not overcome. These issues are usually a customer feedback that I often hear too.

Why is it that the value shown on the header(Identification annotation Label) gets repeated below again? In the case of your example the purchase Order '0000000010' for the first item appears on the header as well as below again in the quick view card. I have tried all ways known to me to remove this with local annotations but I could not. Is there a workaround?
Is there a property/annotation that can be used to set the height - or even better, set a scroll to the Quickview card in the standard implementation?
Most heard feedback - there's no display counter on the carousal/object stream. There is also no option to fast forward the scroll to the end or to somewhere in between.
Lastly, I was able to customise the other types of cards but I could not find the controls to customise the Non-expanded view of the stack card.

I've been trying to read the official documentation, but most of my questions remain unanswered. Any information from you regarding my questions would be very helpful.

Thanks!

Anup.

Prasita Prabhakaran

Blog Post Author

April 4, 2019 at 6:24 am

Hi Anup,

Here are the answers:

Not customisable, the tile was made dynamic to include the instance information. I shall take back this feedback for further analysis.
No this is not customisable as of now
We show only the first 20, and no option as of now no options to fast forward
What properties of the stack card do you wish to customise?

Regards,

Prasita

Akshaya Parthasarathy

May 7, 2019 at 6:02 am

Hi prasita,

thanks for the womderful blog series.I want to independently add a quickview card. its is not showing upp in the add card template. is there any other way around?

Prasita Prabhakaran

Blog Post Author

May 7, 2019 at 6:07 am

Hello Akshaya,

Thank you for the comments. Quick view card is not available as an independent card but only within the objectStream in case of Stack card.

Regards,

Prasita

Akshaya Parthasarathy

May 7, 2019 at 6:52 am

Should I go for OVP extensions then?

Prasita Prabhakaran

Blog Post Author

May 7, 2019 at 9:44 am

Yes a custom card could be considered in this case.

Akshaya Parthasarathy

May 7, 2019 at 9:57 am

Thanks Prasita

Bhoomika Jain

July 10, 2020 at 8:38 am

Hi Prasita,

Thanks for the blog.

I am able to display data in cards, but how to handle the approve and reject actions in the cards? Could you please provide any sample code.

Regards,

Bhoomika

Mehmet Ali Subasi

February 3, 2023 at 1:43 pm

Hello Prasita Prabhakaran,

Thank you for amazing content. I have one question, how can we navigate to another application when user triggers "toappnavsample" event?

Best regards.

SAP Fiori Overview Page – Stack Cards, Quick View cards and actions

Assigned Tags