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:
In the second part:
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.
In short,
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:
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.
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“):
After this, create the CDS view using menu “File-New-Other-Core Data Services - Data Definition”
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.
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:
:
@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:
In other way, menu “Data preview” for the CDS View can be used:
Result are the same data that in the our sql view “zdemo_sqlv_po”.
Now, our CDS View will be exposed as 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:
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)
001 is version of the services.
IWMC object is Gateway model and IWSV object is the service of Gateway Business Suite enablement.
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.
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”
After it, press “Get Service”. New backend service appear:
Click on the service link:
Enter your package name, or $TMP, if you did not need to transport your service.
After activation, we test the activated OData service. Click “Sap Gateway Client”:
SAP Gateway Client window is opened. For test the OData service press "Execute".
The service work fine!
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.
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).
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.
Press Next and enter a name for our project:
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).
There is name of our connection on picture 21.
Login and password to the server have been asked, and…
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.
We have created our simplest SAP Fiori Application from the report template:
Test it. Select Run->Run As->SAP Fiori Launchpad Sandbox. We have been asked about login and password to the frontend server again, and..
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.
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-...
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-...
- SAP Managed Tags:
17 Comments
