Skip to Content
Author's profile photo Praveena Subramani

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

  1. Enable OVP Plugin

SAP HANA ON DEMAND trial – > Settings – > Plugins

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

  1. Select Overview Page Application category

  1. Provide Project name

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

  1. Select annotation file from local desktop file system

  1. Sample Annotation File to list Purchase Order List

  1. Click Finish
  1. Project ZPURCHASE_HIST will be created and available in workspace.

 

  1. Add cards of type List to project

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

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

Code Editor:

Descriptor Editor:

 

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

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

  1. Select System to be deployed

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

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

  1. Click the New Application

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

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

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

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

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

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

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

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

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

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

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

  1. Click on Tile and redirected into our application.

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

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Akshay Nayak
      Akshay Nayak

      Very Good and Informative !!

      Author's profile photo Maheshchandra VVNS
      Maheshchandra VVNS

      Detailed End to End process explained, Thanks for Sharing.
      Thanks,

      Mahesh

      Author's profile photo Former Member
      Former Member

      Excellent explanation on ” Fiori 2.0 with Overview Page(OVP)”.

      Thanks for the same.

      Author's profile photo Yogendra Ahuja
      Yogendra Ahuja

      Hi Praveena,

      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.

      Thanks

       

      Author's profile photo Praveena Subramani
      Praveena Subramani
      Blog Post Author

      Hi Yogendra

      Please make sure manifest.json has correct annotation file path and it is important to add "#"qualifier name in the annotation path.

      Author's profile photo sudarshan raju
      sudarshan raju

      Hi Praveena,

      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.

      Thanks

      Author's profile photo Former Member
      Former Member

      @yogendra

      Make sure your annotation file path are correct in manifest.json and also  check if annotation file doesn't have any syntax errors.

      Regards,

      Tarun

      Author's profile photo Former Member
      Former Member

      Hi Tarun,

      how to check for systax errors in Annotation file?

       

      Thanks

      Author's profile photo Yu-Ju Louise Huang
      Yu-Ju Louise Huang

      Hi Yogendra,

      Have you solved that problem?

      I got the same error,
      and I found if I remove the code in the annotation file:

      <Record Type="com.sap.vocabularies.UI.v1.DataField">
          <Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
          <PropertyValue Path="PurchaseOrderNetAmount" Property="Value"/>
      </Record>

      the list box will not be empty.

      Any idea on this error?
      Thanks.

       

      Author's profile photo Former Member
      Former Member

      Hi Yu-Ju,

      No I am still stuck. Could you please share your Annotation File.

       

      Thanks,

      Author's profile photo Yu-Ju Louise Huang
      Yu-Ju Louise Huang

      Hi Yogendra,

      This is my annotation file:

      <edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://ww.sap.com/Protocols/SAPData" Version="1.0">
      	<edmx:DataServices>
      		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="CB_PURCHASING_CONTRACT_SRV" sap:schema-version="1">
      			<Annotations Target="CB_PURCHASING_CONTRACT_SRV.PurchaseOrder" xmlns="http://docs.oasis-open.org/odata/ns/edm">
      				<Annotation Qualifier="PurchaseOrders" Term="com.sap.vocabularies.UI.v1.LineItem">
      					<Collection>
      						<Record Type="com.sap.vocabularies.UI.v1.DataField">
      							<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
      							<PropertyValue Path="SupplierName" Property="Value"/>
      						</Record>
      						<Record Type="com.sap.vocabularies.UI.v1.DataField">
      							<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
      							<PropertyValue Path="PurchaseOrder" Property="Value"/>
      						</Record>
      						<Record Type="com.sap.vocabularies.UI.v1.DataField">
      							<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
      							<PropertyValue Path="PurchasingDocumentOrderDate" Property="Value"/>
      						</Record>
      <!--
      						<Record Type="com.sap.vocabularies.UI.v1.DataField">
      							<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
      							<PropertyValue Path="PurchaseOrderNetAmount" Property="Value"/>
      						</Record>
      -->
      						<Record Type="com.sap.vocabularies.UI.v1.DataField">
      							<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
      							<PropertyValue Path="PurgDocumentTypeDescription" Property="Value"/>
      						</Record>
      						<Record Type="com.sap.vocabularies.UI.v1.DataField">
      							<Annotation EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/High" Term="com.sap.vocabularies.UI.v1.Importance"/>
      							<PropertyValue Path="PurchaseOrderCurrency" Property="Value"/>
      						</Record>
      					</Collection>
      				</Annotation>
      			</Annotations>
      		</Schema>
      	</edmx:DataServices>
      </edmx:Edmx>

       

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jens Schwendemann
      Jens Schwendemann

      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

      Jens

      Author's profile photo Former Member
      Former Member

      You can develop it and deploy on Suite also without HANA, technically what you need is SAPUI5 SDK and ODATA Service on Backend Server.

       

       

      Author's profile photo mukesh chandu
      mukesh chandu

      Hi,

      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.

      1. Unable to display the total net amount of all order types on the header section. Currently it displaying only the first record amount.
      2. How to display the labels with Order type and amount  on each legend color when we place cursor on the legend.
      3. How to navigate to the list display when clicking the particular legend on the donut?

       

       

      Author's profile photo Dibya Ranjan Bhoi
      Dibya Ranjan Bhoi

      Hello,

      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?

      Thanks

      Author's profile photo Former Member
      Former Member

      Can anyone tell me which SAP UI5 libraries should i select during project setting.

      Author's profile photo amaresh kumar pabbathi
      amaresh kumar pabbathi

      Hi praveena,

      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 .

       

       

      thanks,

      Amaresh