Skip to Content

Taking input and using a button to excute a POST

Hello I am trying to take user input for a name and once typed into the box they hit save it should POST to a table but I can't seem to get the input from the view to the controller. Please see code below. Any help will be appreciated. Thanks.

  sap.ui.jsview("ECSB1.CommClassTable.view.add", {


	/** Specifies the Controller belonging to this View. 
	 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	 * @memberOf ECSB1.CommClassTable.view.add
	 */
	getControllerName: function () {
		return "ECSB1.CommClassTable.controller.add";
	},


	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	 * Since the Controller is given to this method, its event handlers can be attached right away. 
	 * @memberOf ECSB1.CommClassTable.view.add
	 */
	createContent: function (oController) {
	
		var name = new sap.m.InputBase({id: "commClassName", width: "150px"});
		var code = new sap.m.Input({id: "code", width: "150px"});
		var freightFactor  =  new sap.m.Input({id: "freightFactor", width: "150px"});
		
		
		//buttons 
		var saveBtn = new sap.m.Button({
					text: "Save",
					width: "150px",
					
					press: [oController.onPressSave, oController]
		});
		var backBtn = new sap.m.Button({
					text: "back",
					width: "150px",
					press: [oController.onPressBack, oController]
		});
		
		//Page
		var add = new sap.m.Page({
			title: "Add",
			content: [
			
				code,
				name,
				freightFactor, 
				saveBtn,
				backBtn
			]
		});
		
		return add;
	}


});

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";


	return Controller.extend("ECSB1.CommClassTable.controller.add", {


		/**
		 * Called when a controller is instantiated and its View controls (if available) are already created.
		 * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
		 * @memberOf ECSB1.CommClassTable.view.add
		 */
		onInit: function() {
			var user = "manager";
			var pass = "secofr";
			var comp = "ZZZTESTING05";
			
			var jData = JSON.stringify({
				UserName: user,
				Password: pass,
				CompanyDB: comp
			});
			var loginURL = "/destinations/Goetze/Login";
			$.ajax({
				url: loginURL,
				data: jData,
				type: "POST",
				dataType: "json"
			});
			
		},
		
		onPressSave: function(){
			var saveURL = "/destinations/Goetze/ECSB1_COMMCLASS";
			var text = sap.ui.getCore().byId("commClassName");
			//var text = name.setValue();
			
			var jData = JSON.parse({
				Code: 102,
				Name: text
				//frieghtFactor: freightFactor
			});
			$.ajax({
					url: saveURL,
					//xhrFields: {withCredentials:true},
					data: jData,
					type:"POST",
					dataType:"json"
			});
		}
		
	
			
				
		


		/**
		 * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
		 * (NOT before the first rendering! onInit() is used for that one!).
		 * @memberOf ECSB1.CommClassTable.view.add
		 */
		//	onBeforeRendering: function() {
		//
		//	},


		/**
		 * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
		 * This hook is the same one that SAPUI5 controls get after being rendered.
		 * @memberOf ECSB1.CommClassTable.view.add
		 */
		//	onAfterRendering: function() {
		//
		//	},


		/**
		 * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
		 * @memberOf ECSB1.CommClassTable.view.add
		 */
		//	onExit: function() {
		//
		//	}


	});


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

  • Get RSS Feed

1 Answer

  • Dec 28, 2018 at 07:11 AM

    Hi Charles,

    There are couple of best practices, which if you follow them will drastically improve your coding, debugging and user experience. I am not sure why you might not be following them in your app, but here is my analysis, which might be helpful for you.

    1. Use XML view, It is way easier and more readable. So put all that code in XML view. Loads of examples are out there which can kick start your development.

    https://ui5.sap.com/#/topic/1409791afe4747319a3b23a1e2fc7064

    2. You are using InputBase which is the base class of all kinds of input, you are not supposed to use that, use the sap.m.Input instead.

    3. You the binding to set the data and read the data. Do not access the data which was entered by the user using the IDs, use the model binding and when the user types the data, it will be set to the model and get the model and read the data.

    https://ui5.sap.com/#/topic/5278bfd38f3940b192df0e39f2fb33b3

    4. I hope your source is not odata model and that is the reason you are using the ajax call to post the data. If it is odata service, then use the odata model and instantiate it in the manifest.json

    But for the issue of reading the view element,

    Instead of giving the id inside the parmeters, give like below:

    // JS View
    var oButton = new sap.m.Input(this.createId("commClassName"), {value:"Hello JS View"});
    // Controller
    var name = this.getView().byId("commClassName").getValue();

    ** But don't use the above fix, check if you can use the 4 changes that I've mentioned in your code.

    BR,

    Mahesh

    Add comment
    10|10000 characters needed characters exceeded