This is a addon to my previous document titled “SAP UI5 – Calling Servlet(Returning Single Values) using JQUERY AJAX.

In my previous demo I have shown how to call servlet in SAP UI5 using JQuery and Ajax.In the previous demo servlet was returning only single value and demo was not much complex.

However in real time scenarios servlet returns multiple values and is much more complex than the earlier demo.

So In this demo I will show  how to call a servlet in SAP UI5  using JQuery Ajax  and JSON.

Pre-Requisites for this demo :  

  1. a) Eclipse  with  SAP UI5 Installed
  2. b) Tomcat server 7.0
  3. c) javax.servlet.jar
  4. d) google’s GSON library (gson-2.3.1.jar)

Step 1 :    We will be adding the new html ,view and controller to the existing project   

                 “SAPUI5_JQUERY_AJAX_DEMO” created in previous demo.

Step 2 :   Create a new view by following the below steps:

                WebContent-> sapui5_jquery_ajax_demo-> Right Click->New-> SAPUI5 Application Development->View->Next-> Enter Name “callServletJqueryAjaxJson”->select  Java Script Button->Finish


Capture_1.JPG


Capture_2.JPG




Step 3: Create a new html.

WebContent->RightClick->New->HTML File-> Enter name “index2.html”->Ensure HTML 5 is selected->Click Finish


Capture_3.JPG


Capture_4.JPG

Step 4 :  Enter the below code in “index2.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-uilibs‘ if required –>

                                <script>

                                                                sap.ui.localResources(“sapui5_jquery_ajax_demo”);

                                                                var view = sap.ui.view({id:“idcallServletJqueryAjaxJson1”, viewName:“sapui5_jquery_ajax_demo.callServletJqueryAjaxJson”, type:sap.ui.core.mvc.ViewType.JS});

                                                              

                                </script>

                              

              

                </head>

                <body class=“sapUiBody” role=“application”>

                <h1>SAP UI5 Demo – Calling servlet which returns multiple values using Jquery,Ajax and Json</h1>

<select id=“country”>

<option>select Team</option>

<option value=“India”>India Cricket Team</option>

<option value=“AUS”>Australia Cricket Team</option>

</select>

Select players:

<select id=“players”>

<option>Select state</option>

</select>

                              

                </body>

</html>

           

Step 5:  Enter the below code in  “callServletJqueryAjaxJson.view.js”

  1. sap.ui.jsview(“sapui5_jquery_ajax_demo.callServletJqueryAjaxJson”, {

                /** 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.callServletJqueryAjaxJson

                */

                getControllerName : function() {

                                return “sapui5_jquery_ajax_demo.callServletJqueryAjaxJson”;

                },

                /** 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.callServletJqueryAjaxJson

                */

                createContent : function(oController) {

                                $(document).ready(function() {

                                                $(‘#country’).change(function(event) {

                                                                var country=$(‘select#country’).val();

                                                                $.get(‘ActionServlet1’,{countryname:country},function(responseJson){

                                                                                var select=$(“#players”);

                                                                                select.find(‘option’).remove();

                                                                                $.each(responseJson,function(key,value){

                                                                                                $(‘<option>’).val(key).text(value).appendTo(select);

                                                                                });

                                                                              

                                                                });

                                                });

                                });

                }

});

               

Step 6:  Import the jars  “gson-2.3.1.jar”  and “javax.servlet.jar” into lib folder.

Simplest way is to drag and drop above jar files in the folder WEB-INF->lib-> Select “Copy Files” option and select ok.

Capture_5.JPG

Step 7:  Create class file .

Src->New->Class->Enter name as “ActionServlet1”  and package as “ajaxdemo”->Click Finish.

Enter the below code in ActionServlet1:

package ajaxdemo;

import java.io.IOException;

import java.util.LinkedHashMap;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(“/ActionServlet1”)

public class ActionServlet1 extends HttpServlet {

                 private static final long serialVersionUID = 1L;

                

                    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                

                               

                       String country=request.getParameter(“countryname”);

                      

                       Map<String,String> ind=new LinkedHashMap<String,String>();

                       ind.put(“1”, “Sachin”);

                       ind.put(“2”, “Yuvraj”);

                       ind.put(“3”, “Kohli”);

                      

                       Map<String,String> aus=new LinkedHashMap<String,String>();

                       aus.put(“1”, “Ponting”);

                       aus.put(“2”, “Warne”);

                       aus.put(“3”, “Clarke”);           

                       String json=null;

                       if(country.equals(“India”)){

                                   json = new com.google.gson.Gson().toJson(ind);

                       }else if(country.equals(“AUS”)){

                                   json = new com.google.gson.Gson().toJson(aus);

                       }              

                       response.setContentType(“application/json”);

response.setCharacterEncoding(“UTF-8”);

                       response.getWriter().write(json);       

                    }

}

Capture_6.JPG

Step 8 :  Run the application on Tomcat Server 7.

Right click on “index2.html”->Run On Server->Select Existing Configured Tomcat Server.



Capture_7.JPG


Capture_8.JPG


Capture_9.JPG


Capture_10.JPG

Capture_11.JPG


To report this post you need to login first.

2 Comments

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

  1. Robin van het Hof

    Although I applaud the intention, I don’t see any use of the SAPUI5 library:

    • no use of SAPUI5 controls (and no use of MVC model binding, which would be a great case), but standard HTML controls instead
    • extensive use of jQuery DOM finders (a call to $(document).ready(…), really??)

    I would much rather see how you used (for instance) JSONModel where you request the REST API based on what is selected in a ‘sap.m.Select’ control, and return the response into that JSONModel to populate the second ‘sap.m.Select’ control again via data binding

    (0) 

Leave a Reply