A simple REST Web-service from ECC called from a HTML5 screen

Introduction

Recently we were directed to design OS agnostic RF screens for one of our business partners. We envisioned a web browser based screen which can be called from both our android & windows based RF guns. We did not want to take the module pool ITS approach & our ECC system is one of the lower level versions so we could not do a UI5-Gateway solution. After reading across these forums we decided to implement a standalone REST based web-service in ECC which can be called from a HTML5 screen.

Details

The POC has a very simple &  singular function. It accepts a material number in the screen and retrieves the material group from ECC and displays it. Here are the steps

1. In SE24 create a class to implement the interface IF_HTTP_EXTENSION. Implementing the individual HTTP request handler implements the method CL_HTTP_EXT_EXAMPLE~HANDLE-REQUEST.

2.In SE24 again – create a ‘Z’ copy of the class CL_TREX_JSON_SERIALIZER. This will help us in creating serialized json response

3.Coming back to the class created in step 1, in the method IF_HTTP_EXTENSION~HANDLE_REQUEST . We need to capture the action verb that will come with our request. In our case this will be a simple ‘GET’ request

If the action is not ‘GET’ we generate a 405 error

In the else part of the above loop we will have our logic to read the material number and return the material group.

We retrieve the material number from the request

We do our select

It’s now time to call the serializer class created in step 2 and generate the response

This completes the code for our class & method

4. Next stop SICF. Create the service. Call the class created in step 1 in the handler list

Activate the service

5. Time to test the service. I am using SOAPUI for the testing

Right click on the service and choose Test Service

Your default web-browser will be opened & it will ask for your ECC credentials. Log in. Copy the URL from the web-browser

Now Open SOAPUI – in File choose NEW REST Project

Paste the copied URL

The following screen will open

Add an additional parameter matnr below sap-client & give a valid material number from the system

Add basic authorization – this will be your ECC credentials

Execute

You should see the following response

Give a non-existent material and execute, this will generate the error response

So our service seems to be working. Next step a simple HTML5 screen.  If you have limited exposure to web-programming then https://www.w3schools.com has pretty good resources to get you started

6. Screen

I created the screen via ECLIPSE UI5 project. Open eclipse and choose projects

In the pop-up screen select UI5 & press next. Give project name

It will open a project, as this is a POC – we created simple screen elements in the index.html

We created an input box and button

Now we have to code myFunction. In this case on click our webservice will be called and material group retrieved

Pass the value of the input box to variable p_ndc

Pass the url of the webservice to variable myurl

Pass the other specifications required to call the web-service. I have hardcoded the ECC credentials in the call

7. Once completed, right click the index.html page in project explorer and choose web-app preview

The following screen should appear

Give your material number and press the button and you should see a response