Skip to Content

Fiori Overview Page (OVP) Creating List, Table and Stack Card

Hello Everyone.

After going through  Anil Bavaraju‘s  blog on how to Create your first SAP Fiori Overview Page, I created my first blog on how to create all three types of cards i.e. List Card, Table Card and Stack Card (Quick Display Card) in a single go.


Creating List Card


1. Initially, go to SAP WEB IDE optional plugin tab and select Overview Page Plugin Option (ovp plugin) and hit save. (Refresh the browser to make changes go reflect)

                              /wp-content/uploads/2016/02/1_884739.png

2. Create Destination for Northwind oData service (if already in place) by going to Destination tab and key in following properties:-

                              /wp-content/uploads/2016/02/2png_884740.png

3.     Go to SAP WEB IDE and select New project from Template option, and choose Over View Page Application

                         /wp-content/uploads/2016/02/3_884749.png

4.      Name the project and click next. (Use Z in case you need to deploy Over view Page onto your server).

                    /wp-content/uploads/2016/02/4_884772.png

5. In Data Connection tab, select Service URL sub-tab and provide URL of your oData service and hit next.

                         /wp-content/uploads/2016/02/5_884773.png

6. Now we have to provide annotation source file. The content of the Annotation.xml file for List Card type should be like this and it must be under annotations folder which in under webapp folder.

<edmx:Edmx Version=”1.0″ xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx

    xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData“>

    <edmx:DataServices m:DataServiceVersion=”2.0″>

        <Schema Namespace=”NorthwindModel” sap:schema-version=”1″ xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

            <Annotations Target=”NorthwindModel.Employee” xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                <Annotation Qualifier=”Employees” Term=”com.sap.vocabularies.UI.v1.LineItem”>

                    <Collection>

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <Annotation EnumMember=”com.sap.vocabularies.UI.v1.ImportanceType/High” Term=”com.sap.vocabularies.UI.v1.Importance”/>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                    <Path>TitleOfCourtesy</Path>

                                    <String> </String>

                                    <Path>FirstName</Path>

                                    <String> </String>

                                    <Path>LastName</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <Annotation EnumMember=”com.sap.vocabularies.UI.v1.ImportanceType/High” Term=”com.sap.vocabularies.UI.v1.Importance”/>

                            <PropertyValue Path=”Title” Property=”Value”/>

                        </Record>                     

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <Annotation EnumMember=”com.sap.vocabularies.UI.v1.ImportanceType/High” Term=”com.sap.vocabularies.UI.v1.Importance”/>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                    <Path>City</Path>

                                    <String>, </String>

                                    <Path>Region</Path>

                                    <String>, </String>

                                    <Path>Country</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                    </Collection>

                </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

Target is NorthwindModel.Employee where Employee is the name of the entity type against which we are displaying the contents on the List Card.

        By default, the fields in the list card are mapped to the  com.sap.vocabularies.UI.v1.LineItem annotation.


  7. Click Next and Finish


                              /wp-content/uploads/2016/02/7_884798.png

                              /wp-content/uploads/2016/02/8_884799.png

8. Now go to the project and select New > Card

                                                  /wp-content/uploads/2016/02/9_884800.png

9. Select NorthWindModel and click Next

                               /wp-content/uploads/2016/02/10_884816.png

10. Select List Card and key in following values:-

                                 /wp-content/uploads/2016/02/11_884817.png

                                     /wp-content/uploads/2016/02/12_884818.png

11. Make changes in manifest.json file to display the data in the Card. Add Qualifier name used in Annotation file at end of annotation path.

                         /wp-content/uploads/2016/02/123_884825.png

11. Run the project in SAP Fiori Component on Sandbox. It would look like this

/wp-content/uploads/2016/02/13_884826.png

Similarly, do it for Table Card.

For Table card, select Table card from the Card selection Menu and change the annotation file accordingly. Annotation term for Table Card  can be seen from https://sapui5.netweaver.ondemand.com/#docs/guide/167bf7ccbb084afab7d846e1fa30b49c.html

I have created Table Card for Customers Entity Set. Annotation file for Table Card is as follows:-

<edmx:Edmx Version=”1.0″ xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx

    xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData“>

    <edmx:DataServices m:DataServiceVersion=”2.0″>

        <Schema Namespace=”NorthwindModel” sap:schema-version=”1″ xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

            <Annotations Target=”NorthwindModel.Customer” xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                <Annotation Qualifier=”Customers” Term=”com.sap.vocabularies.UI.v1.LineItem”>

                    <Collection>

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <Annotation EnumMember=”com.sap.vocabularies.UI.v1.ImportanceType/High” Term=”com.sap.vocabularies.UI.v1.Importance”/>

                            <PropertyValue Property = “Label” String = “Name”></PropertyValue>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                    <Path>ContactName</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <Annotation EnumMember=”com.sap.vocabularies.UI.v1.ImportanceType/High” Term=”com.sap.vocabularies.UI.v1.Importance”/>

                            <PropertyValue Property = “Label” String = “Contact”></PropertyValue>

                            <PropertyValue Path = “Phone” Property=”Value”/>

                        </Record>                     

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <Annotation EnumMember=”com.sap.vocabularies.UI.v1.ImportanceType/High” Term=”com.sap.vocabularies.UI.v1.Importance”/>

                           <PropertyValue Property = “Label” String = “Address”></PropertyValue>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                    <Path>City</Path>

                                    <String>, </String>

                                    <Path>Country</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                    </Collection>

                </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

Manifest.json

/wp-content/uploads/2016/02/14_884827.png

Table card is displayed as follows:-

/wp-content/uploads/2016/02/15_884831.png

For Stack Card ( Quick Display card), I again used Customer entity set and made necessary changes to Annotation file which is as follows:-

<edmx:Edmx Version=”1.0″ xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx

    xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData“>

    <edmx:DataServices m:DataServiceVersion=”2.0″>

        <Schema Namespace=”NorthwindModel” sap:schema-version=”1″ xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

            <Annotations Target=”NorthwindModel.Customer” xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                <Annotation Term=”com.sap.vocabularies.UI.v1.HeaderInfoType”>

                <PropertyValue Property=”TypeName” String=”Customer”/>

    <PropertyValue Property=”TypeNamePlural” String=”Customers”/>

    <PropertyValue Property=”Title”>

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <PropertyValue Property=”Value”>

                                    <Path>ContactName</Path>

                            </PropertyValue>

                        </Record>

                        </PropertyValue>

                        </Annotation>

                <Annotation Term=”com.sap.vocabularies.UI.v1.Facets”>

                <Collection>

    <Record Type=”UI.ReferenceFacet”>

        <Annotation String=”true” Term=”com.sap.vocabularies.UI.v1.IsSummary”/>

    <PropertyValue AnnotationPath=”@com.sap.vocabularies.UI.v1.FieldGroup#NorthwindCustomers” Property=”Target”/>

    </Record>

    </Collection>

  </Annotation>

    <Annotation Qualifier=”NorthwindCustomers” Term=”com.sap.vocabularies.UI.v1.FieldGroup”>

  <Record>

       <PropertyValue Property=”Data”>

                    <Collection>

                    <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                        <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                <String> Contact Name </String>

                                    <Path>ContactName</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>      

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                        <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                <String> Contact No. </String>

                                    <Path>Phone</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>                     

                        <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                            <PropertyValue Property=”Value”>

                                <Apply Function=”odata.concat”>

                                <String>Address</String>

                                    <Path>City</Path>

                                    <String>, </String>

                                    <Path>Country</Path>

                                </Apply>

                            </PropertyValue>

                        </Record>

                    </Collection>

                    </PropertyValue>

                    </Record>

                  </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

Manifest.json file remains unchanged for Stack Type Card.

Stack Card is displayed as follows:-

/wp-content/uploads/2016/02/16_884833.png

/wp-content/uploads/2016/02/17_884843.png

Cheers,

Parth

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