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.
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.
Step-5: This is the JSON model I am using to bind to the table.
This is the view with JSON binding.
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.
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.
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!
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!
- SAP Managed Tags:
