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

[AshishAnand]

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