In a lot of blogs and presentations SAP Gateway is mentioned as the communication layer between the SAPUI5 application and a SAP backend system. One of the main advantages of SAP Gateway is that the communication is handled with the ODATA protocol. This protocol is amongst other responsible for the navigation between entities in a service (like a sales order and its positions) and handles part of the security of the communication.

/wp-content/uploads/2014/10/pic1_569790.png

Is SAP Gateway always necessary? See for example the following scenarios:

  • A company does not have a SAP Gateway system available and/or the current SAP backend system has to be upgraded in order to communicate with SAP Gateway;
  • The requested application contains only a simple overview without any navigation;
  • The application will only be used within the own (company) network en there is no need to call the application from outside this network.

In the above scenarios the advantages of ODATA (and to some extent SAP Gateway) are not as clear as in other scenarios. Another possibility here is to use a direct communication between the application and the backend system with help of JSON.


SAPUI5 is perfectly capable of handling JSON formats (e.q. standard libraries available for JSON model) and a SAP Netweaver ABAP stack also has several tools for processing this format.

/wp-content/uploads/2014/10/pic2_569791.png

A SAPUI5 application can, as mentioned, use several models, like for example an ODATA and JSON model. This document presents a way to communicate with a SAP backend system without the use of SAP Gateway.

One of the possibilities to send a response to a SAPUI5 application in JSON format, is to create an own handler class which has to be linked to a (new) ICF node. This class will have to implement interface IF_HTTP_EXTENSION, which is needed for processing the request. This (new) ICF node will be directly linked under the ‘DEFAULT_HOST’ node, which shortens/simplifies the navigation path from outside the system. The handler class can determine what kind of request has to be done. Dependent of the type of request the data collection will be executed and the data will be returned in JSON format.

That’s all about the theory! Let’s have a look at an example and configure the system so the data will be displayed in a SAPUI5 application. The first step to be executed is the creation of a handler class with will process the request.

/wp-content/uploads/2014/10/pic3_569798.png

First determine in method HANDLE_REQUEST which type of request has to be executed (this is only needed when the ICF node is used for multiple types of requests).

/wp-content/uploads/2014/10/pic4_569799.png

Next step is to perform the data collection and after this step the retrieved data is transformed into a JSON string.

/wp-content/uploads/2014/10/pic5_569800.png

Finally the JSON string has to be added to the response (don’t forget to set the content type as well) and the status should be set to ‘successfully processed’.

/wp-content/uploads/2014/10/pic6_569804.png

The handler class is ready now, next step is to define an ICF node which will be the access point for the SAPUI5 application.

/wp-content/uploads/2014/10/pic7_569805.png

The handler class has to be attached to the node.

/wp-content/uploads/2014/10/pic8_569806.png

The backend configuration is completed now. Next step is to enable the SAPUI5 application to communicate with the created ICF node.

/wp-content/uploads/2014/10/pic9_569807.png

Create the connection between the fields in the internal table (in this case SO_ID) and the columns of the table in which the data will be presented.

/wp-content/uploads/2014/10/pic10_569808.png

The last step is to link the created model to the table and also indicate which node will be called in the JSON file.

/wp-content/uploads/2014/10/pic11_569809.png

See the results of all performed actions, where the content of the internal table is displayed in a SAPUI5 application.

/wp-content/uploads/2014/10/pic12_569810.png

When completing (or reading) the article, it hopefully becomes clear that converting an internal table into a JSON file with help of you own handler class, is an easy way to publish data into a SAPUI5 application. So in case of the scenarios earlier mentioned, this solution is a good alternative for using SAP Gateway.

To report this post you need to login first.

12 Comments

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

  1. Marc Davies

    Hi Peter,

    I have tried to implement this, but I seem to get stuck on the part where you bind the Model to the Table.

    I have created the Handler service and when I call it from my app, I successfully get a JSON string sent back:

    lv_json = {“TEXT”:[{“SNAME”:”BOND JAMES”,”ACTIVITY”:””,”ACT_LONG”:””},{“SNAME”:”FIRE HIRE”,”ACTIVITY”:””,”ACT_LONG”:””},{“SNAME”:”MARKER RENKUS”,”ACTIVITY”:””,”ACT_LONG”:””},{“SNAME”:”SVINGLING REN”,”ACTIVITY”:””,”ACT_LONG”:””}, … (etc. etc.)

    However, when I attempt to bind this, I get nothing. Can you take a look and possibly help? Can you spot an obvious mistake? Any assistance would be greatly appreciated!

    // Create JSON model instance

    var oModel = new sap.ui.model.json.JSONModel();

    // Load JSON into model

    oModel.loadData(

    “/mssapp_handler”,

    {“application”:”MSS_MOBILE_TEAM”},

    false,

    “GET”

    );

        // Create table instance

    var oTable = new sap.ui.table.Table({

    title: “MSS App Prototype”,

    visibleRowCount: 6,

    selectionMode: sap.ui.table.SelectionMode.Single,

    navigationMode: sap.ui.table.NavigationMode.Paginator,

    fixedColumnCount: 3,

    enableColumReordering: true,

    width:”100 %”

    });

    oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({ text: “Name” }),

        template: new sap.ui.commons.TextView().bindProperty(“text”, “SNAME”),

       

        sortProperty: “SNAME”,

       

        filterProperty: “SNAME”,

        width: “200px”

    }));

    oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({ text: “Activity” }),

        template: new sap.ui.commons.TextView().bindProperty(“text”, “ACTIVITY”),

       

        sortProperty: “ACTIVITY”,

       

        filterProperty: “ACTIVITY”,

        width: “200px”

    }));

    oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({ text: “Act. Long” }),

        template: new sap.ui.commons.TextView().bindProperty(“text”, “ACT_LONG”),

       

        sortProperty: “ACT_LONG”,

       

        filterProperty: “ACT_LONG”,

        width: “200px”

    }));

       

    //Bind model

    oTable.setModel(oModel);

     

    // Bind rows

    oTable.bindRows(“/TEXT”);

    oTable.placeAt(“content”);

    (0) 
    1. Peter Boertien Post author

      Hi Marc,

      I see two things in your code you have to change. The first one is not that obvious: In the declaration of your table you use the class “sap.ui.table”. You have to add this to the bootstrap (or use a require statement) so the application knows the class:

      data-sap-ui-libs=”sap.ui.commons, sap.ui.table

      This solves most of your problems. There is another small issue, when defining the width of the table you have to delete the space. So not “100 %”, but “100%”.

      Good luck!

      Regards,

      Peter

      (0) 
    1. Peter Boertien Post author

      Hi Juhi,

      I’m not a BW expert, but I think a BW query also returns data in a table format. So in that case it will also work here!

      Regards,

      Peter

      (0) 

Leave a Reply