SAP Fiori Elements – Overview Page Part 1(Introduction)

[AnkurBajpai]

Hi All,

In this blog series we are going to know more about SAP Fiori Elements- Overview Page (OVP). We will develop a basic Overview Page app with CDS view using UI annotations.

Let’s start with the introduction of Overview Page.

Introduction:

• Overview Page works as a dashboard.


• Overview Pages provide quick access to vital business information at a glance, in the form of visual, actionable cards.


• The user-friendly experience makes viewing, filtering, and acting upon data quick and simple. While simultaneously presenting the big picture at a glance, business users can focus on the most important tasks enabling faster decision making as well as immediate action.


• Overview Page provides a functionality to visualize data in an attractive and efficient way by adding different types of cards. The displayed data is fully interactive, with clickable areas for easy navigation to relevant applications.

Main Components of the Overview Page Application:

The overview page application contains the following main components:

 

• Application header: Provides a description of the area for which this application provides an overview (for example, sales or procurement). From the header area, users can change user account settings and manage cards (show/hide).

 

• Smart filter: Provides application-level filters for changing the levels of data displayed in the cards. For example, you could use the filter to display only specific sales document detail.

 

• Cards: A card is a smart component that uses UI annotation to render its content. Each card is bound to a single entity set in a data source. A card may display a donut or bar chart, or a table. Stack cards contain a set of quick view cards which can be viewed in an object stream. Cards are displayed on the overview page in up to five responsive columns and can be rearranged by dragging and dropping.

 

• Let’s discuss on different types of cards:

 

• List Card- List cards display lists of records according to the configuration in the com.sap.vocabularies.UI.v1.LineItem term. List cards display up to six fields of data in each list item.

 

• Link List Card- Link list cards display a list of links with an image or icon and a (optional) subtitle for each of the links.

 

• Table Card- Table cards display a list of records according to the configuration in the com.sap.vocabularies.UI.v1.LineItem term. Table cards displays data in a 3-column table layout.

 

• Stack Card- Stack cards aggregate a set of cards of the same type, which are based on a common topic or action. When clicked, stack cards can display up to 20 cards in an object stream.

 

• Analytic Card- Analytical chart cards show data in a variety of chart formats. They can be line, bubble, donut, column, stacked column, vertical column, combination, or scatter chart cards. The value of the template property points to the generic card component sap.ovp.cards.charts.analytical.

 

Next Step- In the next blog post we are going to create a CDS view for the Overview Page.

Development of CDS view

 

For more information on Overview Page- Overview Page

 

Stay home stay safe☺️

 

 

Thanks,

Ankur Bajpai