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
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.
{
"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
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);
}
| }); |
});