Skip to Content
Technical Articles
Author's profile photo Ashish Anand

SAP Fiori Elements Overview Page (OVP) : what and hows

Introduction

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.

Prerequisite

  1. You should have a count in SCP to access Web IDE
  2. Clone the GIT repository to get all the mocked OData services.

OVP Application structure

An OVP application has the following components:

  1. Object header – manages smart filter bar variant, provides standard and global action buttons.
  2. Filter bar – provide the global filters.
  3. Content – content area have the cards of different types supported by OVP.

A card can further have:

  1. header – contains card title, subtitle, view switches, counter information and KPI title
  2. Content – the actual content of the card.
  3. 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:

  1. List Card – shows data in form of a list. Both header and line item level navigation possible.
  2. Table Card – shows data in form of a table. Both header and line item level navigation possible.
  3. Stack Card – shows the number of entries on the high level, at the second level show each entry as a quick view card.
  4. Quick-view Card – shows a high-level view of the entity.
  5. Analytical Cards – shows data in form of analytical charts.
  6. 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.

Next Blogs

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

 

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Setu Saxena
      Setu Saxena

      Good Stuff, Thanks for sharing!

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      I'm happy that you liked it 🙂

      Author's profile photo Henry Stuifzand
      Henry Stuifzand

      Hi,

      The GIT repository is not reachable for non-SAP people.....

       

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Henry Stuifzand ,

      Thanks a lot for pointing this out. I have fixed it now. Kindly check and confirm.

      Thanks and Regards

      Ashish

      Author's profile photo Henry Stuifzand
      Henry Stuifzand

      Hi,

      It works now.

      Thanks. I will continue your blog series.

       

       

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Good to know that, thanks for acknowledgement

       

      Author's profile photo Jaikishore Choudhury
      Jaikishore Choudhury

      This product is so cool, yet highly functional, responsive, scalable and flexible for various use cases. Brilliant work Ashish Anand , Prasita Prabhakaran and team. 🙂

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Thanks for the kind words Jai 🙂

      Author's profile photo Andrew Zhu
      Andrew Zhu

      Hi,

      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!

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Andrew,

      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

      Ashish

       

       

      Author's profile photo Andrew Zhu
      Andrew Zhu

      Hi Ashish,

      Thank you for your prompt reply. Really looking forward to the coming blogs 🙂

      Author's profile photo Zulfiqar Tapia
      Zulfiqar Tapia

      Thanks for the blog series Ashish!

      Author's profile photo Vaibhav Agarwal
      Vaibhav Agarwal

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

       

      Regards,

      Vaibhav