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

Prerequisites:

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

Open https://localhost:8443

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

2. Enable OVP Plugin

SAP HANA ON DEMAND trial – > Settings – > Plugins

3. Create ODATA service SEGW

Service -> maintain -> gateway client

Creation of OVP in Web IDE

1. SAP HANA ON DEMAND trial – > Services – > Web IDE – > Open New project from Template

2. Select Overview Page Application category

3. Provide Project name

4. Select service catalog and choose system and service defined in WEB IDE destination

5. Select annotation file from local desktop file system

6. Sample Annotation File to list Purchase Order List

7. Click Finish

8. Project ZPURCHASE_HIST will be created and available in workspace.

9. Add cards of type List to project

10. Open manifest.json file to change annotation url either from descriptor view or code view

11. change local uri and uri as below with the exact path of annotation file under project in workspace.

Code Editor:

Descriptor Editor:

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

1. Change to required SAPUI5 version from project settings as below and save

2. Right Click Project -> Deploy -> Deploy to SAPUI5 ABAP Repository

3. Select System to be deployed

4. Wait for the successful feedback. Click on You have successfully deployed your app to the ABAP
5. 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

6. Create New Launchpad from Give Role, Instance and Description

7. Click the New Application

8. 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”

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

14. Enter Application Alias Name (Any name you can fallow) and Additional Information as SAPUI5.Component=ZPURCHASE_HIST. Then save your Lauchpad

15. Create Semantic Object by using /UI2/SEMOBJ.Enter Custom Semantic object, Semantic Object name and description and Save.

16. The launchpad designer can be launched with the following URL:

https://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

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

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

21. Create Groups with own Group ID and text. Once created, Add tile.

22. 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).

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

27. Click on Tile and redirected into our application.

28. Now the application is deployed successfully and accessible from Fiori Launchpad.