Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member186358
Active Contributor

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.

Prerequisites:

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

Happy Learning!

-Anil Bavaraju

SAP Press Author - SAP Fiori Implementation and Development

71 Comments
Labels in this area