Table Personalization Using Checkbox in SAP UI5

Hi All,

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

Sample Application:

1. Create an SAP UI5 application in Eclipse IDE with a single view.

2. Next you need to design the view to display Table data, Below is the code for view and controller.

View.view.xml : 

Using this code we have created an XML view with columns.

<Panel class="panel sapUiResponsiveMargin" width="auto">
<HBox class="panel-checkbox">
<CheckBox class="Checkbox" select="onPresscheckbox" text="{i18n>Gender}"/>
<CheckBox class="Checkbox" select="onPresscheckbox" text="{i18n>CustomerName}"/>
<CheckBox class="Checkbox" select="onPresscheckbox" text="{i18n>Priority}"/>
</HBox>
<Table class="table" id="employeeInfo" inset="true" items="{sTableMod>/results}" mode="SingleSelectLeft" modeAnimationOn="false">
<columns>
<Column visible="true">
<Label design="Bold" text="{i18n>slno}"></Label>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet" visible="true">
<Label design="Bold" text="{i18n>CustomerName}"></Label>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet" visible="true">
<Label design="Bold" text="{i18n>Status} "></Label>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet" visible="true">
<Label design="Bold" text="{i18n>Priority}"></Label>
</Column>
<Column demandPopin="true"  minScreenWidth="Tablet" visible="true">
<Label design="Bold" text="{i18n>Gender}"></Label>
</Column>
<Column visible="true">
<Label design="Bold" text="{i18n>Date}"></Label>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Link class="sapUiSizeCompact" press="handleLinkPress" text="{sTableMod>slno}"/>
<Text class="sapUiSizeCompact" text="{sTableMod>Name}"></Text>
<Text class="sapUiSizeCompact" text="{sTableMod>Status}"></Text>
<Text class="sapUiSizeCompact" text="{sTableMod>Priority}"></Text>
<Text class="sapUiSizeCompact" text="{sTableMod>Gender}"></Text>
<Text class="sapUiSizeCompact" text="{sTableMod>Date}"></Text>
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>

I have Binded some sample JSON Data to the table .

Resultsdata.json :

{
	"results": [{
		"slno": "800641",
		"Status": "Available",
		"Priority": "High",
		"Gender": "Female",
		"Name": "Vaddi Spandana",
		"Date": "23042019"

	}, {
		"slno": "800643",
		"Status": "Available",
		"Priority": "High",
		"Processor": "23457",
		"Gender": "Female",
		"Name": "Deepthi Reddy",
		"Date": "23042019"
	}, {
		"slno": "800644",
		"Status": "Available",
		"Priority": "low",
		"Processor": "23458",
		"Gender": "Male",
		"Name": "Nitish Varma",
		"Date": "23042019"
	}, {
		"slno": "800647",
		"Status": "Available",
		"Priority": "High",
		"Processor": "23459",
		"Gender": "Male",
		"Name": "Uday Nistala",
		"Date": "25042019"
	}]
}

Now the above data I am going to bind  with JSON  Model .

Controller Part : 

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/ResultsData.json");
			this.getView().setModel(oModel, "sTableMod");
		},
	
	});
});

Now run the application, you should be able to see the table and the data inside the table like below.

Copy and paste the below code in the controller:

	onPresscheckbox: function(evt) {
			var value = [];
			var chkboxitems = evt.getSource().getParent().getItems();
			for (var k = 0; k < chkboxitems.length; k++) {
				var item = chkboxitems[k].getSelected();
				if (item === true) {
					value.push(chkboxitems[k].getText());
				}
			}
			var table = this.getView().byId("employeeInfo").getColumns();
			for (var i = 0; i < table.length; i++) {
				var ColumnHeader = table[i].getHeader().getProperty("text");
				if (value.length === 0) {
					table[i].setVisible(true);
				} else {
					if (value.includes(ColumnHeader)) {
						table[i].setVisible(true);
					} else {
						table[i].setVisible(false);
					}
				}
			}
		}

The model table data is automatically updated when the user selects something from the checkbox List .

Output : 

Thank you for reading.

I Hope this will be helpful. Please let me know if you have questions or comments or let me know about things that I have missed out.

@Spandana vaddi.