I intend with this first blog post, to demonstrate how to create a simple gateway service, configure a SAPUI5 project connecting with ABAP Application Server, and consume the created OData Service.
This article will be divided in tree parts; in the first one, we will learn how to create a SAPUI5 project using ABAP Application Server to deploy our project.
The second part can be found here
How to create and consume gateway service via SAPUI5 – Part 2
Prerequisites
You will need to download and install the following software:
- Eclipse IDE for JEE Developers (Mars or Luna)
- SAP Development tools for Eclipse
- SAP Netweaver Gateway on SAP ERP
- ABAP Application Services
First, we need to confirm if the backend system is compatible with SAP Netweaver Gateway. So check if the software components below are installed in your system.
| Sap Netweaver Gateway Server Functionalities | Sap Netweaver Gateway backend enablement |
7.31 and earlier | GW_CORE, IW_FND | IW_BEP |
as of 7.40 | SAP_GWFND | SAP_GWFND |
For more information about the components, check this SCN Blog
http://help.sap.com/saphelp_gateway20sp09/helpdata/en/76/08828d832e4aa78748e9f82204a864/content.htm
As we will use ABAP Application Server to deploy our project, check if the Central UI Components below are installed.
SAP NW Release | Required Central SAP UI5 Add-On Product Version | Comprised Component Versions |
EHP3 FOR SAP NETWEAVER 7.0 (AS ABAP) (minimum support package stack 05, recommended minimum SPS 08) or higher or SAP EhP1 for SAP NetWeaver 7.3 or higher | UI ADD-ON 1.0 FOR NW 7.03 (minimum support package stack 10), instances Integration Services: Provider and Integration Services: Libs | SAP UI ADD-ON INFRA V1.0 (UI_INFRA 100), SP10 |
SAP UI2 SERVICES V1.0 (UI2_SRVC 100), SP10 | ||
SAPUI5 CLIENT RT AS ABAP 1.00 (UISAPUI5 100), SP10 | ||
SAP UI2 FOUNDATION V1.0 (UI2_FND 100), SP10 | ||
SAP UI2 IMPL. FOR NW 7.00 V1.0 (UI2_700 100), SP10 | ||
SAP UI2 IMPL. FOR NW 7.01 V1.0 (UI2_701 100), SP10 | ||
SAP UI2 IMPL. FOR NW 7.02 V1.0 (UI2_702 100), SP10 | ||
SAP UI2 IMPL. FOR NW 7.31 V1.0 (UI2_731 100), SP10 | ||
SAP NETWEAVER 7.4 (AS ABAP) SAP NETWEAVER 7.4 FOR SUITE (AS ABAP) | Minimum support package stack 04 and component SAP_UI 740 SP09 for both. All required components are included in the SAP NetWeaver 7.4 installation. Verify that the above-mentioned components are in place. | |
We will also need the eclipse IDE installed and configured with SAP Development Tools. So, to see how to do this, check these links.
https://tools.hana.ondemand.com/
https://help.hana.ondemand.com/help/frameset.htm?76137a37711e1014839a8273b0e91070.html
https://websmp104.sap-ag.de/~sapidb/012006153200000764932012E/adt_731_installation_guide.pdf
Configuring SAPUI5 Project in Eclipse
Let’s start creating our project. First of all, create a new project in Eclipse. Following the steps described below.
- Access the menu: File -> New -> Project…
- Select SAPUI Application Development Wizard, see the window below.
- In the next window, enter a Project name: “HelloOdata”, mark the options "sap.ui.commons Library" and "create an initial view".
- Now, inform the view name “airline”, and development paradigm “JavaScript”, and then click in the Finish button.
- See in the image below how the project structure should look like.
Connecting the project with SAP ABAP Application Server
Now we will connect our project with SAP Application Server. To do this, proceed with the next steps:
- Right click on project name, in the context menu, select Team -> Share Project…
- Next window select SAPUI5 Abap Repsitory
- Select the connection to a SAP System. Click "Browse" and select the appropriate connection.
- Then connect to your SAP system, entering your username and password.
- Now Select "Create a new BSP Application", enter a name, description and package. You need to give Z* name to your BSP application. You can also browse package and select required package in which you want to save your BSP application.
- Create a new request or select one in the list. Then click Finish.
- If you receive a version check message, click OK.
- Your project will look like this.
Publishing and testing your application
- With the project connected with the ABAP server, now let's publish and test.
- First, we will submit our project. Right click on your project name, select Team -> Submit…
- In the next window, leave everything as it is and click Finish.
- To test, right click in your project name, select Run as, Run on ABAP Server.
- A new tab will open, with a blank page. You can use the url in your browser, or test directly in Eclipse.
In the next blog post, we will see how to create a OData service using SAP Netweaver Gateway, and in the third part of the series, we will consume the OData service in our application.