Skip to Content

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

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

	});
});
Add a comment
10|10000 characters needed characters exceeded

Related questions

3 Answers

  • Best Answer
    Posted on Feb 28, 2019 at 05:29 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 27, 2019 at 11:40 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 27, 2019 at 12:07 PM

    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();
    
    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.