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>