How to create SAP Fiori Overview Page using SAP Fiori Overview Page plugin for SAP Web IDE
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.
Prerequisites
- 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 
File 
New 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
Thanks Prasita Prabhakaran at first.
For a leaner like me, the OVP template has been included in recent versions of Web IDE. So the enablement of Overview Page Application Plugin might not be necessary.
Using following path to adopt the OPA template.
File ->new->project form template ->template selection: category = SAP Fiori Elements ->Overview Page Application.
Thank you for your feedback, I have edited the content accordingly
Thank you for your prompt feedback and support, as our team are trying to create an OVP application in project.
Hi,
Nice article.It will be helpful for newbies if annotation file is provided.Also the Post running application screen shot will add more attraction to the post.
I have created sample application from the light of the blogs here.Hope it helps someone.Fiori OVP
Hi Prasita,
I created custom card on OVP page. After than set google map into card with fragment. But I couldn't resize cards. How can I resize cards?
Best Regards,
Kaan.
Hello Kaan,
The custom cards added cannot be resized as of now
Hi Prasita,
While creating analytical cards I am getting the KPI annotation path as mandatory field what to be filled out ?? And it is not prefilled as identification Annotation path and there is empty drop down to select.
Hi Ranjeeta,
This should be filled if you already have KPIAnnotation as part of your annotation file.
Thanks Prasita for your response and time.
I already added KPI in annotation and I couldn’t get it as prefilled while creating.
So I achieved it through creating custom card.
https://blogs.sap.com/2017/05/21/create-your-own-custom-card-in-a-sap-fiori-overview-page/
Hi Ranjeetha,
We are looking into the dropdown issue.
In the meanwhile can directly add the card in the manifest using the template below and still make use of the OVP analytical card for this.
"Card06": {
"model": "sampleModel",
"template": "sap.ovp.cards.charts.analytical",
"settings": {
"title": "{{sampleTitle}}",
"subTitle": "{{sampleSubTitle}}",
"entitySet": "sampleEntitySet",
"kpiAnnotationPath":"com.sap.vocabularies.UI.v1.KPI#AllActualCosts"
}
}
It's not auto filled. Is there any settings required to identify KPI? I have added in annotation file in the required entitype but still showing blank. Can you help me steps which you have followed to get KPI values while taking analytical card?
We are looking into the issue, and shall keep you posted.
Dear Prasita Prabhakaran：
Have you found the anwser of the dropdown issue? When i create an OVP project with local
WebIDE, i also faced the empty path, now i have to add the path in the mainfest.json manually...