Skip to Content
Author's profile photo Former Member

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

Assigned Tags

      39 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Smith Singh
      Smith Singh

      Thanks Parth for this easy and explanatory blog about Fiori OVP.

      Great work!!!!


      Cheers,

      Smith

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Smith

      Thanks buddy πŸ™‚

      Parth

      Author's profile photo Former Member
      Former Member

      Nice write up buddy!!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Krishna

      Thanks a lot πŸ™‚

      Regards

      Parth

      Author's profile photo Michael Appleby
      Michael Appleby

      Wonder how many Liked or rated the blog?  Two ratings and one like.  That makes 12 points to reward the author.

      Much better than most blogs.

      Cheers, Mike

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi MG

      Thank you πŸ™‚

      Cheers

      Parth

      Author's profile photo VARUN TYAGI
      VARUN TYAGI

      Nice Blog Parth, its really help us.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Varun

      Thank you πŸ™‚

      Regards

      Parth

      Author's profile photo Sahiba Gandhi
      Sahiba Gandhi

      Good job with this Parth .. way to go πŸ™‚

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Sahiba Maám πŸ™‚

      Author's profile photo Former Member
      Former Member

      Good info.:)

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Siva πŸ™‚

      Author's profile photo Former Member
      Former Member

      Great Work Parth....!!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks buddy!!

      Regards

      Parth

      Author's profile photo Christoph Laux
      Christoph Laux

      You may wonder, if you get tool support for creating the annotation file. Therefore, SAP WebIDE includes the Annotation Modeler.

      The official documentation is available here.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks for the update Christoph.

      Parth

      Author's profile photo Karan Bahl
      Karan Bahl

      Well explained Parth!

      Regards,

      Karan

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Karan.

      Author's profile photo Joseph Chinnabathini
      Joseph Chinnabathini

      Great stuff PB.

      Thanks,

      JC

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Joseph πŸ™‚

      Author's profile photo meghal shah
      meghal shah

      Hi parth,

      I am facing below issue while executing the project. can you please guide how to resolve this issue.

      Thanks in advance,

      Error.png.png

      Regards,

      Meghal Shah

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Meghal,

      Can you please attach the annotation and manifest.json files you are using and also tell

      the path to it (where exactly you have placed annotation.xml under your project directory).

      Thanks

      Parth

      Author's profile photo meghal shah
      meghal shah

      Hi Parth,

      Many thanks for prompt reply.

      Kindly use below link to access the project as well as requested files.

      Path.png

      Requested file :- https://drive.google.com/open?id=0Bye6UL-P7xy4dU0zajdmbGowbjQ

      Full Project : - https://drive.google.com/open?id=0Bye6UL-P7xy4MHJsNW1lSm1sTzg

      Regards,

      Meghal Shah

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Meghal

      In your project, annotation.xml file is located under local service folder. SAP WebIDE by default in manifest.json file searches annotation.xml file under annotations folder ( under webapp folder). I have attached the image (showing right path) .Kindly change the path in the manifest.json file.

      Doubt1.png

      Hope this helps!! πŸ™‚


      Regards

      Parth

      Author's profile photo meghal shah
      meghal shah

      Hi Parth,

      Many thanks man,..... issue has been resolved.

      Regards,

      Meghal Shah

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Great πŸ™‚

      Author's profile photo Former Member
      Former Member

      Great work Parth πŸ™‚ Keep it up.

      Anupriya

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Tysm Anupriya πŸ™‚

      Author's profile photo Parul Garg
      Parul Garg

      Thanks Parth for this easy to understand and explanatory blog.


      Good job. Keep it up!! πŸ™‚

      Regards,

      Parul

      Author's profile photo shivam shukla
      shivam shukla

      Good Work Parth !

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you shivam πŸ™‚

      Author's profile photo Former Member
      Former Member


      Hello Parth! Great blog!


      I'm refereing your blog and creating card, but I'm facing issue in selecting Entity set for card.cardEntitySet1.PNG

      There is no list of entity set to select.

      I used Northwind metadata and your list card annotation

      Can you please guide me in solving this issue.

      Author's profile photo Priteshkumar Patel
      Priteshkumar Patel

      HI Parth, Is there any way to format values in card like showing "Bold" values in stack, format date in "mm/dd/yyyy" if there is any date or in table card, headers should be in bold?

      Author's profile photo Michael Appleby
      Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Deborshi De Sarkar
      Deborshi De Sarkar

      Hello Parth

      I am trying to create my first OVP application.

      But in the EntitySet field i am not able to find out any values from the dropdown list.

      Can you please suggest on  this ??

      OVP_1.jpg Thanks

      Author's profile photo ADITI BHARGAVA
      ADITI BHARGAVA

      hi,
      I'm facing the same issue.
      Could u plz tell how did u resolve it?
      thanks in advance.

      Author's profile photo Former Member
      Former Member

       

      Thanks for the explanation.

       

      Is it possible to make a navigation into a detail view of a special item, which is shown in the list card? The detail view has the same Β semantic object as the Full-Screen Page with all items.

      At the moment the navigation works into the Full-Screen Page.

       

      Thanks in advance

      Author's profile photo rajeesh o
      rajeesh o

      Nice information.Thanks for sharing

      I have created an overview page application and shared my code in my blog

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Hi Parth,

      How can I change the default width of a card. I assume I would need to do extension.

      CanΒ  you please outline some steps to achieve it ? I am referring to the different card sizes as shown below.

       

      Thanks,

      Tanveer