Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
The SAP Fiori Overview Page plugin for SAP Web IDE enables developers to create their own overview page applications. Overview pages provide users with an interactive overview of a specific area, enabling them to interact with business data and perform key actions.



  • As a prerequisite you need to have your installation of SAP Web IDE up and running.

  • You have all of the OData services and annotations that you need to create your overview pages. For more information, see the chapter on Preparing OData Services in the “Developing Apps with SAP Fiori Elements” documentation.

  • You have defined the backend that you are using as a destination in HCP, so that the OData services are available in WEB-IDE. For more information about how to configure destinations and the cloud connector, seeDestinations and SAP HANA Cloud Connector.

Step-by-Step Procedure

Create a New Overview Page:

1. Click Start of the navigation path File Next navigation step New Next navigation step Project from Template

2. Select the Overview Page template.

3. Enter a name for the project.


4. Select the data source that your overview page will use. After you select the data source, select a service from the list of displayed services.

5. Add annotation files. If you add more than one annotation file, you can determine the order in which the files are loaded.

6. Fill in the required overview page details, paying attention to the following:

Datasource Alias: The default value of the Datasource Alias is the name of the data service selected in the Data Connection step.

Entity Type: Users will be able to filter the content on the overview page according to the fields defined in the selected EntityType.

7. Confirm the project information and choose Finish.

Adding Cards on Overview Page:

1. In the Development tab, select the overview page project that you created, and choose  File--> New--> Card


2. Select an existing data source, or create a new data source for the card.


3. Select one of the following card types:

Option Description
List card Displays an array of items in a vertical list. A number of list types are available.
Table card Displays items in a three-column table.
Stack card A collection of single-object cards. When opened, users can take action on the individual items in the stack.
Analytic card Displays information as a chart. The type of chart is specified in the annotation file.

For more information about the different card types, see Cards Used in Overview Pages.

Page section of the SAPUI5 Demo Kit documentation.

4. Different card types require different configuration details. Fill in the required details for the selected card type.

5. Choose Finish to complete the wizard.

Congratulations! Your Overview Page Application is now ready.

The app can be tested using the Run-->Run as-->SAP Fiori Component on Sandbox

You may also wish to run it with mock data using Run-->Run Configurations-->Add Component.js and choose Run with Mock Data in the General section on the right