Table Personalization Using Checkbox in SAP UI5

[former_member633105]

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.