Create your first SAP Fiori Overview Page
SAP Fiori continues to excite, with the new SAP Fiori Overview Page (OVP) you can now perform your tasks better and faster by having all the information in one single page (SAP Fiori Overview Page), and this page displays various cards that are related to the domain and role of the user. In this blog we’ll teach you how to create an SAP Fiori Overview Page using a standard template, and then we’ll show you how to add a card to the OVP with a simple example.
- HCP account with SAP Web IDE
- Enable OVP Plugin in SAP Web IDE
- OData Service
- Annotation File
Perform the below steps to create your first SAP Fiori Overview Page:
1. Login to SAP Web IDE.
2. Create a new project by selecting New Project from Template
3. Select Overview Page template and click Next.
4. Enter a Project Name and click Next
5. Select your source system connection, in this example I used an existing OData service (Purchasing Contract Service) from our demo system.
6. Click Next
7. I created a simple annotation file with the fields which I want to display in a card.
8. Upload the annotation file, and click OK
9. Click Next
10. Enter Project Namespace and click Next
11. Click Finish to create a project.
12. Next, let’s add a new card to the OVP. Right click on your project and select New -> Card.
13. Select existing data source and click Next
Note: Currently the following cards are available:
- Transactional cards: List, Table, Stack
- Charts: Line, Bubble, Donut
14. Select the List Card and click Next.
15. Select an Entity Set from the dropdown, and enter a title under the Header Elements.
16. Under the Advanced options select the fields as show in the figure, in this example I am sorting the data in the Card by the Purchase Order Date.
17. Click Next.
18. Click Finish to create the card.
19. Next, let’s test this card in the SAP Web IDE. Right click on project and select Run –> New Configuration.
20. Select SAP Fiori Components on Sandbox and click New Run Configuration
21. Select the SAPUI5 version 1.32.4, and then click Save, and Run Now
22. You should now see your first OVP with a List card.
Once you are done adding all the cards that you want to display in the OVP, you can deploy the SAP Fiori Overview page to either ABAP Repository or to the SAP HANA Cloud Platform by right clicking on project and selecting Deploy.
Congratulation! you have created your first SAP Fiori Overview Page.
SAP Press Author – SAP Fiori Implementation and Development