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.