Skip to Content

Step-1: In order to avoid duplicate records when records are binding from one table to another table by selecting the main table row.

Step-2: For this, I am using two tables in order to show how data binding from one table to another table without any duplicate records.

 

View.js:

var oTable;
var oEmptyBar;
var oUpdTable;
sap.ui.jsview("com.view.View1", {

	/** 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 controller.View1
	 */
	getControllerName: function() {
		return "com.controller.View1";
	},

	/** 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 controller.View1
	 */
	createContent: function(oController) {

		var oPage = new sap.m.Page({
			title: "{i18n>title}",

			content: [

				oTable = new sap.m.Table("table", {
					headerText: "Table1",
					id: "table",
					mode: "MultiSelect",
					columns: [new sap.m.Column({
							header: [new sap.m.Label({
								text: "PersonnelNumber"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "FirstName"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "LastName"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "Department"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "EMail"
							})]
						})
						
					],
				}),

				
				oEmptyBar = new sap.m.Bar({}),

				oUpdTable = new sap.m.Table({
					headerText: "Table2",
					id: "table1",
					type: sap.m.ListType.Active,
					mode: sap.m.ListMode.SingleSelectMaster,
					includeItemInSelection: true,
					columns: [new sap.m.Column({
							header: [new sap.m.Label({
								text: "PersonnelNumber"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "FirstName"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "LastName"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "Department"
							})]
						}),
						new sap.m.Column({
							header: [new sap.m.Label({
								text: "EMail"
							})]
						})
					]
				}),
			]
		});

		var app = new sap.m.App("myApp", {
		initialPage: "oPage"
		});
		app.addPage(oPage);
		return app;
	}

});

 

Output:

This is the initial view.

Step-3: From the above screen we can understand that it was the view without any data.

Step-4: Now will bind the data to one table i.e first table. And see what happen when we select a row in the first table.

 

Model.json:

Step-5: This is the JSON model I am using to bind to the table.

{
	{
	"Data": [{
		"PersonnelNumber": "9848022338",
		"FirstName": "Sreenadh",
		"LastName": "Rajaneni",
		"Department": "Software engineer",
		"EMail": "sri.rajaneni1992@gmail.com"
	}, {
		"PersonnelNumber": "9848012345",
		"FirstName": "Mahesh",
		"LastName": "Dabbugunta",
		"Department": "Finance",
		"EMail": "mahesh@gmail.com"
	}, {
		"PersonnelNumber": "9988776655",
		"FirstName": "Satheesh",
		"LastName": "Kattamreddy",
		"Department": "Marketing",
		"EMail": "satheeshk@gmail.com"
	}]
}
}

Controller.js:

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";
	Controller.extend("com.controller.View1", {
 
		onInit: function() {

                       //Creating model  
                       var oModel = new sap.ui.model.json.JSONModel();

			// Set the data for the model
			oModel.loadData("model/model.json");

			// Set the model to the core
			sap.ui.getCore().setModel(oModel);

                        // Set the model to the table
			var oTable = sap.ui.getCore().byId("table");
			oTable.setModel(oModel);	
		},
	});
});

 

View.js:

This is the view with JSON binding.

oTable.bindItems("/Data", new sap.m.ColumnListItem("listItem", {
					cells: [new sap.m.Text({
							text: "{PersonnelNumber}"
						}),
						new sap.m.Text({
							text: "{FirstName}"
						}),
						new sap.m.Text({
							text: "{LastName}"
						}),
						new sap.m.Text({
							text: "{Department}"
						}),
						new sap.m.Text({
							text: "{EMail}"
						})
					]
				}))

 

Output:

After JSON binding the table is loaded with data.

 

Step-6: In order to see the records binding from one table to another table by selecting its corresponding row “checkbox”.

Follow the below code.

View.js:

selectionChange: [oController.onSelectionChange, oController]

 

Controller.js:

var aTableData = [];
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";
	Controller.extend("com.controller.View1", {
 
onSelectionChange: function(oEvent) {
			var oModel = {};
			var oSelectedItem = oEvent.getParameter("listItem");
			oModel = oSelectedItem.getBindingContext().getObject();
			aTableData.push(oModel);
			oUpdTable = sap.ui.getCore().byId("table1");
			oUpdTable.setModel(new sap.ui.model.json.JSONModel({
				"oModelData": aTableData
			}));
 }
});
});

 

View.js:

oUpdTable.bindItems("/oModelData",
	new sap.m.ColumnListItem({
	vAlign: "Middle",
	cells: [new sap.m.Text({
			text: "{PersonnelNumber}"
		}),
		new sap.m.Text({
			text: "{FirstName}"
		}),
		new sap.m.Text({
			text: "{LastName}"
		}),
		new sap.m.Text({
			text: "{Department}"
		}),
		new sap.m.Text({
			text: "{EMail}"
		})
						]
	})
)

 

Output:

Step:-7 Now, uncheck the checkbox and again check the checkbox like by the following screen.

you will see the duplicate records in the second table.

Step:-8

In order to avoid duplicate records, the following controller code will help us.

Controller.js:

onSelectionChange: function(oEvent) {
			var oModel = {};
			var oSelectedItem = oEvent.getParameter("listItem");
			oModel = oSelectedItem.getBindingContext().getObject();
				var dd = oEvent.mParameters.selected;
				if (dd === true) {
				aTableData.push(oModel);
				var a = [];
				for (var i = 0; i < aTableData.length; i++) {
					if (a.indexOf(aTableData[i].PersonnelNumber) === -1) {
						a.push(aTableData[i].PersonnelNumber);
					} else {
						MessageToast.show("The record is already added");
					}
				}
				
				var oTemporaryjson1 = [];
				var oTemporaryjson;
				for (var j = 0; j < a.length; j++) {
					//To get all the records with unique Zsection
					oTemporaryjson = $.grep(aTableData, function(n, m) {
						return n.PersonnelNumber === a[j];
					});
					
					oTemporaryjson1.push(oTemporaryjson[0]);	
				}
				oUpdTable = sap.ui.getCore().byId("table1");
				oUpdTable.setModel(new sap.ui.model.json.JSONModel({
					"oModelData": oTemporaryjson1
				}));
			}
		}

Step:-9 Now check whether our controller code works or not.

 

Output:

Step:-10 If you again check the checkbox on the record which is already available on the second table. It will throw a toast message that “The record is already added”.

Here we achieved our objective.No duplicate records will bind to the second table.

 

Hope this helps you guys……

Thank you!

 

 

 

 

 

 

 

 

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply