How to dynamically bind and send data from one function to another in a controller

[Former Member]

Hi,

Below is my code. I want to capture the input filed value from my Dialog control and pass it to another function (that.submitPrograms). I know this can be done by creating a new fragment file and then get the value of the Input field using this.getView().byId(<ID>), but want to create the dialog and controls in the dialog dynamically in the controller (runtime). If this is not possible to capture Input filed value and pass it to another function with in the controller, please let me know..I will create a fragment file then. Thanks

var oDialog = new sap.m.Dialog({content:[new sap.m.Input({maxLength:1000})], 
                                title: "Please Enter Comments",
				verticalScrolling:true,
beginButton: new sap.m.Button({text:"Submit", press: function(){that.submitPrograms();}}), 
endButton: new sap.m.Button({text: "Cancel", press: function(){this.getParent().close();}})
});
oDialog.open();

[Former Member · Accepted solution]

As jun.wu5 mentioned relying on the attribute values of a UI element in the controller is an MVC anti-pattern, as this can make the source code obscure and altering the UI side can have an unwanted side-effect.

The decent way is to use a model holding the data to be displayed and updated based on the input by the user. In your case this is practically a JSON model.

var oDialogModel = new sap.ui.model.json.JSONModel({
	inputValue: "Initial value from the model"
});

var oDialog = new sap.m.Dialog({
	content: [new sap.m.Input({
		maxLength: 1000,
		value: "{/inputValue}" //bind the value property to the model data
	})],
	title: "Please Enter Comments",
	verticalScrolling: true,
	beginButton: new sap.m.Button({
		text: "Submit",
		press: function () {
			sap.m.MessageToast.show("Entered value: " + oDialogModel.getProperty("/inputValue"));...
		}
	}),
	endButton: new sap.m.Button({
		text: "Cancel",
		press: function () {...}
	})
});

oDialog.setModel(oDialogModel);

oDialog.open();

[Former Member · Accepted solution]

Super helpful. I always knew I have lot of catch up to do in SAPUI5 but realized now I am way too far away than I thought.

Thanks Gabor.

[junwu]

don't pass data here and there....

put them in model, and always go through binding...

[Former Member]

Ok. So that is what I am trying to understand.

How can I get the value of the input field (which is in the dialog box) ? I cannot assign an ID to this input filed, as every time I run it creates a duplicate ID and throws error. So basically two questions in the above scenario..

How to get the entered value of the input field (which is in the dialog box) and then how can I bind it or send it to another function ( which in this case is submitPrograms() )

[junwu]

1.never go to ui element to get value.....

2. don't know how to bind ui to model? go through ui5 basic training.....