How to create SAPUI5 application consuming Gateway service with the help of SAP NW 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

New_Gateway_plug-in_for_Eclipse Or Gateway Productivity Accelerator at SAP Development Tools for Eclipse

Procedure –

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

1. Select Starter Application Project as displayed in below screenshot
2. 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 checkbox Use HTTPS. Provide server host name and server port. Provide user credentials and select checkbox Save Password and 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.

<!– ============================================================== –>

<!– UI5 proxy servlet –>

<!– ============================================================== –>

<servlet>

<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><host>:<port></param-value> –>

<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,

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

Now, we will try to see if there is data available for entity set CarrierCollection. For that, put below URL in the chrome browser,

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

you may get output as below,

After confirming that we are getting data from SAMPLEFLIGHT oData service, we will configure connection to demo system as below,

We need to add parameter for REMOTE_LOCATION with host as demo system,

connectivity.js will look as below,

and “/” before CarrierCollection in your_view_name.controller.js so that it will be as below

oTable.bindRows(“/CarrierCollection”);

That’s it !!

Now try to run application and paste the URL into chrome browser, it will display pop up for authentication. Provide credentials as mentioned above.

If everything is fine, you will be able to see output.

​