SAP UI 5 – CALLING WEB SERVICE.
SAP UI 5 – CALLING WEB SERVICE.
In this demo I would like to show how to call a Web Service in SAP UI5 .
I will pass store number and article number to webservice and webservice returns if the article is listed or not.
Before proceeding to this demo tutorial I would suggest to go through the below links where in I explained how to Call a Servlet using JQUERY,AJAX and JSON.
http://scn.sap.com/docs/DOC-73103
Step1 : I have already shown how to create a Dynamic Web Project in the above link.So I will be adding new html,view and controller to the existing project.
Step2 :To the existing project “SAPUI5_JQUERY_AJAX_DEMO” , Add a new view as below:
WebContent-> sapui5_jquery_ajax_demo-> Right Click->New-> SAPUI5 Application Development->View->Next-> Enter Name “Call_Web_Service”->select Java Script Button->Finish
Step 3: Create a new html.
WebContent->RightClick->New->HTML File-> Enter name “index6.html”->Ensure HTML 5 is selected->Click Finish
Step 4: Enter the below code in “index6.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’/>
<script src=“resources/sap-ui-core.js”
id=“sap-ui-bootstrap”
data-sap-ui-libs=“sap.ui.commons”
data-sap-ui-theme=“sap_bluecrystal”>
</script>
<!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui–libs‘ if required –>
<script>
sap.ui.localResources(“sapui5_jquery_ajax_demo”);
var view = sap.ui.view({id:“idCall_Web_Service1”, viewName:“sapui5_jquery_ajax_demo.Call_Web_Service”, type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt(“jqueryajaxGetUserServletResponse”);
</script>
</head>
<body>
<h1>SAP UI5 Demo – Calling Webservice </h1>:
<h1>Check if article of a particular store is listed or not </h1>
<form>
<br>Enter Store Number: <input type=“text” id=“storeNumber” /></br>
<br>Enter Article Number: <input type=“text” id=“article” /></br>
<br> <input type=“button” value=“Check” id=“checkWS”/></br>
</form>
<br>
<br>
<div id=“getWSResponse”></div>
</body>
</html>
Step 5: Enter the below code in “Call_Web_Service.view.js”
- sap.ui.jsview(“sapui5_jquery_ajax_demo.Call_Web_Service”, {
/** 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 sapui5_jquery_ajax_demo.Call_Web_Service
*/
getControllerName : function() {
return “sapui5_jquery_ajax_demo.Call_Web_Service”;
},
/** 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 sapui5_jquery_ajax_demo.Call_Web_Service
*/
createContent : function(oController) {
$(document).ready(function() {
$(“#checkWS”).click(function(event) {
var storeNumber = $(‘#storeNumber’).val();
var article = $(‘#article’).val();
$.get(‘CallWebService’, {
storeNumber : storeNumber,
article : article,
}, function(responseText) {
$(‘#getWSResponse’).text(responseText);
});
});
});
}
});
Step 6: Import the jar file “javax.servlet.jar” into WebContent->WEB-INF->lib
Simplest way to do this is to drag and drop “javax.servlet.jar” file into lib directory.Select “Copy Files” an press “OK
Step 7 : In Src folder create a class file “CallWebService.java” in package “ajaxdemo”. Enter the following code:
package ajaxdemo;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;
import org.xml.sax.InputSource;
@WebServlet(“/CallWebService”)
public class CallWebService extends HttpServlet {
private String url=null;
private String authenticateStr=null;
private String soapData=null;
private String soapAction=null;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
String storeNumber = request.getParameter(“storeNumber”).trim();
String article = request.getParameter(“article”).trim();
HttpURLConnection conn = null;
String wsResponse = null;
try
{
soapData=”<soapenv:Envelope xmlns:soapenv=\”http://schemas.xmlsoap.org/soap/envelope/\” xmlns:urn=\”urn:7eleven.com:iris_retail:articlelisting\”>”+
“<soapenv:Header/><soapenv:Body><urn:MT_ArticleListingStatusRequest><!–Optional:–><Request>”+
“<Store>”+storeNumber+”</Store>”+
“<!–Zero or more repetitions:–><Item><!–Optional:–>”+
“<Article>”+article+”</Article>”+
“</Item></Request></urn:MT_ArticleListingStatusRequest></soapenv:Body></soapenv:Envelope>”;
conn = (HttpURLConnection)new URL(url).openConnection();
conn.setRequestProperty(“Accept-Encoding”, “gzip,deflate”);
conn.setRequestProperty(“Content-Type”, “text/xml;charset=UTF-8”);
conn.setRequestProperty(“authorization”, “Basic RENfVkFSVU46bWFyMjAxNiM=”);
conn.setRequestProperty(“Accept”, “text/xml”);
conn.setRequestProperty(“SOAPAction”,”http://sap.com/xi/WebService/soap1.1“);
conn.setRequestMethod(“POST”);
conn.setDoOutput(true);
conn.setRequestProperty(“Content-Length”, Integer.toString(soapData.length()));
// write the body of the request…
DataOutputStream dos = new DataOutputStream(conn.getOutputStream());
dos.writeBytes(soapData.toString()); dos.flush(); dos.close();
int status = conn.getResponseCode();
if (status != 201 && status != 200)
{
System.out.println(“Error calling webservice, status”+status);
}
// Read the response
InputStreamReader isr = new InputStreamReader(conn.getInputStream());
BufferedReader br = new BufferedReader(isr);
StringBuilder resp = new StringBuilder();
String line1 = null;
while ((line1 = br.readLine()) != null)
resp.append(line1);
// display results
//create instance of document builder factory
DocumentBuilderFactory domBuilderFactory=DocumentBuilderFactory.newInstance();
//from document builder factory build dom builder.
DocumentBuilder domBuilder=domBuilderFactory.newDocumentBuilder();
//from document builder,parse the input file
Document dom=domBuilder.parse(new InputSource(new ByteArrayInputStream(resp.toString().getBytes(“utf-8”))));
//get all “Transactions” nodes from doc
NodeList responseList= dom.getElementsByTagName(“Response”);
String endResult=((Element)(responseList.item(0))).getElementsByTagName(“Listing”).item(0).getFirstChild().getTextContent();
String temp=””;
if(endResult.equals(“Yes”))
{
temp= “Article number : “+article+” for store Number : “+storeNumber+ ” is Listed”;
}else if(endResult.equals(“No”)){
temp= “Article number : “+article+” for store Number : “+storeNumber+ ” is not Listed”;
}
response.getWriter().write(temp);
}catch(Exception e){
e.printStackTrace();
}
}
}
Step 7 : Now deploy the project on to Tomcat server. Right click on “index5.html” -> “Run On Server”->Choose “Tomcat Server 7.0” ->Click Finish
Click on button “Check” and below screen will be displayed
