Objective: To create a web-service using server side Java script and then consume it using a UI5 application.

User will enter the “StateName” in the UI. And the application will return the count of customers in that particular state. For example, I have input “NY” ( New York) as my state and hit the “Submit” button. And the appliation tells me that there are 226 customers in New York.

POC_XSJS.jpg

What are the Technical components?

HANA Rev 74, HANA Studio: 1.0.70; Server side: Java Script with JSON format output; Client Side: UI5 consuming the service using $.jetJSON method

Prerequisies:

I have created an attibute view for Customer master  on HANA and have queried that in my web-service. I took the “stateID” as a URL parameter and used it to get the customer count for that particular state.

How does it work?

Created 2 projects. The first one is a XSJS project which has the web-service. The second one is a UI5 application project. When the user hits the submit button, the controller in the UI project. calls the web-service in the XSJS project. It also passes the state-code as a parameter during that call. The state-code is retrieved from the UI text field.

Finally, once the web-serice returns the result, the controller sets the other text field with the customer count.

Please find below for the Project details.

Regards,

Kowshik

Project Details:

Prerequisite:

You would need to have a customer table / attribute view which should have a “STATECODE” field. I have queried the below attribute view in my XSJS service to get the Customer count.

AT_CUSTOMER.jpg

Step  1 ) Created a XSJS Project: Created a service called “getCustomer.xsjs”

function getCount() {

var conn = $.db.getConnection();

var state = $.request.parameters.get(“stateID”);

var statement = ‘SELECT COUNT(1)’ + ‘FROM \”_SYS_BIC\”.\”xxxxxx.xxxxxx/AT_CUSTOMER\” WHERE \”STATECODE\” = ?’;

$.response.contentType=“application/json”;

try{

var pstmt = conn.prepareStatement(statement);

  1. pstmt.setString(1,state);

var result = pstmt.executeQuery();

if(result.next()){

      

var oResult = ‘{“count”:’ + ‘”‘ + result.getInteger(1) + ‘”}’;      

$.response.setBody(oResult);

      

$.response.status = $.net.http.OK;

}

} catch (ex) {

       $.response.setBody(ex.toString());

      

} finally{

       if (conn) {

              conn.close();

       }

}

}

getCount();

The output is in JSON format. This service will take the “stateID” as a parameter in the URL and return back the count.

 

Step 2) Created a UI Application project. It created the “index.html” file. I created the views and controller as:

  1. HelloWorld.view.js
  2. HelloWorld.controller.js

“Index.html” referenced the view “HelloWorld.view.js”.

On hitting the button, the controller calls the webservice from the previous project. It passes the state from the UI as a parameter to the URL.

On getting the result, controller set the customer count in the test field.

Here is the code for “index.html”.

<!DOCTYPE HTML>

<html>

        <head>

                        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

                        <meta http-equiv=’Content-Type’ content=’text/html;charset=UTF-8’/>

                        <link rel=”stylesheet” type=”text/css” href=”CSSFOLDER/mystyle.css”>

                       

                        <script src=”/sap/ui5/1/resources/sap-ui-core.js”

                                                        id=”sap-ui-bootstrap”

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

                                                        data-sap-ui-theme=”sap_goldreflection”>

                        </script>

                        <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui-libs’ if required –>

                        <script>

                                                        sap.ui.localResources(“test_ui5”);

                                                        var view = sap.ui.view({id:”idHelloWorld1″, viewName:”test_ui5.HelloWorld”, type:sap.ui.core.mvc.ViewType.JS});

                                                        view.placeAt(“content”);

                        </script>

        </head>

        <body class=”sapUiBody”>

         <div id=”content”></div>

        </body>

</html>

 

Code for HelloWorld.view.js:

  1. sap.ui.jsview(“test_ui5.HelloWorld”, {

        /** Specifies the Controller belonging to this View.

        * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

        * @memberOf test_ui5.HelloWorld

        */

        getControllerName : function() {

                        return “test_ui5.HelloWorld”;

        },

        /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

        * Since the Controller is given to this method, its event handlers can be attached right away.

        * @memberOf test_ui5.HelloWorld

        */

        createContent : function(oController) {

                       

                        // create a MatrixLayout with defined rows and cells

                        var oLayout = new sap.ui.commons.layout.MatrixLayout({

                                        id : ‘matrix1’,

                                        layoutFixed : true,

                                        columns : 3,

                                        width : ‘600px’,

                                        widths : [‘100px’, ‘200px’, ‘300px’] });

                       

                        // 1st row

                       

                        var oRow = new sap.ui.commons.layout.MatrixLayoutRow({

                                        id : ‘Row-1’,

                                        height: ’40px’ });

         oLayout.addRow(oRow);

                       

                        // 2nd row

                       

                        var oLabel = new sap.ui.commons.Label(“stateId”,{text:”State ID:”, labelFor: oText});

                        var oText = new sap.ui.commons.TextField(“stateField”, {value:”CA”});

                        var oButton = new sap.ui.commons.Button(“button1″,{text:”Submit”, tooltip:”Get Customer”});

                        var oHLayout = new sap.ui.layout.HorizontalLayout(“Layout1”,{content: [oLabel, oText, oButton]});

                       

                        oButton.attachPress(oController.doIt);

                       

                        var oCell = new sap.ui.commons.layout.MatrixLayoutCell({

                                        id : ‘Cell-2-0’,

                                        colSpan : 3 });

                       

                        oCell.addContent(oHLayout);

                       

                        oRow = new sap.ui.commons.layout.MatrixLayoutRow({

                                        id : ‘Row-2’,

                                        height: ’50px’ });

                       

                        oRow.addCell(oCell);

                       

                        oLayout.addRow(oRow);

                       

                       

                        // 3rd row

                       

                        oTextArea = new sap.ui.commons.TextArea(“countCustomer”);

                        oTextArea.setRows(3);

                       

                        oTextArea.setWidth(‘300px’);

                       

                        oCell = new sap.ui.commons.layout.MatrixLayoutCell({

                                        id : ‘Cell-3-0’,

                                        colSpan : 3 });

                       

                        oCell.addContent(oTextArea);

                       

                        oRow = new sap.ui.commons.layout.MatrixLayoutRow({

                                        id : ‘Row-3’,

                                        height: ‘100px’ });

                       

                        oRow.addCell(oCell);

                       

                        oLayout.addRow(oRow);

                       

            

                        return oLayout;

        }

});

Code for HelloWorld.controller.js:

  1. sap.ui.controller(“test_ui5.HelloWorld”, {

doIt : function(oEvent) {

             

//      alert(oEvent.getSource().getId() + ” does it!”);

      

       var oState = $(“#stateField”).val();      

      

       var uRL =  ‘/xxxxx/xxxxxxx/xxxxx/xxxxxxx/service/getCustomer.xsjs?stateID=’+oState;

  

       $.getJSON(uRL,function(result,status){

       oOutput = ‘There are ‘ + result.count + ‘ customers in ‘ + oState;      

       $(“#countCustomer”).val(oOutput);

       })

       .fail(function(){

       alert(“failed”);      

       });

      

   

    

            }

});

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply