Skip to Content

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 enabled the Overview Page plugin in SAP Web IDE. Click on the Settings in SAP Web IDE and select Plugins (Fig 1.1). Enable the Overview Page Application Plugin as shown in Fig 1.2 and Save. This would result in a refresh of the SAP Web IDE

Capture1.JPG

Fig 1.1

Capture2.JPG

Fig 1.2

  • 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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply