Skip to Content

In Part 1 of this blog I have discussed on how to create a custom odata Service using.NET

Mobile Application using WEBIDE with custom SQL C# OData Service  – Part1

In this blog we will use the Odata Service developed in part 1 running on your laptop to write a simple Application that consists of

1) Login Screen – Northwind Employee screen – The userName = Employee FirstName and Password = Last Name

2) On Success Full Login display the employee info of the Login User – There is a button On Press display Employee List Page

The steps are create application, add routing, add datasource, add the pages, configure routing (manifest.json)

In Part 1 we create a Desination chinHook that referes to the custom Odata Service we  will use this – When Completed the application will look as follows

/wp-content/uploads/2016/04/apppage_922285.png

1) Login to SAP WEBIDE and Create SAPUI5 Application – Give the name as Northwind1 and name space as com.sap.northwind1 – on the View Creation Page give the name Login – this will create a Login.view.xml view and the corresponding Controller.  During the Creation Process you can choose to check the box for Mobile apps – If you have configure HAT you can later set the devicee configuration and run it on the mobile device

2) open the Login.view.xml and give an id <App id=”app”> – This required so that we can configure the app to make this first default page

3) Open the Login view in the designer and add couple of input controls and button for Login as show below – Select the Login Button and choose Events from the right and add event  onLoginPress – This creates an empty function the corresponding controller file

4) Right click on webapp folder and add two more Ui5View name it Employee and EmployeeList – In the Employee Page add couple of Lables and bind this

to FirstName,LastName and address fields – Add a button and Press Event to go to the EmplistPage. In the EmployeeList view drag list and give it id as Emplist and map the listitem to some of the employee fields that you would like to List – Before you do this you choose the Datasource for the view as Employee from the dropdown.

5) Right Click on the webapp Folder and an odata Service – Make sure that HANA cloud connector is running  This creates and entry in the neo-app.json file.

Untitled.png

{

      “path”: “/destinations/chinHook”,

      “target”: {

        “type”: “destination”,

        “name”: “chinHook”

      },

      “description”: “chinHook”

    },

5) We will first enable routing  to do this open the manifest.json in code and make sure you the following lines below models

models”: {

  “i18n”: {

  “type”: “sap.ui.model.resource.ResourceModel”,

  “settings”: {

  “bundleName”: “com.sap.northwind1.i18n.i18n”

  }

  }

  },  // new part to be added to the file

  “routing”: {

  “config”: {

  “routerClass”: “sap.m.routing.Router”,

  “viewType”: “XML”,

  “viewPath”: “com.sap.northwind1.view”,

  “controlId”: “app”,

  “controlAggregation”: “pages”,

  “transition”: “slide”

  },

6) open component.js and in the init function add the line below to initialize the router

this.getRouter().initialize();

7) Right Click manifest.json -open in the designer and make you add the following shown below – Login view is Level 1, Employee is Level 2 and EmployeeList is level3

Untitled.png

8) open Login.controller.js an and the code given bleow

sap.ui.define([“sap/ui/core/mvc/Controller”], function (Controller) {

  “use strict”;

  return Controller.extend(“com.sap.northwind1.controller.Login”, {

   getRouter : function () {

  return sap.ui.core.UIComponent.getRouterFor(this);

  },

    onLoginPress: function () {

           // this.getRouter().getTargets().display(“employee”);

      

             //  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

             //  oRouter.navTo(“employeesList”);

            var ur =  this.getView().byId(“txtUserName”)._lastValue;  //replace the id by your ides

            var pa =  this.getView().byId(“txtPassword”)._lastValue;

            var url = “/destinations/chinHook/NorthData/NorthwindData.svc/Employees?”;

            var params = “$filter=LastName eq ‘” + pa + “‘ & FirstName = ‘” + ur + “‘&format=JSON”;

            var gg = this;

            url = url + params;

            $.ajax({

  url:url,

  dataType: ‘json’,

  success: function(response) {

   var x = response.value.length;

             if(  x > 0 ) {

         var empid =  response.value[0][“EmployeeID”];

    

    

         //gg.getRouter().navTo(“employee”, {

         //  EmployeeID: empid

         //});

    

          gg.getRouter().navTo(“employee”,{

      employeeId : empid

  });

        }

        else {

        alert(“Please Check username and password and retry”);

        }

  },

  error: function(XHR, textStatus, errorThrown){

                   alert(textStatus + “:” + errorThrown);

                }

  });

  }

  });

});

9)Open the Employee,controller.js and add the following

sap.ui.define([“sap/ui/core/mvc/Controller”,

  “sap/ui/model/odata/ODataModel”

], function (Controller,ODataModel) {

  “use strict”;

  return Controller.extend(“com.sap.northwind1.controller.Employee”, {

   getRouter : function () {

  return sap.ui.core.UIComponent.getRouterFor(this);

  },

  onInit: function () {

        //

          var sUrl  = “/destinations/chinHook/NorthData/NorthwindData.svc/”;

    var oModel = new ODataModel(sUrl);

        this.getView().setModel(oModel);

        var oRouter = this.getRouter();

        oRouter.getRoute(“employee”).attachMatched(this._onRouteMatched, this);

},
_onRouteMatched : function (oEvent) {
alert(‘on matched’);
var oArgs, oView;
oArgs = oEvent.getParameter(“arguments”);
oView = this.getView();
// var path =  “Employees(” + oArgs.EmployeeID + “)”;
//var path =  “Employees(” + “1” + “)”;
var path = “/Employees(” + oArgs.employeeId + “)”;

        

oView.bindElement({
path : “/Employees(” + oArgs.employeeId + “)”,
events : {
  //change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
                    
                                                                                oView.setBusy(false);
}
}
});
},

//,

/**
*@memberOf com.sap.northwind1.controller.Employee
*/

onEmpListPressed: function () {

//This code was generated by the layout editor.

        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

         oRouter.navTo(“employeesList”);

}
});

});

10) Open The EmployeeList.controller.js and add the following

sap.ui.define([

  “sap/ui/core/mvc/Controller”,

  “sap/ui/model/odata/ODataModel”

], function (Controller, ODataModel) {

  “use strict”;

  return Controller.extend(“com.sap.northwind1.controller.EmployeeList”, {

  getRouter: function () {

  return sap.ui.core.UIComponent.getRouterFor(this);

  },

  onInit: function () {

   var sUrl = “/destinations/chinHook/NorthData/NorthwindData.svc/”;

   //var sUrl = “/destinations/Northwind/V2/Northwind/Northwind.svc/”;

    var oModel = new ODataModel(sUrl);

        this.getView().setModel(oModel);

  }

});

});

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply