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./
Thanks for sharing. It's very useful !
Great piece of work. when we will see part 2 please?
Massoud,
done:)
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./
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?
Thanks.
Hi Sergii,
Nice blog. Thank you for sharing. It is good one for the beginner.
Thank you once again.
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?
Regards
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.
I did it.
excellent Example.
Thanks!!!!!
Hi Jose,
Could you please help. I am using SAP WebIDE and not sure where exactly I should store destination file.
Thanks,
Sweety.
The file should be stored in the destinations below:
If you're using
Mac:
/Applications/SAPWebIDE/eclipse/orion.app/Contents/MacOS/config_master/service.destinations/destinations/
Windows:
C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations
Great!!
Thanks
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
Mac:
/Applications/SAPWebIDE/eclipse/orion.app/Contents/MacOS/config_master/service.destinations/destinations/
Windows:
C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations
Sergii,
thank you so much for these blog its realy from scratch
How to make rows selectable? It should be smth that looks like an arrow at the right side?