Creating SAP Fiori Overview Page Application

praveena_subramani · ‎01-24-2017

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:

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

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.

Code Editor:

Descriptor Editor:

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 😎

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:

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

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.

akshaynayak02 · ‎01-24-2017

Very Good and Informative !!

MaheshChandra · ‎01-25-2017

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

Mahesh

Former Member · ‎02-03-2017

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

Thanks for the same.

Yogendra_Ahuja · ‎02-24-2017

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

Former Member · ‎02-28-2017

@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

former_member202621 · ‎03-10-2017

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.

Former Member · ‎03-13-2017

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.

Former Member · ‎03-17-2017

Hi Yu-Ju,

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

Thanks,

Former Member · ‎03-17-2017

Hi Tarun,

how to check for systax errors in Annotation file?

Thanks

praveena_subramani · ‎03-20-2017

Hi Yogendra

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

former_member202621 · ‎03-24-2017

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>

JaySchwendemann · ‎03-24-2017

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 😎 and the frontend server is AS ABAP (7.51)?

Many thanks and kind regards

Jens

Former Member · ‎03-29-2017

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

chamuk · ‎04-04-2017

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.

Unable to display the total net amount of all order types on the header section. Currently it displaying only the first record amount.

How to display the labels with Order type and amount on each legend color when we place cursor on the legend.

How to navigate to the list display when clicking the particular legend on the donut?

former_member290044 · ‎05-22-2017

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

former_member214005 · ‎07-14-2017

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

Former Member · ‎04-02-2018

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

former_member246549 · ‎12-24-2019

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

Creating SAP Fiori Overview Page Application

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z