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

[former_member103161]

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.