Technical Articles

Stefan Schnell

January 17, 2016 4 minute read

How to use RFC_READ_TABLE from JavaScript via WebService

Here a step by step guide to expose the RFC-enabled function module RFC_READ_TABLE as WebService and how to use it via JavaScript:

Start transaction code SE80 and create a new Enterprise Service.
Choose Service Provider and press Continue button in the dialog.
Choose Existing ABAP Object and press Continue button.
Name the service definition, the description and press Continue button.
Choose Function Module and press Continue button.
Name Function Module with RFC_READ_TABLE.
Accept SOAP Appl, set Profile to Authentication with User and Password, No Transport Guarantee and press Continue button.
Choose the Package you want, I my case I activate Local Object CheckBox, and press Continue button.
Press Complete button.
Now Save and Activate the Service Definition.
Start the transaction code SOAMANAGER, log on and select the link Web Service Configuration.
Search for your service name, in my case ZTEST. Press the Apply Selection button.
Choose Configurations tab below and choose the link Create.

Set the Service Name, the Description, the Binding Name and press the button Apply Settings.
Scroll down and choose in Provider Security User ID/Password and Save your configuration.
Choose the Overview tab and select the link Open WSDL document for selected binding or service.

A new browser window will be opened, scroll down until address location tag. Here you find the URL of the web service.

Thats all to expose a RFC function module as WebService.
Here now a complete request to call the WebService with the table USR01.POST /sap/bc/srt/rfc/sap/ztest2/001/ztest2/rfc_read_table HTTP/1.1
Host: ABAP
Accept: */*
Authorization: Basic YmN1c2VyOm1pbmlzYXA=
content-length: 428
content-type: text/xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<env:Envelope xmlns:env=”http://schemas.xmlsoap.org/soap/envelope/” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xs=”http://www.w3.org/2001/XMLSchema“>
<env:Header/>
<env:Body>
<ns1:RFC_READ_TABLE xmlns:ns1=”urn:sap-com:document:sap:rfc:functions”>
<DATA />
<FIELDS />
<OPTIONS />
<QUERY_TABLE>USR01</QUERY_TABLE>
</ns1:RFC_READ_TABLE>
</env:Body>
</env:Envelope>

Here now a JavaScript program to call the SAP WebService.

<!doctype html>
<html>

  <head>
    <title>Calling Web Service from jQuery</title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        $("#btnCallWebService").click(function (event) {
          var wsUrl = "http://ABAP:8080/sap/bc/srt/rfc/sap/ztest/001/ztest/rfc_read_table";
          var soapRequest = '<?xml version="1.0" encoding="UTF-8"?>' +
            '<env:Envelope xmlns:env="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema">' +

            '<env:Body>' +
            '<ns1:RFC_READ_TABLE xmlns:ns1="urn:sap-com:document:sap:rfc:functions">' +
            '<DATA />' +
            '<FIELDS />' +
            '<OPTIONS />' +
            '<QUERY_TABLE>USR01</QUERY_TABLE>' +
            '</ns1:RFC_READ_TABLE>' +
            '</env:Body>' +
            '</env:Envelope>';
          $.ajax({
            type: "POST",
            url: wsUrl,
            contentType: "text/xml",
            dataType: "xml",
            headers: {
              "Authorization": "Basic " + btoa("bcuser:minisap"),
              "Accept": "*/*",
              "Host": "ABAP"
            },
            data: soapRequest,
            success: processSuccess,
          });
            error: processError
        });
      });

      function processSuccess(data, status, req) { 
        alert('success');
        if (status == "success")
          alert(req.responseText);
      }

      function processError(data, status, req) {
        alert(req.responseText + " " + status);
      }

    </script>

  </head>

  <body>
    <h3>
        Calling SAP Web Services via JavaScript with jQuery/AJAX
    </h3>
    <input id="btnCallWebService" value="Call web service" type="button" />
  </body>

</html>

With this knowledge it should be now not difficult to expose any RFC-enable function module as WebService and to use it inside your JavaScript program.

2 Comments

You must be Logged on to comment or reply to a post.

Stefan Schnell

Blog Post Author

January 19, 2016 at 1:38 pm

Hello community,

I test this szenario in a production environment, but I have some Cross-Origin Resource Sharing (CORS) trouble. My browser shows in the console: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401. So I load the html file as bsp to the server and all works well and expcted.

Here the advanced html code:

<!doctype html>

<html>

  <head>

    <title>Calling Web Service from jQuery</title>

    <script type="text/javascript">
    var Path = "/SAP/BC/BSP/SAP/PUBLIC/libraries/javascript";
    document.write("<script type='text/javascript' src='" + Path + 
      "/jquery.min.js'><\/script>");
    </script>

    <script type="text/javascript">

      $(document).ready(function () {
        $("#btnCallWebService").click(function (event) {

          var wsUrl = "http://ABAP:8000" + 
            "/sap/bc/srt/rfc/sap/ztest/001/ztest/rfcreadtable";

          var soapRequest = '<?xml version="1.0" encoding="UTF-8"?>' +
            '<env:Envelope xmlns:env="http://schemas.xmlsoap.org/soap/envelope/" ' +
            'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
            'xmlns:xs="http://www.w3.org/2001/XMLSchema">' +
            '<env:Body>' +
            '<ns1:RFC_READ_TABLE xmlns:ns1="urn:sap-com:document:sap:rfc:functions">' +
            '<DATA />' +
            '<FIELDS>' +
            '<item><FIELDNAME>BNAME</FIELDNAME></item>' +
            '<item><FIELDNAME>SPLD</FIELDNAME></item>' +
            '<item><FIELDNAME>LANGU</FIELDNAME></item>' +
            '</FIELDS>' +
            '<OPTIONS>' +
            '<item><TEXT>BNAME = 'BCUSER'</TEXT></item>' +
            '</OPTIONS>' +
            '<DELIMITER>~</DELIMITER>' +
            '<QUERY_TABLE>USR01</QUERY_TABLE>' +
            '</ns1:RFC_READ_TABLE>' +
            '</env:Body>' +
            '</env:Envelope>';

          $.ajax({
            type: "POST",
            url: wsUrl,
            contentType: "text/xml",
            dataType: "xml",
            headers: {
              "Authorization": "Basic " + btoa("bcuser:secret"),
              "Accept": "*/*"
            },
            data: soapRequest,
            success: processSuccess,
          });
            error: processError
        });
      });

      function processSuccess(data, status, req) {
        alert('success');
        if (status == "success")
          alert(req.responseText);
      }

      function processError(data, status, req) {
        alert(req.responseText + " " + status);
      }

    </script>

  </head>

  <body>

    <h3>
        Calling SAP Web Services via JavaScript with jQuery/AJAX
    </h3>

    <input id="btnCallWebService" value="Call web service" type="button" />

  </body>

</html>

Enjoy it.

Cheers

Stefan

Pras Venkat

April 7, 2016 at 10:49 am

Hi Stefan,

Have been searching through on webservices in ABAP. Its a wonderful article. Thanks !

Technical Articles

How to use RFC_READ_TABLE from JavaScript via WebService

Assigned Tags