How to create and consume a gateway service via SAPUI5 - Part 1

[balbino_soaresferreirafil]

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 and third part can be found here

How to create and consume gateway service via SAPUI5 – Part 2

How to create and consume gateway service via SAPUI5 – Part 3

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://scn.sap.com/community/gateway/blog/2013/05/27/sap-netweaver-gateway-deployment-options-in-a-n...

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.