Creating SAP Fiori Overview Page Application
Fiori 2.0 with Overview Page(OVP)
Overview pages provide quick access to vital business information at a glance, in the form of visual, actionable cards.
# Prerequisites # Creating of OVP in WEB IDE # Deploying OVP application to SAPUI5 ABAP repository
- Define Data Connection
Below steps are followed to define data connection to backend system.
- Install HANA Cloud Connector
- Configure HANA Cloud Connector
- Add mappings with Real Systems
- Connecting to Remote System from Web IDE
- Install HANA Cloud connector, SAP JVM on your local machine
Download HANA CC from https://tools.hana.ondemand.com/#cloud
- Configure HANA Cloud connector
If you get the following error, click on Advanced. This error comes because you don’t have yet any valid certificate for this localhost server
Click on Proceed to localhost (unsafe)
Enter these credentials and click on Login
- User Name: Administrator
- Password: manage
Choose Master as the installation type since this is your first time you are installing the product and this is the only SAP HANA Cloud Connector in your system. Click on Apply
The first time you log in, you need to change the password. Do it and click on Save
Provide the following initial configuration and click on Apply.
- Add Mappings with the real systems.
Go to Cloud to On-Premise-> Access Control
Create Virtual host for internal host vhcals4hci.dummy.nodomain:44300 and HTTPS protocol
Add resources (services)
Status of virtual host and resources should be green
- Connecting to Remote System from Web IDE
From the HANA Cloud cockpit click on the left side on the link Destinations
Click on New Destination
Enter the following parameters
*the URL is not really the address of the real server, but it’s just the name of a virtual server.
Add the following new additional parameters and click on Save
- Enable OVP Plugin
SAP HANA ON DEMAND trial – > Settings – > Plugins
- Create ODATA service SEGW
Service -> maintain -> gateway client
Creation of OVP in Web IDE
- SAP HANA ON DEMAND trial – > Services – > Web IDE – > Open New project from Template
- Select Overview Page Application category
- Provide Project name
- Select service catalog and choose system and service defined in WEB IDE destination
- Select annotation file from local desktop file system
- Sample Annotation File to list Purchase Order List
- Click Finish
- Project ZPURCHASE_HIST will be created and available in workspace.
- Add cards of type List to project
- Open manifest.json file to change annotation url either from descriptor view or code view
- change local uri and uri as below with the exact path of annotation file under project in workspace.
- Add #qualifier name (“#PurchaseOrders”) to the annotation path as below in manifest.json file
13. Save the project and Run Configuration ->SAP Fiori Component on Sandbox->Select required version and save
14. Run with component.js configuration created above.
15. Overview page card displayed as below.
Deploying OVP application to SAPUI5 ABAP repository
- Change to required SAPUI5 version from project settings as below and save
- Right Click Project -> Deploy -> Deploy to SAPUI5 ABAP Repository
- Select System to be deployed
- Wait for the successful feedback. Click on You have successfully deployed your app to the ABAP
- To test the application at ABAP system successfully deployed
- Goto SAP Logon and Login to ABAP system.
- TCODE SE80, Click on Repository Browser.
- Choose BSP Application and enter the uploaded application name first letters ( ZPURCHASE_HIST)
- The system will show our application, double click on it
- Create New Launchpad from Give Role, Instance and Description
- Click the New Application
- Enter Link Text. Follow all the places same name to avoid name mismatch. I recommended to follow same BSP file name in all the places. Select application type as “URL”
- Copy url from manifest.json “/sap/bc/ui5_ui5/sap/zpurchase_hist
10. Copy the highlighted URL area following with your service name and paste into your application URL in your Launchpad (Now goto step 8)
11. Click the URL Editor.
12. Paste the service URL.
13. Click the Show Advanced Parameters button
- Enter Application Alias Name (Any name you can fallow) and Additional Information as SAPUI5.Component=ZPURCHASE_HIST. Then save your Lauchpad
- Create Semantic Object by using /UI2/SEMOBJ.Enter Custom Semantic object, Semantic Object name and description and Save.
- The launchpad designer can be launched with the following URL:
- We can create new catalog or use existing one. In this case using SAP_TC_Common existing catalog to create tile
18. Click on add symbol to create a tile to Catalog
19. Create new Tile either Static or Dynamic. At the time of create give own Tile ID and Name. Then, in tiles configuration give Semantic object name and Action.
- In Target Mapping configuration(Intent) give your semantic object name and Action. (Note: Tile config and Target Mapping config Action should be same) and save.
- Create Groups with own Group ID and text. Once created, Add tile.
- Select your Tile and check the checkbox to enable
23. Now assign the roles to users to access this catalogs and groups.
24. Create or Open user roles by using In Menu tab add Fiori tile Group and Catalog by clicking the Transaction button (Small down arrow).
- Give Tile ID and Group ID Created in step 20 and 21, Give User ID in user tab and save.
26. Open Fiori Launchpad with the user id and now our tile has appeared.
- Click on Tile and redirected into our application.
28. Now the application is deployed successfully and accessible from Fiori Launchpad.
Very Good and Informative !!
Detailed End to End process explained, Thanks for Sharing.
Excellent explanation on ” Fiori 2.0 with Overview Page(OVP)”.
Thanks for the same.
I have followed your step by step blog and when I run the app I can see the List box but unfortunately its empty. Does not show any data, although it shows “Showing 3 of 230”.
Can you please advice what can be the issue.
Please make sure manifest.json has correct annotation file path and it is important to add "#"qualifier name in the annotation path.
I have KPI smart business apps and i have created the OVP. I want to navigate to the KPI smart business app from the OVP card. I have given the Semantic object of KPI in Identification annotaiton. It is not navigating. Any help.
Make sure your annotation file path are correct in manifest.json and also check if annotation file doesn't have any syntax errors.
how to check for systax errors in Annotation file?
Have you solved that problem?
I got the same error,
and I found if I remove the code in the annotation file:
<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
<PropertyValue Path="PurchaseOrderNetAmount" Property="Value"/>
the list box will not be empty.
Any idea on this error?
No I am still stuck. Could you please share your Annotation File.
This is my annotation file:
Thanks for the explanation.
Is it possible to make a navigation into a detail view of a special item, which is shown in the list card? The detail view has the same semantic object as the Full-Screen Page with all items.
At the moment the navigation works into the Full-Screen Page.
Huge kudos for the extremely detailed blog. Thank you.
One question about technical limitations. As far as I know, SAP itself only delivers overview pages as part of S/4HANA (on-prem or cloud). But if we want to create our own overview page, is there really a technical limitation to HANA or even S/4HANA for them to work? Or would this also work on a more classical setup where the business system is Suite (ERP EHP 8) and the frontend server is AS ABAP (7.51)?
Many thanks and kind regards
You can develop it and deploy on Suite also without HANA, technically what you need is SAPUI5 SDK and ODATA Service on Backend Server.
I am working on Simple OVP application by displaying Donut chart. My requirement is just get the order details with net amounts from VBAK on to the Donut chart. However i am facing the following issues.
Is there any way in OVP cards so that I can find the sum of values of a particular field of all the entries from my oData service?
Can anyone tell me which SAP UI5 libraries should i select during project setting.
Based on these blog i am adding different cards to see data but while adding the analytical card it is asking KPI annotation file i didn't find any blog for that KPI annotation file .And in my cards it is showing as analytical card but i didn't see bubble or chart or line. can please help out .