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.
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.
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);
- 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:
- HelloWorld.view.js
- 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:
- 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:
- 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");
});
}
});
- SAP Managed Tags:
