How to bind the table row with fragment with json data?

[sohailkhan]

Hi guys,

When the user clicks on the edit button of the row a fragment should be open and that selected row data should be shown in the fragment, inside the fragment I have taken a simple form and bind with JSON data, the user is able to change the data and click on the update button in fragment the data should be updated and reflect in the initial view?

fragment:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
	<Dialog title="Edit Employee Details">
		<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanL="2" labelSpanM="2" emptySpanL="5" emptySpanM="5">
			<f:content>
				<Label text="Employee ID"></Label>
				<Input id="idEmp" value="{bindData>Id}" editable="false"></Input>
				<Label text="Employee Name" required="true"></Label>
				<Input id="idName" value="{bindData>Name}"></Input>
				<Label text="Employee Designation" required="true"></Label>
				<Input id="idDesignation" value="{bindData>Designation}"></Input>
				<Label text="Mobile Number" required="true"></Label>
				<Input id="idNumber" value="{bindData>Number}"></Input>
				<Label text="Experience" required="true"></Label>
				<Input id="idExperience" value="{bindData>Experience}"></Input>
			</f:content>
		</f:SimpleForm>
		<beginButton>
			<Button text="Update" press="onUpdate"></Button>
		</beginButton>
		<endButton>
			<Button text="Close" press="onClose"></Button>
		</endButton>
	</Dialog>
</core:FragmentDefinition>

But, when the user is updating the data in fragment and click on another input field the data is updating automatically in the initial screen without clicking on update button.

In below Image you can see when I change the name in fragment and click input field of designation the Employee name is getting automatically update in initial screen. I want when user click on Update button at that time only it the data should be updated in the table.

Controller:-

		onEdit: function(oEvent) {
			var listdata = oEvent.getSource().getBindingContext("bindData").getPath().split("/")[2];
			if (!this.editDalog) {
				this.editDalog = sap.ui.xmlfragment(this.getView().getId(), "com.columnT_TableRowsEdit.view.edit", this);
				this.getView().addDependent(this.editDalog);
			}

			this.editDalog.open();
			this.editDalog.bindElement("bindData>/Employee/" + listdata);

		},
		onUpdate: function() {
			var oView = this.getView();
			var table = oView.byId("tableid").getItems();
			var name = oView.byId("idName").getValue();
			var desig = oView.byId("idDesignation").getValue();
			var number = oView.byId("idNumber").getValue();
			var exp = oView.byId("idExperience").getValue();

			if (table.length) {
				table[2].getAggregation("cells")[1].setText(name);
				table[2].getAggregation("cells")[2].setText(desig);
				table[2].getAggregation("cells")[3].setText(number);
				table[2].getAggregation("cells")[4].setText(exp);
			}
			this.editDalog.close();
		}

jsond data:

{
	"Employee": [{
		"Id": "001",
		"Name": "a",
		"Designation": "SAPUI5 Consultant",
		"Number": "8585858585",
		"Experience": "1 Year"
	}, {
		"Id": "002",
		"Name": "b",
		"Designation": "TL",
		"Number": "9696969696",
		"Experience": "6 Year"
	}, {
		"Id": "003",
		"Name": "c",
		"Designation": "SAPUI5 developer",
		"Number": "7575757575",
		"Experience": "5 Year"
	}, {
		"Id": "004",
		"Name": "d",
		"Designation": "SAPUI5 developer",
		"Number": "5252525252",
		"Experience": "7 Year"<br><br>There is much more data......<br>

I hope I got the solution....

Thank you

[sohailkhan · Accepted solution]

I got the answer and I like to explain about it I have added comment in lines of code to better understanding!

Controller:

		onEdit: function(oEvent) {
			//we are geting the particular row object() or property
			var selectedItems = oEvent.getSource().getBindingContext("bindData").getObject();
			//sending the path to update function so we know what is the row and we will bind see in update function()
			this._listdata = oEvent.getSource().getBindingContext("bindData").getPath().split("/")[2];
			var id = selectedItems.Id;
			var name = selectedItems.Name;
			var desig = selectedItems.Designation;
			var number = selectedItems.Number;
			var exp = selectedItems.Experience;

			if (!this.editDalog) {
				this.editDalog = sap.ui.xmlfragment(this.getView().getId(), "com.columnT_TableRowsEdit.view.edit", this);
				this.getView().addDependent(this.editDalog);
			}
			//set the value in fragment what we are getting from Object()
			this.getView().byId("idEmp").setValue(id);
			this.getView().byId("idName").setValue(name);
			this.getView().byId("idDesignation").setValue(desig);
			this.getView().byId("idNumber").setValue(number);
			this.getView().byId("idExperience").setValue(exp);
			this.editDalog.open();

		},
		onUpdate: function() {
			var oView = this.getView();
			var listdata = this._listdata; //calling the function from onEdit function and storing in variable
			var table = oView.byId("tableid").getItems(); //getting number of items in table we have items[20]
			//getting the value from fragment what user has changed
			var name = oView.byId("idName").getValue();
			var desig = oView.byId("idDesignation").getValue();
			var number = oView.byId("idNumber").getValue();
			var exp = oView.byId("idExperience").getValue();


				//Now we have to update the information So Table[] is nothing as rows and cells nothing as a columns of the table.
				//here we table[we are giving listdata we have stored the value which row user has selected]
				//cell[number of cells we know "Employee Name" is coming in 1 coloumns so we select 1] cells starts from 0 to "number columns"
				table[listdata].getAggregation("cells")[1].setText(name);
				table[listdata].getAggregation("cells")[2].setText(desig);
				table[listdata].getAggregation("cells")[3].setText(number);
				table[listdata].getAggregation("cells")[4].setText(exp);
				this.editDalog.close();
			
		}

fragment:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
	<Dialog title="Edit Employee Details">
		<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanL="2" labelSpanM="2" emptySpanL="5" emptySpanM="5">
			<f:content>
				<Label text="Employee ID"></Label>
				<Input id="idEmp" editable="false"></Input>
				<Label text="Employee Name" required="true"></Label>
				<Input id="idName"></Input>
				<Label text="Employee Designation" required="true"></Label>
				<Input id="idDesignation"></Input>
				<Label text="Mobile Number" required="true"></Label>
				<Input id="idNumber"></Input>
				<Label text="Experience" required="true"></Label>
				<Input id="idExperience"></Input>
			</f:content>
		</f:SimpleForm>
		<beginButton>
			<Button text="Update" press="onUpdate"></Button>
		</beginButton>
		<endButton>
			<Button text="Close" press="onClose"></Button>
		</endButton>
	</Dialog>
</core:FragmentDefinition>

[junwu · Accepted solution]

for practice, it is ok, but usually we don't access ui control to get/set value.

[junwu]

//onEdit
var listdata = oEvent.getSource().getBindingContext("bindData").getPath().split("/")[2];
	this._selectedRowIndex=		listdata;
//onUpdate
var newObj={Id:***,Name:**,****};//get data from your fragment

this.getView().getModel("bindData").setProperty("/Employee/"+this._selectedRowIndex,newObj);
//code not tested, give it a try

[sohailkhan]

Getting false not able bind the data

[junwu]

can you print the value for listdata?

[junwu]

you are binding to same data, of course it will change immediately.

you should make a copy of the data and then bind it to your form. later copy the updated data back to the initial selected row.

[sohailkhan]

Thanks for you answer I also think about that now what I am doing I am set the value calling through ids from the simple form in fragment. but in update functionality I am not able to understand aggregation binding could please tell me how to bind the data using aggregation binding.

Note: I am getting the values in fragment and I am able to set the update value in the initial screen

ERORR: but selected row data is updated in another row.

intial view Controller:

		onEdit: function(oEvent) {

			var selectedItems = oEvent.getSource().getBindingContext("bindData").getObject();
			var id = selectedItems.Id;
			var name = selectedItems.Name;
			var desig = selectedItems.Designation;
			var number = selectedItems.Number;
			var exp = selectedItems.Experience;

			if (!this.editDalog) {
				this.editDalog = sap.ui.xmlfragment(this.getView().getId(), "com.columnT_TableRowsEdit.view.edit", this);
				this.getView().addDependent(this.editDalog);
			}
			this.getView().byId("idEmp").setValue(id);
			this.getView().byId("idName").setValue(name);
			this.getView().byId("idDesignation").setValue(desig);
			this.getView().byId("idNumber").setValue(number);
			this.getView().byId("idExperience").setValue(exp);
			this.editDalog.open();
		},
		onUpdate: function() {
			var oView = this.getView();
			var table = oView.byId("tableid").getItems();
			var name = oView.byId("idName").getValue();
			var desig = oView.byId("idDesignation").getValue();
			var number = oView.byId("idNumber").getValue();
			var exp = oView.byId("idExperience").getValue();

			if (table.length) {
				table[2].getAggregation("cells")[1].setText(name);
				table[2].getAggregation("cells")[2].setText(desig);
				table[2].getAggregation("cells")[3].setText(number);
				table[2].getAggregation("cells")[4].setText(exp);

			}
			this.editDalog.close();

		}

fragment:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
	<Dialog title="Edit Employee Details">
		<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanL="2" labelSpanM="2" emptySpanL="5" emptySpanM="5">
			<f:content>
				<Label text="Employee ID"></Label>
				<Input id="idEmp" editable="false"></Input>
				<Label text="Employee Name" required="true"></Label>
				<Input id="idName"></Input>
				<Label text="Employee Designation" required="true"></Label>
				<Input id="idDesignation"></Input>
				<Label text="Mobile Number" required="true"></Label>
				<Input id="idNumber"></Input>
				<Label text="Experience" required="true"></Label>
				<Input id="idExperience"></Input>
			</f:content>
		</f:SimpleForm>
		<beginButton>
			<Button text="Update" press="onUpdate"></Button>
		</beginButton>
		<endButton>
			<Button text="Close" press="onClose"></Button>
		</endButton>
	</Dialog>
</core:FragmentDefinition>