Skip to Content
Author's profile photo Prasita Prabhakaran

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 Start of the navigation path File Next navigation step New Next navigation step Project from Template

Capture3.JPG

2. Select the Overview Page template.

Capture4.JPG

3. Enter a name for the project.

Capture5.JPG

 

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.

Capture6.JPG

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

Capture7.JPG

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.

Capture8.JPG

7. Confirm the project information and choose Finish.

Capture9.JPG

Adding Cards on Overview Page:

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

 

Captur10.JPGCapture11.JPG

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.

Capture12.JPG

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

Capture13.JPG

5. Choose Finish to complete the wizard.

Capture15.JPG

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

Capture14.JPG

Assigned Tags

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

       

      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.

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Thank you for your feedback, I have edited the content accordingly

      Author's profile photo Bing Liu
      Bing Liu

      Thank you for your prompt feedback and support, as our team are trying to create an OVP application in project.

      Author's profile photo rajeesh o
      rajeesh o

      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

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      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.

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Kaan,

      The custom cards added cannot be resized as of now

      Author's profile photo Ranjeeta Hangal
      Ranjeeta Hangal

      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.

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hi Ranjeeta,

      This should be filled if you already have KPIAnnotation as part of your annotation file.

      Author's profile photo Ranjeeta Hangal
      Ranjeeta Hangal

      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/

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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"

         }

      }

      Author's profile photo sudhakara reddy
      sudhakara reddy

      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?

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      We are looking into the issue, and shall keep you posted.

      Author's profile photo Qi Chen
      Qi Chen

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