How to create simplest Fiori application locally: step-by-step from CDS View to Fiori Launchpad. Part 1.

Hi!

 

It was interested for me to create a Fiori application with local SAP WEB IDE.  Perhaps, you will be interested in my experience.

This blog will guide through all steps of this process: from tables on local S/4 HANA system to completed simplest SAPUI5 report with Fiori Launchpad on frontend server.

The local WEB IDE is used education purposes, for production working we have to use SAP Web IDE in the cloud and SAP HANA Cloud Connector.

The example is not a reference, I will only demonstrate key solution steps. I suppose you have initial information about FIORI technology.

In the first part of this scenario, we will:

• create CDS View based on ERP data (used some purchase order tables)
• expose this CDS View as OData service
• activate the OData service on SAP Gateway
• create transactional Fiori Apps on local WEB IDE

In the second part:

• deploy the SAPUI5 Apps on the frontend server
• publish the Fiori Apps on Launchpad

1.Architecture Overview and Prerequisites

I suppose that you have fully configured Fiori Landscape. This configuration is not subject of the blog.

Picture below contains main logical components the Fiori Landscape.

Components of the frontend server highlighted in red, the backend server highlighted in blue.

All developer tools highlighted in green.

 

 

Picture 1

In short,

• ABAP front-end server contains all UI components of Fiori system and NetWeaver gateway. SAP NetWeaver Gateway is used for connecting between frontend system and SAP business suite system (backend).
• The OData services working with the gateway.
• On backend server business suite services based on CDS View.
• OData services get data from backend services via RFC.
• SAPUI5 applications consume OData services as data source.

Of course, embedded  Fiori  configuration (where one server used as backend and frontend) can be used too. You can read details about all configurations of the Fiori Landscape on https://help.sap.com/viewer/p/SAP_FIORI_OVERVIEW

Also, I used client computer with:

• Sap Logon 7.40
• Eclipse Mars with ADT for HANA
• Local Web IDE.

You can read about local WEB IDE : https://wiki.scn.sap.com/wiki/display/SWI/SAP+Web+IDE+Personal+Edition

The developer authorizations for frontend and backend systems are need to create ABAP development objects (including ADT authorizations for backend).

Also, authorization for transaction /IWFND/MAINT_SERVICE, role ZSAP_UI2_ADMIN and authorization S_PB_CHIP, S_RFC_CALC on frontend server are need.

It will be convenient if you have SAP_ALL authorization on both systems, but it is not enough for running of Fiori application. This question will be discussed in second part of this blog.

2.ABAP CDS view.

Purchase  order header and item tables will be used as data source for our simple report.

First, create a DDL source in ABAP Development Tools for defining an ABAP CDS.

Run Eclipse, switch on ABAP perspective and create new ABAP project on your backend system (select from menu “Create – new ABAP project“):

Picture 2

After this, create the CDS view using menu “File-New-Other-Core Data Services – Data Definition”

Picture 3

It’s important, – a name of the CDS View can contain no more than 25 characters!

I used ‘z_ddl_pur_order_items’ as the name.

Picture 4

Choose Next and assign a transport request (or you can use package $TMP).

Choose Finish.

There is  Data Definition editor with template of our CDS View:

:

Picture 5

Paste the next code to the source file:

 

@AbapCatalog.sqlViewName: ‘zdemo_sqlv_po’

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: ‘Reporting purchase order items’

 

define view z_ddl_pur_order_items as

select from ekko

join ekpo on ekko.ebeln = ekpo.ebeln

join lfa1 on ekko.lifnr = lfa1.lifnr {

key ekko.ebeln as PurchseOrder,

key ekpo.ebelp as ItemPosition,

lfa1.name1 as VendorName,

@Semantics.currencyCode: true

ekko.waers as CurrencyCode,

@Semantics.amount.currencyCode: ‘CurrencyCode’

ekpo.netpr as Amount ,

ekpo.txz01 as MaterialName

}

There, “zdemo_sqlv_po” is name of our dictionary sql view. As data source was used simple joins with ekko (header for purchase document), ekpo (items for purchase document) and lfa1(vendor data) tables. I use very nominal approach, please, use this select only as an example.

The CurrencyCode is defined as currency key using the annotation @Semantics.currencyCode: true. Annotation @Semantics.amount.currencyCode: ‘CurrencyCode’ defines amount as a currency field. Now, we have to activate this CDS View, use “Activate BW Object”  icon.  After successfully activation, the sql view “zdemo_sqlv_po” was created in ABAP Dictionary.The CDS View can be checked by two methods. First, transaction SE16 can be used for  data browse of zdemo_sqlv_po:

Picture 6

In other way, menu “Data preview” for the CDS View can be used:

Picture 7

 

Result are the same data that in the our sql view “zdemo_sqlv_po”.

Now, our CDS View will be exposed as OData service.

Create OData service.

We need to add the annotation

@OData.publish: true

to our CDS View and activate it.

There is our code now:

 

@AbapCatalog.sqlViewName: ‘zdemo_sqlv_po’

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: ‘Reporting purchase order items’

@OData.publish: true

define view z_ddl_pur_order_items as

select from ekko

join ekpo on ekko.ebeln = ekpo.ebeln

join lfa1 on ekko.lifnr = lfa1.lifnr {

key ekko.ebeln as PurchseOrder,

key ekpo.ebelp as ItemPosition,

lfa1.name1 as VendorName,

@Semantics.currencyCode: true

ekko.waers as CurrencyCode,

@Semantics.amount.currencyCode: ‘CurrencyCode’

ekpo.netpr as Amount ,

ekpo.txz01 as MaterialName

}

 

After reactivation of this CDS View with OData annotation, OData service artifacts ere created with name <CDS_VIEW>_CDS.

Please see our picture. We can see new decorator  against the annotation:

Picture 8

We can check there  artifacts on backend, for example, with table TADIR (by SE16 transaction) for selection value:

OBJ NAME = <CDS_VIEW>_CDS* (Z_DDL_PUR_ORDER_ITEMS_CDS* for our example)

Picture 9

001 is version of the services.

IWMC object  is Gateway model and IWSV object is the service of Gateway Business Suite enablement.

 3.Activation OData service on the gateway.

Having service artifacts, we can go to next step – activation OData service on frontend server(gateway).

After this, the OData service will be connected to corresponding back-end service.

Now, we start working on frontend server.

It is /IWFND/MAINT_SERVICE transaction.

Picture 10

There are a list of activated OData services on main transaction screen. For adding of our new  service,
press “Add Service” and enter “z_ddl_pur_order_items_cds” into field “Technical Service name”

Picture 11

After it, press “Get Service”. New backend service appear:

Picture 12

Click on the service link:

Picture 13

Enter your package name, or $TMP,  if you did not need to transport your service.

Picture 14

After activation, we test the activated OData service. Click “Sap Gateway Client”:

Picture 15

SAP Gateway Client window is opened. For test the OData service press “Execute”.

Picture 16

The service work fine!

4. Create Fiori (SAPUI5) application.

I installed and run a local Web IDE on my workstation according to part 10 of document “SAP HANA Cloud Platform, Web IDE Developer Guide”. This may take 10-15 minutes.

The most important thing is: a file with description of our frontend server must be created. There is destination to OData services for FIORI application (see link “check data” on Picture 1).

The file must be placed in catalog

<SAPWebIDE directory>\eclipse\config_master\service.destinations\destinations\

As filename I used <SAPSID> of my frontend server.

There is content of the file:

Description=<SAPSID>

Type=HTTP

TrustAll=true

Authentication=NoAuthentication

Name=<SAPSID>

ProxyType=Internet

URL=http\://host.domain\:8001

WebIDEUsage=odata_abap,odata_gen,ui5_execute_abap,dev_abap,bsp_execute_abap,odata_xs

WebIDESystem=<SAPSID>

WebIDEEnabled=true

sap-client=<sap_client>

 

Go to http://localhost:8080/webide/index.html .  For first time you must create your login and  password.

Picture 17

After successfully login we have to create a project for Fiori Application.

A template “List Report Application” will be used for our report (as simplest variant).

Picture 18

 

It’s important! I reduced SAPUI5 version of new project to 1.38 because of SAPUI5 version of my frontend server is 1.38 only. You can check your version follow link  http://<host>:<port>/sap/public/bc/ui5_ui5/, where <host> and <port> are host and port of your frontend server. This  version of your application must  be less or equivalent that version of  server.

Picture 19

Press Next and enter a name for our project:

Picture 20

Next step is very important. We select server with OData services. Do you  remember the file in begin of this step? This connection will be used as a data source (see arrow “check data” on Picture 1).

Picture 21

There is name of our connection on picture 21.

Login and password to the server have been asked, and…

Picture 22

there are our OData service and its CDS View!

We skip next screen (annotation files) and assign the CDS view from our OData service to Data Binding template parameter. Then choose Finish.

Picture 23

We have created our simplest SAP Fiori Application from the report template:

Picture 24

Test it. Select Run->Run As->SAP Fiori Launchpad Sandbox. We have been asked about login and password to the frontend server again, and..

Picture 25

Choose the setting button ( ) and check all column. Also we can use filtering, sorting, grouping – try it! Then press Ok and Go. We can see the purchase order items from tables of the backend server.

Picture 26

 

 

But, now our application is running on Web IDE as sandbox.

We must run it on Fiori frontend server by Fiori Launchpad. This we will deal in the second part – https://blogs.sap.com/2017/09/20/how-to-create-simplest-fiori-application-locally-step-by-step-from-cds-view-to-fiori-launchpad.-part-2./