Technical Articles
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.
Interesting solution,
although I would recommend on using standard P13n Dialog instead.
Thank you