Skip to Content

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



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

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 :

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:


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:













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 –

You must be Logged on to comment or reply to a post.
    • Massoud,


  • l am so curious about what's coming in next chapter. As I see you created the UI5 App using WebIDE, is it for the template? Then what is the benefit of using local WebIDE, looking forward to the coming one...

    • Hi, Vincent.

      I wrote the blog that everyone can try to make a FIORI application without having cloud accounts or big experience in JS or CDS. Second part have been published.

  • Hi Sergii. Thanks a lot for this blog!

    Unfortunately I have stopped at the moment of selection of my connection in WebIDE - nothing has appeared in the drop-down list and I can't select the connection. Perhaps smth wrong with my file - what extension should has this file: .txt or another one? or maybe you have your own idea about the reason of this situation?



  • Hi Sergil,

    Is the SAP ABAP layer is mandatory for develop a custom Bolt on application for S4 hana in FIORI? What is role of Hana Advance XS application server in Hana?

    Apurba K Saha

  • Hello Sergei,

    Thanks for sharing the document.

    I have done the 1st 3 steps.

    For the 4th step, I do not have the SAP WEB IDE and I believe I need to pay some bucks to get the WEB IDE installed.

    Is it possible to build the Fiori Application to consume the CDS view using eclipse?

    Appreciate your help.

      • The file should be stored in the destinations below:


        If you're using





  • First of all thanks for nice blog. Unfortunately I got stuck at 4th step where I should store destination file in catalog (The file must be placed in catalog) step. I am using SAP webIDE and I am not sure where I can place the file. Could you please explain little more with screenshot where exactly and what should the format of file.

    Thanks in Advance!


    Sweety Singh.

    • The file should be stored in the destinations below:


      If you're using