cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Uncaught type Error: unable to Cannot read property getValue() of undefined.

Go to solution
former_member573574
Explorer

on ‎02-27-2019 10:58 AM

0 Kudos

Hi folks,

I want to create the following mentioned scenario with the use of SAP UI5 framework (on SAP Web IDE):

  • A screen with ‘User Name’ & ‘Password’ fields and a ‘Verify’ button.
  • When user clicks on the ‘Verify’ button, I want to validate the entered values with my name and surname. If the user name and password matches with what I have written inside the code, it should give an alert message stating ‘Successful verification’ and after pressing the ‘OK’ button on that alert box, another view should be displayed which is nothing but a Smiley. (Smiley should appear only if it is verified and if not verified, it should not append the view)

Now, I have faced below mentioned issues:

  • When I click on ‘Verify’ button, I am getting an ‘UncaughtTypeError : Cannot read property getValue() of undefined’ (I have also tried with getValue(),valueOf(), and no spelling mistakes were there, but no success)

Also I don’t want the smiley to be loaded when the page gets loaded. What is the rectification in code that I need to do. I want the smiley after I press OK of the alert box.

Any further suggestions are highly appreciated. Expecting once again boghyon.hoffmann to be amongst the first to help me out (Just kidding :P).

Find below the snippets of ‘index.html’ , ‘View’ & ‘controller’

1) index.html

<!DOCTYPE HTML>
<html>
	<head>
		<script id="sap-ui-bootstrap"
				src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
				data-sap-ui-libs="sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-resourceroots='{
				 "pdbhai": "./"}'>
		</script>
		<script>
			var oExerciseView = new sap.ui.view({
				id:"idExercise",
				viewName:"pdbhai.view.ExerciseXMLView",
				type: "XML"
			});
			
			var oSmileyView = new sap.ui.view({
				id:"idSmiley",
				viewName:"pdbhai.view.SmileyView",
				type:"XML"
			});
			
			oExerciseView.placeAt("content");
			oSmileyView.placeAt("smiley");
			
		</script>
		
	</head>
	
	<body class="sapUiBody">
		<div id="content">
		</div>
		
		<div id="smiley">
		</div>
	</body>
	
</html>

2) .view1.xml

<mvc:View xmlns:core="sap.ui.core" 
	      xmlns:mvc="sap.ui.core.mvc" 
	      xmlns="sap.ui.commons" 
	      controllerName="pdbhai.controller.ExerciseXMLView"
		  xmlns:html="http://www.w3.org/1999/xhtml"
		  xmlns:lt="sap.ui.commons.layout">
		
	<lt:MatrixLayout id="myLayout"
					 xmlns="sap.ui.commons" layoutFixed="true" columns="2"
					 width="50%">
    
    <lt:MatrixLayoutRow>
        <lt:MatrixLayoutCell><Label text="User name"></Label></lt:MatrixLayoutCell>
        <lt:MatrixLayoutCell><TextField id="user"></TextField></lt:MatrixLayoutCell>
    </lt:MatrixLayoutRow>
    
    <lt:MatrixLayoutRow>
        <lt:MatrixLayoutCell><Label text="Password"></Label></lt:MatrixLayoutCell>
        <lt:MatrixLayoutCell><TextField id="pwd"></TextField></lt:MatrixLayoutCell>
    </lt:MatrixLayoutRow>
    
    <lt:MatrixLayoutRow>
    	<lt:MatrixLayoutCell>
			<Button id="idBtn" text="Verify" press="OnPress"></Button> 		
    	</lt:MatrixLayoutCell>
    </lt:MatrixLayoutRow>
    
</lt:MatrixLayout>
</mvc:View>


------------------------------------------------------------------------------------------
3) view2.xml

<mvc:View xmlns:core="sap.ui.core" 
		  xmlns:mvc="sap.ui.core.mvc" 
		  xmlns="sap.ui.commons" 
		  controllerName="pdbhai.controller.ExerciseXMLView"
		  xmlns:html="http://www.w3.org/1999/xhtml">
	<Image src="Smiley.jpg"></Image>


</mvc:View>

----------------------------------------------------------------------------------------------
4) .controller.js

/*eslint-disable no-console, no-alert */
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";
return Controller.extend("pdbhai.controller.ExerciseXMLView", {
	OnPress : function() {
			var oInp1 = sap.ui.getCore().byId("user").getValue();
			var oInp2 = sap.ui.getCore().byId("pwd").getValue();
			if (oInp1 === "prathamesh" & oInp2 === "deshmukh") {
				alert("Verified");
	}
		else {
			alert("Not Verified");
		}
		}

	});
});
Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member182862
Active Contributor
‎02-28-2019 5:29 AM
0 Kudos

Hi,

the proper way is not to get value from the controls and bind them to a model.

your controller can be like this

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
  "use strict";
  return Controller.extend("pdbhai.ExerciseXMLView", {
    onInit: function() {
      this.getView().setModel(new JSONModel({
        user: "",
        pwd: ""
      }));
    },
    OnPress : function() {
      var oModel = this.getView().getModel();
      var oUser = oModel.getProperty("/user");
      var oPassword = oModel.getProperty("/pwd");
      if (oUser === "prathamesh" & oPassword === "deshmukh") {
         alert("Verified");
      } else {
        alert("Not Verified");
      }
    }
  });
});

and view can be like this

<mvc:View xmlns:core="sap.ui.core" 
  xmlns:mvc="sap.ui.core.mvc" 
  xmlns="sap.ui.commons" 
  controllerName="pdbhai.ExerciseXMLView"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns:lt="sap.ui.commons.layout">
    
  <lt:MatrixLayout id="myLayout" xmlns="sap.ui.commons" layoutFixed="true" columns="2" width="50%">
    
    <lt:MatrixLayoutRow>
        <lt:MatrixLayoutCell><Label text="User name"></Label></lt:MatrixLayoutCell>
        <lt:MatrixLayoutCell><TextField id="user" value="{/user}"></TextField></lt:MatrixLayoutCell>
    </lt:MatrixLayoutRow>
    
    <lt:MatrixLayoutRow>
        <lt:MatrixLayoutCell><Label text="Password"></Label></lt:MatrixLayoutCell>
        <lt:MatrixLayoutCell><TextField id="pwd" value="{/pwd}"></TextField></lt:MatrixLayoutCell>
    </lt:MatrixLayoutRow>
    
    <lt:MatrixLayoutRow>
      <lt:MatrixLayoutCell>
      <Button id="idBtn" text="Verify" press="OnPress"></Button> 		
      </lt:MatrixLayoutCell>
    </lt:MatrixLayoutRow>
    
</lt:MatrixLayout>
</mvc:View>

and please use sap.m controls and not sap.ui.commons because the latter is deprecated. https://blogs.sap.com/2016/07/25/end-of-road-for-sapuicommons-library/

Working Example: Link

hope this help

Thanks

Dennis

Show replies
Show replies
former_member573574
Explorer
‎02-28-2019 6:34 AM

Hi Dennis,

Thank you for the time. I appreciate it. This is what I needed at the time.

Thank you once again. Keep sharing the knowledge !

Answers (2)

Answers (2)

former_member573574
Explorer
‎02-27-2019 12:07 PM
0 Kudos

Hi Himanshu,

The line is : (in the controller)

and I have tried with && as well. No success.

	var oInp1 =sap.ui.getCore().byId("user").getValue();
Show replies
Show replies
former_member221786
Active Participant
‎02-27-2019 12:09 PM 
var oInp1 = this.getView().byId("user").getValue();

and you should be fine.

himanshupensia
Participant
‎02-27-2019 11:40 AM
0 Kudos

Hi Prathmesh,

& is not an operator in javascript, try with && as below code.

if(oInp1 ==="prathamesh" && oInp2 === "deshmukh") {
				alert("Verified");}else{
			alert("Not Verified");}

I am not able to see getValue() method in controller, please suggest the line where it is causing error ?

Thanks,

Himanshu Pensia

Show replies
Show replies
Ask a Question