How to get data from rest api to SAPUI5 mobile application by sending value of one input field using rest api

[former_member221133]

Hi All,

I want to create a basic mobile application to get user info by putting user code to one view and retrieve its info on second view using rest api.

Here is my code.

First view.js

sap.ui.jsview("uitest2.first", {

    getControllerName : function() {

        return "uitest2.first";

    },

    createContent : function(oController) {

        var Dealer = new sap.m.HBox({

            items:[

                       new sap.m.Label({

                       text: 'Dealer Code'

                   }),

                   new sap.m.Input("CUSTOMER",{

                       type: sap.m.InputType.Text,

                       placeholder: 'Enter Dealer code...'

                   }),

                   ]

            });

          var button = new sap.m.Button({

           text: "Submit",

          press: function(oEvent) {

              app = sap.ui.getCore().byId("myApp");

              app.to("idsecond1", sap.ui.getCore().byId("CUSTOMER").getValue());

            },

        });

             return new sap.m.Page({

            title: "Sales Dealer Info",

            content: [ Dealer,button

                        ]

        });

    }

});

First controller

No data

Second view.js

sap.ui.jsview("uitest2.second", {

   getControllerName : function() {

        return "uitest2.second";

    },

    createContent : function(oController) {

        this.addEventDelegate({

               onBeforeShow: function(evt) {

                  var idToRetrieve = evt.data.id;

                  data = sap.ui.getCore().byId("CUSTOMER").getValue();

               }

        });

        var table = new sap.m.Table({

              headerText: "Products",

              columns: [

                new sap.m.Column({

                  header: new sap.m.Label({text: "Name"})

                }),

                new sap.m.Column({

                  header: new sap.m.Label({text: "City"}),

                }),

                new sap.m.Column({

                  header: new sap.m.Label({text: "country"}),

                }),

                new sap.m.Column({

                  header: new sap.m.Label({text: "ISO"}),

                }),

                new sap.m.Column({

                      header: new sap.m.Label({text: "Streer"}),

                    }),

                new sap.m.Column({

                      header: new sap.m.Label({text: "Post code"}),

                    }),

                    new sap.m.Column({

                          header: new sap.m.Label({text: "Telephone"}),

                        }),

                new sap.m.Column({

                  header: new sap.m.Label({text: "Email"}),

                })

              ],

              items: {

                path: "/KEY",

                template: new sap.m.ColumnListItem({

                  cells: [

                    new sap.m.Text({                              //new sap.m.ObjectIdentifier

                      text: "{NAME}"

                    }),

                    new sap.m.Text({

                      text: "{CITY}"

                    }),

                    new sap.m.Text({

                      text: "{COUNTRY}"

                    }),

                    new sap.m.Text({

                      text: "{COUNTRYISO}"

                    }),

                    new sap.m.Text({

                         text: "{STREET}"

                    }),      

                     new sap.m.Text({

                     text: "{PST_CODE}"

                     }),

                    new sap.m.Text({

                      text: "{TELEPHONE}"

                    }),

                    new sap.m.Text({

                          text: "{EMAIL}"

                    })

                  ],

                })

              }

            });  

         return new sap.m.Page({

            title: "Title",

            showNavButton: true,

            navButtonTap:function(){

                           app = sap.ui.getCore().byId("myApp");

                           app.to("idfirst1");

            } ,

            content: [ table          

            ]

        });

    }

});

Second controller

sap.ui.controller("uitest2.second", {

    onInit: function() {

        var data = new sap.ui.model.json.JSONModel();  

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

        var oModel2 = new sap.ui.model.json.JSONModel();  

        var oParameters = {

                "COLUMN" : data,

             };

        oModel2.loadDataNew("######:8000/sap/bc/zrest_customer?sap-client=800/", handleSuccess,  oParameters, true, 'POST');

        function handleSuccess(oData){

            if(oData.success==='true'){

                  var oData2 = sap.ui.getCore().getModel().getData();

                  if(jQuery.isArray(oData2.data)){

                      oData2.data = jQuery.merge(oData2.data, oData.data);

               }else{

                      oData2.data = jQuery.merge([], oData.data);

            }

          sap.ui.getCore().getModel().setData(oData2, false);

            }          

        }

      },

});

Index file

<!DOCTYPE HTML>

<html>

    <head>

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

        <script src="resources/sap-ui-core.js"

                id="sap-ui-bootstrap"

                data-sap-ui-libs="sap.m"

                data-sap-ui-theme="sap_bluecrystal">

        </script>

        <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->

        <script>

                sap.ui.localResources("uitest2");

                var app = new sap.m.App("myApp",{initialPage:"idfirst1"});

                var page = sap.ui.view({id:"idfirst1", viewName:"uitest2.first", type:sap.ui.core.mvc.ViewType.JS});

                var page1 = sap.ui.view({id:"idsecond1", viewName:"uitest2.second", type:sap.ui.core.mvc.ViewType.JS});

                app.addPage(page).addPage(page1);

                app.placeAt("content");

        </script>

    </head>

    <body class="sapUiBody" role="application">

        <div id="content"></div>

    </body>

</html>

[former_member221133]

Hi All,

I have done handshake between rest api and sap backend with the following code and data is coming on UI backend but not on UI. Please suggest.

First view

1. sap.ui.jsview("uitest2.first", {

getControllerName : function() {

              return "uitest2.first";

       },

       createContent : function(oController) {

              var Dealer = new sap.m.HBox({ 

            items:[ 

                   new sap.m.Label({

                        text: 'Dealer Code'

                   }),

                   new sap.m.Input("CUSTOMER",{

                        type: sap.m.InputType.Text,

                        placeholder: 'Enter Dealer code...'

                   }),

                   ] 

              });

      var button = new sap.m.Button({

           text: "Submit",

           press: function(oEvent) {

                   var oParameters = {

                         "CUSTOMER" : sap.ui.getCore().getElementById('CUSTOMER').getValue(),

                     };

                 var oModel = new sap.ui.model.json.JSONModel();

                     oModel.loadData("http://vpides.abcdef.in:8000/sap/bc/zrest_customer?sap-client=800/", oParameters, true, 'GET');

                     app = sap.ui.getCore().byId("myApp");

                     app.to("idsecond1");//,

           },

      });

      return new sap.m.Page({

         title: "Sales Dealer Info",

         content: [ Dealer,button

                    ]

              });

       }

});

Second view

1. sap.ui.jsview("uitest2.second", {

       getControllerName : function() {

              return "uitest2.second";

       },

       createContent : function(oController) {

              var table = new sap.m.Table({

                    headerText: "Dealer data",

                    columns: [

                      new sap.m.Column({

                        header: new sap.m.Label({text: "Name"})

                      }),

                      new sap.m.Column({

                        header: new sap.m.Label({text: "City"}),

                      }),

                      new sap.m.Column({

                        header: new sap.m.Label({text: "country"}),

                      }),

                      new sap.m.Column({

                        header: new sap.m.Label({text: "ISO"}),

                      }),

                      new sap.m.Column({

                            header: new sap.m.Label({text: "Streer"}),

                      }),

                      new sap.m.Column({

                            header: new sap.m.Label({text: "Post code"}),

                      }),

                      new sap.m.Column({

                            header: new sap.m.Label({text: "Telephone"}),

                      }),

                      new sap.m.Column({

                            header: new sap.m.Label({text: "Email"}),

                      })

                      ],

                    items: {

path: "/KEY",

template: new sap.m.ColumnListItem({

cells: [

new sap.m.Text({                              //new sap.m.ObjectIdentifier

text: "{NAME}"

}),

new sap.m.Text({

text: "{CITY}"

}),

new sap.m.Text({

text: "{COUNTRY}"

}),

new sap.m.Text({

text: "{COUNTRYISO}"

}),

new sap.m.Text({

text: "{STREET}"

}),       

new sap.m.Text({

text: "{PST_CODE}"

}),

new sap.m.Text({

text: "{TELEPHONE}"

}),

new sap.m.Text({

text: "{EMAIL}"

})

],

})

                    }

              });   

                     return new sap.m.Page({

                           title: "Dealer Info",

                           showNavButton: true, 

                           navButtonTap:function(){ 

                                  app = sap.ui.getCore().byId("myApp"); 

                                  app.to("idfirst1"); 

                           } ,

                           content: [ table

                                    ]

                     });

              }

});

Second controller:

1. sap.ui.controller("uitest2.second", {

       onInit: function() {

              var oModel = new sap.ui.model.json.JSONModel();  

           var url = ‘'http://vpides.abcdef.in:8000/sap/bc/zrest_customer?sap-client=800/'; 

                     $.ajax({

                              url : url,

                              type:'GET',

                              success: function (data, textStatus, jqXHR) {

                                     data = JSON.parse(data);

                                     console.log(data);

                                     oModel.setData(data);

                               }, 

                     });  

       },

});

data in UI Backend

Thanks

Shubhanshu