Table Personalization in SAP UI5

Hi All,

Today In this blog I am going to explain how to Personalize your Table.

If in a table we have so many columns which will not fit your screen then this will help you to show only the columns you need to be on the screen.

I have place a pop Over when a button clicked with list in which the visible columns will be selected.

When a pop Over is opened we will see two buttons with text Save and Cancel.

Save function will be the key function which will achieve our functionality.

Lets see how achieved this.

Initially I have made some columns visible which I required.

View.view.xml : 

<mvc:View controllerName="TablePersono.controller.View1" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}" class="sapUiSizeCompact">
<content>
<Toolbar >

<ToolbarSpacer/>
<Button icon="sap-icon://vertical-grip" id="CreateButton" 
text="Personalization" type="Emphasized" press="onColumnSelection"/>
</Toolbar>
<Table id="AssetTable" inset="false" 
items="{path:'hardwareAssignment>/results'}">
<columns>
<Column demandPopin="true"  id="EmpId">
<Text text="Employee Id"/>
</Column>
<Column demandPopin="true" id="name" >
<Text text="Name"/>
</Column>
<Column demandPopin="true" id="gender" >
<Text text="Gender"/>
</Column>
<Column demandPopin="true" id="date" >
<Text text="Date"/>
</Column>
<Column demandPopin="true" id="region"  visible="false">
<Text text="Region"/>
</Column>
<Column demandPopin="true" id="state"  visible="false">
<Text text="State"/>
</Column>
<Column demandPopin="true" id="pcode" >
<Text text="Pin Code"/>
</Column>
<Column demandPopin="true" id="assettag" visible="false">								
<Text text="Phone Number"/>
</Column>
</columns>
<items >
<ColumnListItem press="onAsset" type="Navigation" id="editDDDD">
<cells>
<Text text="{hardwareAssignment>EmployeeID}" id="tassetType"/>
<Text text="{hardwareAssignment>Name}" id="tManufacturer"/>
<Text text="{hardwareAssignment>Gender}" id="tModel"/>
<Text text="{hardwareAssignment>date}" id="tSerial"/>
<Text text="{hardwareAssignment>region}" id="tAssigment"/>
<Text text="{hardwareAssignment>state}" id="tStatus"/>
<Text text="{hardwareAssignment>Pincode}" id="tAssetTag"/>
<Text text="{hardwareAssignment>phnNum}" id="tCountry"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>

I have binded some sample data to the table by JSON Data.

details.json

{
	"results":[
		{
		"EmployeeID" : "800641",
		"Name": "G Anand Kumar Reddy",
		"Gender": "Male",
		"date": "04-06-2017",
		"region": "Pulivendulla",
		"state": "Andhara Pradesh",
		"Pincode": "500101",
		"phnNum" : "8000045001"
		},
			{
		"EmployeeID" : "800673",
		"Name": "G Ashok Kumar Reddy",
		"Gender": "Male",
		"date": "01-06-2017",
		"region": "Kadapa",
		"state": "Andhara Pradesh",
		"Pincode": "500102",
		"phnNum" : "8000045002"
		},
			{
		"EmployeeID" : "800636",
		"Name": "R Sreenadh",
		"Gender": "Male",
		"date": "21-02-2017",
		"region": "Nellore",
		"state": "Andhara Pradesh",
		"Pincode": "500103",
		"phnNum" : "8000045003"
		},
			{
		"EmployeeID" : "800674",
		"Name": "K Hemalatha",
		"Gender": "FeMale",
		"date": "11-09-2016",
		"region": "Hyderabad",
		"state": "Andhara Pradesh",
		"Pincode": "500104",
		"phnNum" : "8000045004"
		},
			{
		"EmployeeID" : "800690",
		"Name": "V Pallavi",
		"Gender": "FeMale",
		"date": "19-05-2015",
		"region": "Banglore",
		"state": "Andhara Pradesh",
		"Pincode": "500105",
		"phnNum" : "8000045005"
		},
		{
		"EmployeeID" : "800679",
		"Name": "J Lakshmi",
		"Gender": "FeMale",
		"date": "11-08-2015",
		"region": "Vizag",
		"state": "Andhara Pradesh",
		"Pincode": "500106",
		"phnNum" : "8000045006"
		},
		{
		"EmployeeID" : "800683",
		"Name": "N Srikar",
		"Gender": "Male",
		"date": "19-04-2016",
		"region": "Kakinada",
		"state": "Andhara Pradesh",
		"Pincode": "500107",
		"phnNum" : "8000045007"
		},
		{
		"EmployeeID" : "800654",
		"Name": "S Mounika",
		"Gender": "FeMale",
		"date": "19-11-2015",
		"region": "Proddatur",
		"state": "Andhara Pradesh",
		"Pincode": "500108",
		"phnNum" : "8000045008"
		},
		{
		"EmployeeID" : "800624",
		"Name": "V Basha",
		"Gender": "Male",
		"date": "16-10-2016",
		"region": "SriKakulam",
		"state": "Andhara Pradesh",
		"Pincode": "500109",
		"phnNum" : "8000045009"
		},
		{
		"EmployeeID" : "800639",
		"Name": "Y HimaBindu",
		"Gender": "FeMale",
		"date": "17-05-2014",
		"region": "Vijayawada",
		"state": "Andhara Pradesh",
		"Pincode": "500110",
		"phnNum" : "8000045010"
		}
		]
}

Binding the Json Data to the Table with Json Model.

View.controller.js : 

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

	return Controller.extend("TablePersono.controller.View1", {
		onInit: function() {
			var oModel = new sap.ui.model.json.JSONModel();
			oModel.loadData("model/details.json");
			this.getView().setModel(oModel, "hardwareAssignment");

		},
	
	});
});

I have Placed a button on the top of table when we click on that a Pop Over will be opened with the visible columns selected.

To make selected visible columns in the list I have used Update Finished event for the list.

For the Pop Over I have Placed footer with two buttons Save and Cancel.

Cancel will close the popover and while on Clicking on Save the Selected columns will be Visible.

onColumnSelection: function(event) {
var that = this;
var List = that.byId("List");
var popOver = this.byId("popOver");
if (List !== undefined) {
List.destroy();
}
if (popOver !== undefined) {
popOver.destroy();
}
	/*----- PopOver on Clicking ------ */
var popover = new sap.m.Popover(this.createId("popOver"), {
showHeader: true,
showFooter: true,
placement: sap.m.PlacementType.Bottom,
content: []
}).addStyleClass("sapMOTAPopover sapTntToolHeaderPopover");

	/*----- Adding List to the PopOver -----*/
var oList = new sap.m.List(this.createId("List"), {});
this.byId("popOver").addContent(oList);
var openAssetTable = this.getView().byId("AssetTable"),
columnHeader = openAssetTable.getColumns();
var openAssetColumns = [];
for (var i = 0; i < columnHeader.length; i++) {
var hText = columnHeader[i].getAggregation("header").getProperty("text");
var columnObject = {};
columnObject.column = hText;
openAssetColumns.push(columnObject);
}
var oModel1 = new sap.ui.model.json.JSONModel({
				list: openAssetColumns
});
var itemTemplate = new sap.m.StandardListItem({
title: "{oList>column}"
});
oList.setMode("MultiSelect");
oList.setModel(oModel1);
sap.ui.getCore().setModel(oModel1, "oList");
var oBindingInfo = {
path: 'oList>/list',
template: itemTemplate
};
oList.bindItems(oBindingInfo);
var footer = new sap.m.Bar({
contentLeft: [],
contentMiddle: [new sap.m.Button({
text: "Cancel",
press: function() {
that.onCancel();
}
}),
new sap.m.Button({
text: "Save",
press: function() {
that.onSave();
}
})
]
				
});

this.byId("popOver").setFooter(footer);
var oList1 = this.byId("List");
var table = this.byId("AssetTable").getColumns();
/*=== Update finished after list binded for selected visible columns ==*/
oList1.attachEventOnce("updateFinished", function() {
var a = [];
for (var j = 0; j < table.length; j++) {
var list = oList1.oModels.undefined.oData.list[j].column;
a.push(list);
var Text = table[j].getHeader().getProperty("text");
var v = table[j].getProperty("visible");
if (v === true) {
if (a.indexOf(Text) > -1) {
var firstItem = oList1.getItems()[j];
oList1.setSelectedItem(firstItem, true);
}
}
}
});
popover.openBy(event.getSource());
		},

Cancel function:

/*================ Closing the PopOver =================*/
onCancel: function() {
this.byId("popOver").close();
},

Save Function: 

/*============== Saving User Preferences ==================*/
onSave: function() {
var that = this;
var oList = this.byId("List");
var array = [];
var items = oList.getSelectedItems();

// Getting the Selected Columns header Text.
for (var i = 0; i < items.length; i++) {
var item = items[i];
var context = item.getBindingContext("oList");
var obj = context.getProperty(null, context);
var column = obj.column;
array.push(column);
}
   /*---- Displaying Columns Based on the selection of List ----*/
var table = this.byId("AssetTable").getColumns();
for (var j = 0; j < table.length; j++) {
var Text = table[j].getHeader().getProperty("text");
var Column = table[j].getId();
var columnId = this.getView().byId(Column);
if (array.indexOf(Text) > -1) {
columnId.setVisible(true);
} else {
columnId.setVisible(false);
}
}

this.byId("popOver").close();

		}

Output:

when popOver is clicked visible columns get Selected.

Now I am deselecting Gender and Date and Selecting Region and Phone Number and clicking save.

result :

See the selected columns will be get Visible.

Hope this will be helpful to personalize your table.

Thanks all.