<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>MultiCheckBoxSample</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.unified"
data-sap-ui-xx-bindingSyntax="complex"></script>
<style>
.labelStyle{
margin-top:30% !important;
font-size:0.975rem !important;
}
.labelStyle1{
margin-top:25% !important;
font-size:0.975rem !important;
color:#FFFFFF !important;
text-shadow: 1px 1px 2px #333333 !important;
}
.oInputStyle{
margin-left:10% !important;
}
.oHBoxStyle{
background-color: #4c4c4c !important;
}
</style>
<!-- 2.) Create a UI5 List and place it onto the page -->
<script>
var empData = [
{
"EmployeeID": "219427",
"LastName": "Aaron"
},
{
"EmployeeID": "324971",
"LastName": "Benjamin"
},
{
"EmployeeID": "462523",
"LastName": "Bryant"
},
{
"EmployeeID": "212344",
"LastName": "Craig"
},
{
"EmployeeID": "767657",
"LastName": "Crispin"
},
{
"EmployeeID": "431232",
"LastName": "Mark"
},
{
"EmployeeID": "656523",
"LastName": "Boris"
},
{
"EmployeeID": "989786",
"LastName": "Steven"
}
];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
employeesData : {}
}
});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/employeesData",empData)
var oSelectBox = new sap.m.CheckBox({select: function(oEvent){
var oSelectedKey = oSelectBox.getSelected();
if (oSelectedKey==true){
var oAllCheckBox = $('#OverviewList').find('.sapMCb');
for (var i=0;i<oAllCheckBox.length;i++){
var oCheckBoxID = oAllCheckBox[i].id;
sap.ui.getCore().byId(oCheckBoxID).setSelected(true);
}
}
else{
var oAllCheckBox = $('#OverviewList').find('.sapMCb');
for (var i=0;i<oAllCheckBox.length;i++){
var oCheckBoxID = oAllCheckBox[i].id;
sap.ui.getCore().byId(oCheckBoxID).setSelected(false);
}
}
}});
var oList = new sap.m.List("OverviewList",{mode : sap.m.ListMode.SingleSelectMaster
,showSeparators : sap.m.ListSeparators.All
,swipeDirection : sap.m.SwipeDirection.Both
,rememberSelections : false
,selectionChange : function(oEvent){
var oSelectedIndex = oEvent.getParameter("listItem").getId().slice(-1);
var oCheckBox = $('#OverviewList').find('.sapMCb')[oSelectedIndex].id;
alert(oCheckBox);
sap.ui.getCore().byId(oCheckBox).setSelected(true);
}
});
oList.setHeaderText("Employee Data");
var oTemplate = new sap.m.CustomListItem("parentListItem",{
content: new sap.m.HBox({items:[ new sap.m.CheckBox(), new sap.m.Label({text:"{LastName}"}).addStyleClass("labelStyle")]})
});
var oSorter = new sap.ui.model.Sorter("EmployeeID", false, false);
oList.bindItems("/modelData/employeesData",oTemplate,oSorter);
var oHBox = new sap.m.HBox({items:[oSelectBox, new sap.m.Label({text:"Select All"}).addStyleClass("labelStyle1")]}).addStyleClass("oHBoxStyle");
var oVBox = sap.m.VBox({items:[oList,oHBox]});
oVBox.placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 List -->
<div id="uiArea"></div>
</body>
</html>
// Code goes here
/* Styles go here */