SAP Fiori Elements Overview Page (OVP) : what and hows
In this blog series, I’ll try to discuss Overview page in detail. As overview page works with OData based on metadata and metadata annotations, In this blog series apart from OVP configurations, we will discuss different annotation supported by OVP in details.
What are we building
We will create an overview page using SAP Web IDE. We will use local (Mocked) OData service instead of an actual backend OData service so that I can share the metadata with the audience publicly. Unlike other Fiori elements like Analytical List Report (ALP), List Report (LR), Object Page (OP) or Worklist, Overview page (OVP) application can support more than one OData models. Hence in this demo application also we will have more than one mocked OData services.
- You should have a count in SCP to access Web IDE
- Clone the GIT repository to get all the mocked OData services.
OVP Application structure
An OVP application has the following components:
- Object header – manages smart filter bar variant, provides standard and global action buttons.
- Filter bar – provide the global filters.
- Content – content area have the cards of different types supported by OVP.
A card can further have:
- header – contains card title, subtitle, view switches, counter information and KPI title
- Content – the actual content of the card.
- Footer – contains permissible actions for the card. Only supported for QuickView card in stacked cards.
Types of cards supported
OVP by default supports following types of charts:
- List Card – shows data in form of a list. Both header and line item level navigation possible.
- Table Card – shows data in form of a table. Both header and line item level navigation possible.
- Stack Card – shows the number of entries on the high level, at the second level show each entry as a quick view card.
- Quick-view Card – shows a high-level view of the entity.
- Analytical Cards – shows data in form of analytical charts.
- Link List Card – shows links with picture or icons in form of a list.
apart from the above list OVP also allows application developers to define and use their own custom developed cards.
I’ll discuss all standard and custom cards in details in forthcoming blogs of this blog series.
Please refer to the below links to proceed to further blogs in the sequence where OVP concepts are discussed topic wise.
creating bare bone overview page ovp application
Configuring Smart filter bar of an Overview page (OVP)
Overview Page (OVP) list and table card
Overview Page (OVP) Card headers
Overview Page (OVP) Card navigation and authorization
Overview Page (OVP) Linklist cards
Overview Page (OVP) Stack card
Overview page (OVP) developer extension
Overview page (OVP) custom cards
Hosting your Fiori Application on SAP Cloud Platform
SAP Fiori elements Overview Page (OVP) : Performance optimisation
I’ll keep updating and adding new features and developments as and when they come in future. Happy reading !! 🙂
Feedbacks, questions and comments are most welcome!!
Good Stuff, Thanks for sharing!
I'm happy that you liked it 🙂
The GIT repository is not reachable for non-SAP people.....
Hi Henry Stuifzand ,
Thanks a lot for pointing this out. I have fixed it now. Kindly check and confirm.
Thanks and Regards
It works now.
Thanks. I will continue your blog series.
Good to know that, thanks for acknowledgement
This product is so cool, yet highly functional, responsive, scalable and flexible for various use cases. Brilliant work Ashish Anand , Prasita Prabhakaran and team. 🙂
Thanks for the kind words Jai 🙂
I like this post very much! I have also noticed that Analytical Cards part is not included. Any plan to update some introduction about analytical cards? Thanks!
Thanks a lot for your compliment. Adding analytical card blogs to this blog series is long pending activity from my side. I'll try to add them as soon I get some time 🙂
Thanks and Regards
Thank you for your prompt reply. Really looking forward to the coming blogs 🙂
Thanks for the blog series Ashish!
I was trying to integrate a cds view with Analytical.query=true with some formula assigned in OVP apps but it is not working. Have you tried the same?