How to create SAPUI5 application consuming Gateway service with the help of SAP NW Gateway Plug-in for Eclipse

Introduction -

In this technical blog, I will focus on how we can build SAPUI5 application consuming GW service with the help of SAP NetWeaver Gateway plug-in for Eclipse.

SAP NetWeaver Gateway plug-in for Eclipse -

The SAP NetWeaver Gateway plug-in for Eclipse is an SDK that enables the developer to easily and quickly create applications that consume data from SAP systems via OData services exposed by SAP NetWeaver Gateway

The framework enables developers using Eclipse to do the following:

Discover, explore and search SAP services in SAP NetWeaver Gateway
Generate semantic proxies for SAP services
Leverages templates for generating starter applications based on SAP services.

Prerequisites –

You should have Eclipse IDE with SAP UI development toolkit for HTML5 and access to SAP NetWeaver Gateway system.

You should also need to install SAP NetWeaver Gateway plug-in for Eclipse which can be downloaded at

http://www.sdn.sap.com/irj/scn/downloads?rid=/webcontent/uuid/b09d414f-f227-2f10-bdbf-ba31c844b432

Procedure -

Steps involved for creating simple UI5 application consuming Gateway services with the help of Gateway plugin for Eclipse are as below,

Select Starter Application Project as displayed in below screenshot
Give project name and select HTML5

3. Select List/Details Application (SAPUI5)

4. In this step, we want to select Gateway service either from remote location or from File system. We will choose Remote location and connect to SAP Gateway system

5. Here we can configure connection to SAP NW GW system

6. Do not select checkboxUse HTTPS. Provide server host name and server port. Provide user credentials and select checkboxSave Passwordand click on OK.

7. If you are able to connect to Gateway system then you will be able to see list of all gateway services available in your SAP system. And you can search for services.

8. Here, we will start searching standard GW service SAMPLEFLIGHT

9. Select service SAMPLEFLIGHT. This service contains 4 entity set such as BookingCollection, CarrierCollection, FlightCollection and TravelagencyCollection. Entity Set can be considered as internal table.

10. Click on Next

11. Now we can create view of type List for Entity Sets. We will choose Entity Set FlightCollection.

12. Click on + sign to add fields to the view

13. As displayed below, Click on Finish and UI5 application will get generated.

Below snap gives details on final project structure generated automatically by the wizard.

14. We can start testing the application by Run As a Web App Preview

This will open index.html page with URL. As displayed below, this page does not display any information. Now we would like to see what errors occurred.

To troubleshoot, we can use Chrome browser as it comes up with inbuilt tools as shown below.

By pasting the URL in chrome browser and activating developer tools, we will be able to see errors on console. As per below error, /sapui5-1.4 is not loaded.

For this, we need to modify the bootstrap scrip in index.html page

It should be,

src="resources/sap-ui-core.js"

After correcting this error, we can reload URL and see the results. Now it is displaying Flight table but with no data and there are errors related to unauthorized access to Gateway service ,i18n_en_US file not found as well as Origin localhost is not allowed by Access-Control-Allow-Origin.

To correct these errors, in web.xml file, we need to add <context-param> tags with < param-value> pointing to SAP Gateway system server host and port.

<servlet-name>SimpleProxyServlet</servlet-name>

<servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SimpleProxyServlet</servlet-name>

<url-pattern>/proxy/*</url-pattern>

</servlet-mapping>

<context-param>

<param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>

<param-value>http://hostname.com</param-value>

</context-param>

Also add below code to index.html

This will add proxy to your URL when we are testing the application locally.

To remove error related to i18n, copy file i18n.propeties and paste under globalization folder and rename it to i18n_en_US.properties. This should remove error.

Apart from these changes, in controller JS file, we need to add “/” before the entity set name else you will get Bad call error message.

Hence it should be oTable.bindRows(“/FlighCollection”);

Once all these required changes are done in the generated code, you can reload the URL which will display the output as below,

Output -

Closing Remarks –

With the help of SAP Gateway Plugin for Eclipse, we can create starter SAPUI5 application with very minimum efforts.

This step-by-step blog is written to explain how we can,

1) Configure SAP NW GW system,

2) Search existing gateway services

3) Create UI5 application consuming gateway service

4) Troubleshoot issues with the help of developer tool available in Google chrome browser

5) And test the application locally

Though we can create very basic application using this plugin,it will help us to understand/learn UI5 application structure and gateway service basics.

Additional Information –

In this blog, I am using our local SAP NetWeaver Gateway system. In case, if you do not have access to Gateway system then you can use SAP NetWeaver Gateway Demo System hosted by SAP.

you need to use below credentials,

Username: GW@ESW

Password: ESW4GW

Before starting building application, you may want to check if the system is up and running. to test it, try to access below URL and provide above credentials,

http://gw.esworkplace.sap.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata

if the demo system is up and running, you will see below output