Build a SAPUI5 app with the AppBuilder consuming a NW Gateway service – series 1 of 2

A couple of weeks we held a spotgroup (knowledge sharing session) in the company I work for. It was one of the most busy NetWeaver spotgroups handons sessions ever. We literally had to extend the room!

Handson

Together with a couple of colleagues we organised a handson session to get aquanted with NetWeaver Gateway and consuming those services. For you all to enjoy I decided to simplify and shorten the exercises a bit and share it here. In 2 blogs we will create a NetWeaver Gateway service and consume the service in a SAPUI5 app, using the just released appBuilder. It assumes no handson knowledge on NetWeaver Gateway and SAPUI5 at all, and it is a first step to get aquanted with the topics.

Still interested? sure you are, good! Let’s start;

NetWeaver Gateway

NetWeaver Gateway enables us to perform CRUD operations on data from our SAP system via OData.

The BAPI we will expose as a service is:

Note: To perform this steps a NetWeaver Gateway system is required, if you do not have it at your disposal, the ES workplace demo services can be used as service. In the 2nd blog you could then consume those services in a mobile app.

Create project

To start building our service, we need to create a project in the NetWeaver Gateway service builder.

Open the gateway service builder by starting the transaction ‘segw’ in your gateway system. Use the create button to create a new project (The package ‘ZSCN’ was created before).

Create entity

After creation of the project we define our entity. There are various ways to create an entity, we choose to base it on an BAPI

Right click on data model and pick ‘import RFC/BOR interface’.

Define the entity name and the BAPI:

BAPI_FLIGHT_GETLIST

Select the ‘FLIGHT_LIST’ as data source parameters

Configure the AIRLINEID and CONNECTID as key.

The following message should appear;

We could use the import parameters of the BAPI as filter option, so let’s setup the Airlineid as ‘filterable’. See below:

Since the entity name is taken from our BAPI parameters naming, we like to rename it to FLIGHT.

Create entityset

Based on our entity we want to create an entitySet

Service implementation

Move down in your project to the entry ‘service implementation’. We would like to create a getEntitySet query which will give us a list of flights.

Use right mouse button and  ‘create mapping’ to start performing the mapping of our entityset to a BAPI.

Choose the BAPI you would like to map.

Note: the BAPI we selected in the beginning was just the definition of our entity, it did not call or expose any BAPI yet. We will do that now.

Use propose mapping to perform a default export mapping for your BAPI.

Click the ‘+’ to add another entity set property.

Pick Airlineid again, as property.

Map it to the Airlineid input parameter of the BAPI.

This will give us later on the possibility to filter the list of flights based on airlineid.

The end result of the mapping should be like this:

Generate

Since mapping is done, we basically ready to generate, yes generate our service implementation.

We need to the magic button on top to start this proces.

When generation is finished, classes should be generated.

Register

Only thing left is to register our service;

Scroll fully down in your project in the left pane and go to service maintenance. In this menu you should see at least your own gateway service registered and probably others. Open up your own system to register the just created service on this gateway stack.

After opening your system go to the right pane and in top bar, use ‘register’ to register your service.

During registration we select ‘LOCAL’ as our system, where we would like to register our service.

After registration our service registration list should show a succesfull registration;

Test results

Click on maintain to open ‘service maintenance’.

A new transaction (/IWFND/MAINT_SERVICE) opens, in here we can normally see all registered service, in this case we only see our service, since we navigated starting from our project.

See the bottom left pane, we can decide to test our service in the browser or in the system itself via the build-in gateway client.

Let’s open the gateway client.

A similar URL will appear when you start gateway client. Click on execute to see what happens, and if your service can actually be reached;

To retrieve the list of flights, fill in a similar url as below;

The result will show the list with flights as follows in atom-xml format;

Since we also setup a filter in our service we can see the result of this call as well. We need to add the $filter to the url, in this case filter the list on field Airlineid, which must be equal to LH. (Lufthansa).

See an example result below;

Closure

Congratulations! You’ve succesfully build a simple service using SAP NetWeaver Gateway, please continue to step 2, to build an app with SAPUI5 in the appbuilder  consuming the list with flights.

Hope you enjoyed part 1 of this blog series, see you at part 2.