Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
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.
2 Comments
Labels in this area