Hi Experts.
I am new to the world of SAPUI5, and I have a question regarding the handling of data in json.
I have my next code and I would like to know how I can make basic queries to json, such as:
How to know the number of records in json?
How to display a json value?
How to loop to json records?
If you can C.R.U.D records in the .json by code (modify the string in .json by either adding, removing and modifying characters)? Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{ "sap.ui.demo.wt": "./" }'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("login");
var app = new sap.m.App({initialPage:"idLogin1"});
var page = sap.ui.view({id:"idLogin1", viewName:"login.Login", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
<style>
.myimage{float:right !important top !10px; width:40px; height:30px;}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Login.controllers.js
//jQuery.sap.require("sap.ui.demo.myFiori.util.Formatter");
jQuery.sap.require("sap.m.MessageBox");
jQuery.sap.require("sap.m.MessageToast");
sap.ui.controller("login.Login", {
onInit: function(oEvent) {
// set explored app's demo model on this sample
var oModel = new sap.ui.model.json.JSONModel("model/Users.json");
oModel.loadData("model/Users.json");
oModel.setData("model/Users.json");
sap.ui.getCore().setModel(oModel);
this.getView().setModel(oModel);
},
onBeforeRendering: function() {
this.getView().byId("idLogo").addStyleClass("myimage");
},
handleApproveLogin: function (evt) {
var userName = this.byId('idUser').getValue();
var userPasword = this.byId('idPass').getValue();
var userMsg = "Ingrese un usuario";
var passwordMsg = "Ingrese ana Clave";
var oModel = new sap.ui.model.json.JSONModel("model/Users.json");
var oData = oModel.getProperty("/menu");
if ( userName == ""){
sap.m.MessageToast.show( userMsg,{
duration: 1000,
width: "15em",
my: "center bottom",
at: "center bottom",
of: window,
offset: "0 0",
collision: "fit fit",
onClose: null,
autoClose: true
animationTimingFunction: "ease", animationDuration: 1000,
closeOnBrowserNavigation: true
});
return false;
}
else if ( userPasword == ""){
sap.m.MessageToast.show( passwordMsg,{
duration: 1000,
width: "15em",
my: "center bottom",
at: "center bottom",
of: window,
offset: "0 0",
collision: "fit fit",
onClose: null,
autoClose: true,
animationTimingFunction: "ease",
animationDuration: 1000,
closeOnBrowserNavigation: true
});
return false;
}
else{
// var parsed = JSON.parse("model/Users.json");
var users = oModel.getProperty("/User");
var Password;
var boolean;
// var Password = $.each(users, function (i, v){
// if (v.UserId == userName ){
// return v.Password;
// }
//
// });
for (var i in users ){
if(users[i].UserId == userName ){
boolean = true;
Password = users[i].Password;
}
else{
boolean = false;
Password = null;
}
}
if( Password == userPasword && boolean == true ){
sap.m.MessageToast.show( "Acceso Correcto",{
duration: 1000,
width: "15em",
my: "center bottom",
at: "center bottom",
of: window,
offset: "0 0",
collision: "fit fit",
onClose: null,
autoClose: true,
animationTimingFunction: "ease",
animationDuration: 1000,
closeOnBrowserNavigation: true
});
}else{
sap.m.MessageToast.show( "Usuario no Existe",{
duration: 1000,
width: "20em",
my: "center bottom",
at: "center bottom",
of: window,
offset: "0 0",
collision: "fit fit",
onClose: null,
autoClose: true,
animationTimingFunction: "ease",
animationDuration: 1000,
closeOnBrowserNavigation: true
});
}
}
}
});
Login.view.xml
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:form="sap.ui.commons.form"
controllerName="login.Login"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Login">
<customHeader>
<Bar>
<contentMiddle>
<Label text="Login"/>
</contentMiddle>
<contentRight>
<Label text="" />
<Image id="idLogo" alt="Logo" src="Image/logo.png" />
</contentRight>
</Bar>
</customHeader>
<content>
<form:SimpleForm maxContainerCols="3" layaou="ResponsiveLayout" >
<form:title>
<core:Title></core:Title>
</form:title>
<form:content>
<Label text="Usuario" required="true" design="Bold"/>
<Input id="idUser" name="User" palceholder="Ingrese el Usuario" width="50%" required="true">
</Input>
<Label text="Clave" required="true" design="Bold"/>
<Input id="idPass" name="Pasword" palceholder="Ingrese la clave" width="50%" required="true"
type="Password" >
</Input>
<Label text=""/>
<Button id="logBtn" text="Login" width="50%" design="Bold" press="handleApproveLogin"></Button>
</form:content>
<form:title>
<core:Title></core:Title>
</form:title>
</form:SimpleForm>
</content>
<footer>
<Bar>
<contentLeft>
<Label text="@SAP 2017" />
</contentLeft>
</Bar>
</footer>
</Page>
</core:View>
User.json
{
"User": [{
"Name": "Miguel",
"UserId": "Fare",
"Password": "00000"
},
{
"Name": "Jose",
"UserId": "Jose20",
"Password": "12345"
},
{
"Name": "Luis60",
"UserId": "Luis60",
"Password": "67890"
}
]
}
It is something I still do not understand well and I have not been able to do for more code that I have reviewed. Thanks in advance, I hope you can help me.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.