Skip to Content
0

SAPUI5 json values display

Aug 15, 2017 at 03:34 PM

104

avatar image
Former Member

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Ravi kiran R Aug 16, 2017 at 01:55 PM
0

Hi Miguel,

Please find the attachment, with commented lines for your reference, in Login.controller

Regards,

Ravikiran


Share
10 |10000 characters needed characters left characters exceeded
Joseph BERTHE Sep 06, 2017 at 09:00 PM
0

please find some information into that blog :

Playing with the model on SAP UI5

Share
10 |10000 characters needed characters left characters exceeded