Skip to Content

Hello Everyone,

In this blog i will tell you how to read data from a Gateway Service using AJAX call.

VIEW :-

//At first we will define the data array. I will tell you how we are going to use this data array.

Data =  [{

           Serial_Num : “”,

           Item_Number : “”

           Comp_Number : “”

           Comp_Desc : “”,

           Comp_Qty : “”,

           UOM : “”,

           Item_Category : “”,

           Item_Text : “”,

           Sort_String : “”,

           Storage_Loc : “”,

           Ph_Assign : “”,

           Alt_Item_Grp : “”,

           Priority : “”,

           Mfct_Code : “”,

           UsageProb : “”,

           Alt_BOM : “”

}];

//Then we will define the Table

oTable = new sap.ui.table.Table(“oTable”, {

                                     title : “BOM Items”,

                                         visibleRowCount : 10,

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

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

                                         width : “auto”

});

//Then we will add columns to our table

oTable.addColumn(new sap.ui.table.Column(“ColserialNumber”, {

                          label : “Sl.No.”,

                          width : “50px”,

                          template : new sap.ui.commons.TextView(“serialNumber”,{

                                    enabled : false

                          }).bindProperty(“text”,”Serial_Num”),

                    resizable : false

                }));

In a similar way i have added 10 more columns to my table based on my requirement.

Now let us see how i have used the data array in my table columns.

As you can see from the above piece of code that i have used .bindProperty(), and inside this bindProperty i am giving the properties “text” and “Serial_Num”.

The “text” is the property of the type of ui element we are using. Here i have used TextView so i have given property as “text”. If you want to use any ValueHolder UI element then you have to give property as “value” in place of “text”.

The “Serial_Num” is the key i have used in my data array.

Now,

We will set the model to the table so that we can read data from Gatewat service.

Controller : –

// Defining the model

  var oModel = new sap.ui.model.json.JSONModel();    //Defining a JSON Model

                              sap.ui.getCore().setModel(oModel );

                              oModel .setData({modelData : Data});                      //Setting the data array defined by me to the model

  oTable.setModel(oModel );                                     // I have defined the instance of table(oTable) as global

  oTable.bindRows(“/modelData”);                             //Performing bindRows(“/modelData”), so that data gets bind to the corresponding row.

//After this making an ajax call to bind the data coming from service with our custom defined data array which is again bound to the table.

$.ajax({

                                  type: ‘GET’,

                                  url : “your_service_url”,

                                  dataType: ‘json’,

                                  success: function(data,textStatus,jqXHR) {

                                                  console.log(data);                       

     },

     error : function(jqXHR,textStatus,errorThrown) {

     }

Here, console.log() is a printing statement. I am trying to print the response which i am getting from from the service in the console which looks something like this

/wp-content/uploads/2013/09/console_278317.png

Now, i will show you how i will map the data coming from service with my data array.

$.ajax({

                                  type: ‘GET’,

                                  url : “your_service_url”,

                                  dataType: ‘json’,

                                  success: function(data,textStatus,jqXHR) {

                                                  console.log(data);                       

                                        for(var i = 0 ; i < data.d.results.length ; i++)

                                                                                          {

                                                  Data[i].Comp_Desc= data.d.results[i].Comp_Desc;

                                                  Data[i].Comp_Qty= data.d.results[i].Comp_Qty;

                                                  Data[i].Comp_Number = data.d.results[i].Comp_Number ;

                                             }   

                                        oTable.bindRows(“/modelData”);

     },

     error : function(jqXHR,textStatus,errorThrown) {

     }

Now let us see what i am doing in the success of the Ajax call.

Here i am running a loop on the length of the data, which i am getting from service.

Then manually setting each of the properties which was defined in the data array to the data coming from backend,

eg:-  Data[i].Comp_Desc= data.d.results[i].Comp_Desc;

You must be thinking what is this data.d.results,

/wp-content/uploads/2013/09/console2_278363.png

You can see in the screenshot above that inside the Object node(which is nothing but the data node), we have child node ‘d’, and this child node again has another child node ‘results’, which contains the actual data.

So in order to fetch the data we are traversing through this tree using data.d.results.

Now again there can be multiple number of data coming from backend which will bind to the rows of our table. So we are running a loop on data.d.results.length so that different sets of data are mapped to corresponding rows.

We are done now.

Let’s see the result.

You will get something like this,

/wp-content/uploads/2013/09/console3_278364.png

Points to remember : –

1. Define the data array based on the response you are getting from the service, try to give the same name for better understanding.

2. Make sure that in each bindProperty you are doing, correct property is binded, else you will get unexpected results.

3. Whenever we will fire a read service then automatically this bindProperty() will map,for example “Serial_Num” key to the column to which it is binded.

4. Make sure the data array is set to the model and the model is set to the table.

5. Do not forget to do bindRows, in this case oTable.bindRows(“/modelData”);

6. Before mapping the data first take a look how response is coming from service, use console.log(data) for this.

Hope this blog will help.

There may be different ways of reading data from Gateway service.

But this suits me well. 🙂

Any feedback is welcomed. 🙂

Thanks.

To report this post you need to login first.

9 Comments

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

  1. sridevi garapati

    Hi,

    I am using Odata model .In that I am using ajax call to send the username and password to the service dynamically. When I enter valid inputs it goes to the success function and get the data.

    When I enter wrong inputs I am getting browser related popup first, and when I cancel that popup box I am getting error which is in error function.

    Can we prevent that Popup box?

    (0) 
    1. Sharique Nasser Post author

      Hi,

      Few questions i wanted to ask…

      1. When the Popup Box is coming?

      2. What is this browser related Popup?

      Whenever you fire a service it will need a basic authentication.

      The oData Model provides us to pass the username and password along with the service url as parameters.

      If you are running your app through portal then you need SingleSignOn(SSO). Here once you are logged-in into the portal then that id and password will be used throughout. Once SSO is done then you will not get any Popup for authentication.

      (0) 
      1. sridevi garapati

        Hi,

        In my application I don’t want to pass that username and password  values as static in URL.

        So I am passing that username and password fields to the oData Model dynamically from the login form.When I enter wrong inputs it will ask the basic authentication.

        I don’t have any idea on SSO . That’s why I tried like this using login form.

        Can we pass that that values dynamically when we are using SSO?

        Could you please suggest me how to do SSO using SAPUI5 and oData model.

        Thanks&Regards

        Sridevi

        (0) 
        1. Sharique Nasser Post author

          Hi,

          What i am getting is that you already have login form from where you are fetching the userid and password entered by the user and passing it.

          Can you please explain in more detail what exactly you want, because what i got is if you enter wrong username and password it will throw error, which is correct.

          So where do you want to prevent your popup box?

          (0) 
          1. sridevi garapati

            Hi,

            Thanks for giving reply very soon.

            In my application just I created one login form .From this I am sending username and password fields to the service using ajax request when I click on login Button in controller file .

            Please follow the below code

            1. login : function(oEvent) {
            2.  
            3.                                                             jQuery.sap.require(“sap.ui.model.odata.datajs”);
            4.                                                             var serviceURI = “http://xxxx:8000/sap/opu/odata/sap/ZPROJ_APPRAISAL_FORM_SRV“;
            5. //getting data from Login form
            6.                                                             var username = sap.ui.getCore().getControl(“userid”) .getValue();
            7.                                                             var password = sap.ui.getCore().getControl(“pwdid”) .getValue();
            8.                                                             var request = {
            9.       headers : {
            10.                          “X-Requested-With” : “XMLHttpRequest”,
            11.                           “Content-Type” : “application/atom+xml”,
            12.                           “DataServiceVersion” : “2.0”,

                                              “X-CSRF-Token” : “Fetch”

            1.                         },
            2.        requestUri : serviceURI,
            3.        method : “GET”,
            4.         user : username,
            5.         password : password
            6.      };
            7.        OData.request(request, function(data) {
            8.                             alert(“success”);
            9.                               console.log(data);
            10.            }, function(err) {
            11.                     alert(‘Error Code:’ + err.response.statusCode);
            12.                 
            13.                                                             });
            14.                                                   }


            In this way I am sending that  values to the  server. When I enter valid username and password the control goes to success function and we can get the data.

            But when user enter wrong input then we can get the popup like below

            /wp-content/uploads/2013/09/loginpage_279147.jpg

            When I click on cancel button of the popup then the control goes to the error function and I am getting that error status code.

            My intention is to prevent that popup box .

            Please help me to solve this issue.

            Thanks&Regards

            sridevi

            (0) 
            1. Manoj Chaurasiya

              Hi Sridevi,

              This popup comes when your NWG services ask default authorization. Remove authorization required.Do it via services response.

              This way you can achieve this task.

              Use Ajax complete and error method to handle your response.

              http://api.jquery.com/jQuery.ajax/

              This Popup is system generated, For this you need to set properties when you produce this service.

              I Thinks it’s help you

              Regards

              Manoj

              (0) 
              1. sridevi garapati

                Hi Manoj,

                Coluld you please suggest me how to remove default authorization and do it via response in Gateway.

                If possible please send me links related to this.

                Thanks&Regards

                Sridevi

                (0) 
  2. Jaya Bharath S

    Hi Sharique,

    Nicely explained 🙂

    I would like to do the same functionality(i.e. looking my data to be displayed as same output) with HANA DB & the data from hana db will be fetched using XSJS. How can i pass AJAX call to XSJS & get the data back to UI5 and then place it in a table/overlay container.

    Do you have any ideas, to share a blog in similar way. that will help us in many ways.

    Thanks

    Bharath. S

    (0) 

Leave a Reply