Former Member

February 10, 2016 20 minute read

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)

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

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

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

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

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

<Path>TitleOfCourtesy</Path>

<Path>FirstName</Path>

<Path>LastName</Path>

</Apply>

</PropertyValue>

</Record>

</Record>

<Path>Region</Path>

<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

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

9. Select NorthWindModel and click Next

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

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.

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

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

<Path>ContactName</Path>

</Apply>

</PropertyValue>

</Record>

</Record>

<Path>Country</Path>

</Apply>

</PropertyValue>

</Record>

</Collection>

</Annotation>

</Annotations>

</Schema>

</edmx:DataServices>

</edmx:Edmx>

Manifest.json

Table card is displayed as follows:-

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

<Path>ContactName</Path>

</PropertyValue>

</Record>

</PropertyValue>

</Annotation>

</Record>

</Collection>

</Annotation>

<String> Contact Name </String>

<Path>ContactName</Path>

</Apply>

</PropertyValue>

</Record>

<String> Contact No. </String>

<Path>Phone</Path>

</Apply>

</PropertyValue>

</Record>

<String>Address</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:-

Cheers,

Parth

39 Comments

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

Smith Singh

February 10, 2016 at 11:29 am

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

Great work!!!!

Cheers,

Smith

Former Member

Blog Post Author

February 10, 2016 at 11:56 am

Hi Smith

Thanks buddy 🙂

Parth

Former Member

February 10, 2016 at 11:33 am

Nice write up buddy!!

Former Member

Blog Post Author

February 10, 2016 at 11:57 am

Hi Krishna

Thanks a lot 🙂

Regards

Parth

Michael Appleby

February 10, 2016 at 11:46 am

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

Former Member

Blog Post Author

February 10, 2016 at 11:57 am

Hi MG

Thank you 🙂

Cheers

Parth

VARUN TYAGI

February 10, 2016 at 11:58 am

Nice Blog Parth, its really help us.

Former Member

Blog Post Author

February 10, 2016 at 5:26 pm

Hi Varun

Thank you 🙂

Regards

Parth

Sahiba Gandhi

February 11, 2016 at 8:15 am

Good job with this Parth .. way to go 🙂

Former Member

Blog Post Author

February 11, 2016 at 3:00 pm

Thanks Sahiba Maám 🙂

Former Member

February 11, 2016 at 10:45 am

Good info.:)

Former Member

Blog Post Author

February 11, 2016 at 3:01 pm

Thanks Siva 🙂

Former Member

February 11, 2016 at 10:45 am

Great Work Parth....!!

Former Member

Blog Post Author

February 11, 2016 at 3:01 pm

Thanks buddy!!

Regards

Parth

Christoph Laux

February 11, 2016 at 3:30 pm

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.

Former Member

Blog Post Author

February 12, 2016 at 9:41 am

Thanks for the update Christoph.

Parth

Karan Bahl

February 12, 2016 at 8:39 am

Well explained Parth!

Regards,

Karan

Former Member

Blog Post Author

February 12, 2016 at 9:41 am

Thanks Karan.

Joseph Chinnabathini

February 27, 2016 at 9:28 am

Great stuff PB.

Thanks,

Former Member

Blog Post Author

February 29, 2016 at 4:58 am

Thanks Joseph 🙂

MEGHAL SHAH

March 7, 2016 at 9:25 am

Hi parth,

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

Thanks in advance,

Regards,

Meghal Shah

Former Member

Blog Post Author

March 7, 2016 at 3:29 pm

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

MEGHAL SHAH

March 7, 2016 at 4:39 pm

Hi Parth,

Many thanks for prompt reply.

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

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

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

Regards,

Meghal Shah

Former Member

Blog Post Author

March 8, 2016 at 6:44 am

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.

Hope this helps!! 🙂

Regards

Parth

MEGHAL SHAH

March 8, 2016 at 7:21 am

Hi Parth,

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

Regards,

Meghal Shah

Former Member

Blog Post Author

March 8, 2016 at 3:19 pm

Great 🙂

Former Member

March 8, 2016 at 7:10 am

Great work Parth 🙂 Keep it up.

Anupriya

Former Member

Blog Post Author

March 8, 2016 at 3:19 pm

Tysm Anupriya 🙂

Parul Garg

May 14, 2016 at 1:01 pm

Thanks Parth for this easy to understand and explanatory blog.

Good job. Keep it up!! 🙂

Regards,

Parul

shivam shukla

June 15, 2016 at 9:21 am

Good Work Parth !

Former Member

Blog Post Author

June 17, 2016 at 5:25 pm

Thank you shivam 🙂

Former Member

August 5, 2016 at 11:45 am

Hello Parth! Great blog!

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

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.

Priteshkumar Patel

August 26, 2016 at 5:54 pm

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?

Michael Appleby

August 28, 2016 at 1:57 am

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

Deborshi De Sarkar

September 14, 2016 at 4:54 am

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

Thanks

Aditi Bhargava

November 11, 2016 at 7:36 am

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

Former Member

March 13, 2017 at 9:07 am

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

rajeesh o

July 13, 2017 at 1:54 pm

Nice information.Thanks for sharing

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

Tanveer Shaikh

December 29, 2017 at 6:50 pm

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

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

Assigned Tags