Fiori Overview Page (OVP) Application - Creating Stack Card with Quick view cards!

Tweet

           In previous post we  created our first SAP Fiori Overview Page Application using northwind OData service and added a List card to our application. In this post we will see how to create a Stack card and configure it with few Quick view cards.
           Stack cards aggregate a set of cards of the same type which have a common topic or action.When clicked upto 20 stacked cards can be displayed in the object stream.We will use Employee entityset of Northwind OData service.

Pre-requisites

1. Fiori Overview Application created already.I will be using the application created in 'How to Create your first SAP Fiori Overview Page Application ? - Example using List Card' for this tutorial.

Steps

1. First step is adding a Stack card to the fiori overview application.For this Right click on application->new->Card.
   
   
   
2. Select a card.Choose Stack card and press next button.
   
3. In Card customisation section select the entityset we are going to use.I chose Employees.Give a title.title is mandatory this will be shown in the card.In the annotation Section keep the annotation Path field empty.We will add it later in manifest file.Press next and press finish.A new component called Stack card will be added to the application.
   
4. Open manifest.json and edit the code inside cards section like below.



 "sap.ovp": {
  "globalFilterModel": "NorthwindModel",
  "globalFilterEntityType": "",
  "cards": {
   "techippoOverviewApp_card00": {
    "model": "NorthwindModel",
    "template": "sap.ovp.cards.list",
    "settings": {
     "title": "{{techippoOverviewApp_card00_title}}",
     "subTitle": "{{techippoOverviewApp_card00_subTitle}}",
     "entitySet": "Employees",
     "listType": "condensed",
     "listFlavor": "standard",
     "sortBy": "TitleOfCourtesy",
     "sortOrder": "descending",
     "addODataSelect": "false",
     "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Top5Employees"
    }
   },
   "techippoOverviewApp_card01": {
    "model": "NorthwindModel",
    "template": "sap.ovp.cards.stack",
    "settings": {
     "title": "{{techippoOverviewApp_card01_title}}",
     "entitySet": "Employees",
     "addODataSelect": "false",
     "objectStreamCardsSettings": {
      "annotationPath": "com.sap.vocabularies.UI.v1.Facets"
                }
    }
   }
  }
 }



5. Open our localAnnotations_1.xml file and paste below code inside annotations tag.We are using these annotations for configuring the Quick view cards. com.sap.vocabularies.UI.v1.HeaderInfo is used for quick view card header section and com.sap.vocabularies.UI.v1.Facets and FieldGroup for Quick view card details section.Add below the LineItem annotation. 



<Annotation Term="UI.Facets">
 <Collection>
  <Record Type="UI.ReferenceFacet">
   <Annotation Term="UI.IsSummary"/>
   <PropertyValue Property="Label" String="Details"/>
   <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Details"/>
  </Record>
 </Collection>
</Annotation>
<Annotation Qualifier="Details" Term="UI.FieldGroup">
 <Record Type="UI.FieldGroupType">
  <PropertyValue Property="Label" String="Details"/>
  <PropertyValue Property="Data">
   <Collection>
    <Record Type="UI.DataField">
     <PropertyValue Property="Label" String="Designation"/>
     <PropertyValue Property="Value" Path="Title"/>
    </Record>
    <Record Type="UI.DataField">
     <PropertyValue Property="Label" String="Address"/>
     <PropertyValue Property="Value" Path="Address"/>
    </Record>
    <Record Type="UI.DataField">
     <PropertyValue Property="Label" String="Phone Number"/>
     <PropertyValue Property="Value" Path="HomePhone"/>
    </Record>
   </Collection>
  </PropertyValue>
 </Record>
</Annotation>
<Annotation Term="UI.HeaderInfo">
 <Record>
  <PropertyValue Property="TypeName" String="Employee"/>
  <PropertyValue Property="TypeNamePlural" String="Employees"/>
  <PropertyValue Property="Title">
   <Record Type="UI.DataField">
    <PropertyValue Property="Value" Path="FirstName"></PropertyValue>
   </Record>
  </PropertyValue>
  <PropertyValue Property="Description">
   <Record Type="U1.DataField">
    <PropertyValue Path="LastName" Property="Value"/>
   </Record>
  </PropertyValue>
  <PropertyValue Type="Edm.Binary" Property="ImageUrl" Path="Photo"/>
 </Record>
</Annotation>
 



6. Now our Fiori Overview Application looks pretty good.See the screenshots.
   
7. When Stack card is clicked Quick view cards are shown.
   

In my next tutorial I will be adding an Analytical card to the application

If you enjoyed this post, Please Share!!