<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ListCheckBox</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m"></script>
<style>
.labelStyle {
font-size: 1.125rem;
color: #333333;
margin-top: 1rem;
margin-left: 0.2rem;
}
</style>
<script>
var data = ["Mark", "Stephanie", "Christopher", "Aaron", "Benjamin"];
var model = new sap.ui.model.json.JSONModel();
model.setData(data);
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/SelectedObjects", []);
var oList = new sap.m.List({
mode: "Delete",
showSeparators: "All",
swipeDirection: "Both",
rememberSelections: false,
delete: function(oEvent) {
var oListItem = oEvent.getParameter("listItem");
var oPath = oListItem.getBindingContext().getPath();
var idx = parseInt(oPath.slice(-1));
if (idx !== -1) {
var m = oList.getModel();
var data = m.getProperty("/");
var removed = data.splice(idx, 1);
m.setProperty("/", data);
}
}
});
var oTemplate = new sap.m.CustomListItem({
content: [new sap.m.HBox({
items: [new sap.m.CheckBox({
select: function(oEvent) {
var oGetSelected = oEvent.getParameter("selected");
if (oGetSelected == true) {
var oSource = oEvent.getSource();
var oModel = sap.ui.getCore().getModel().getProperty("/SelectedObjects");
var oSelectedObject = oSource.getBindingContext().getObject();
oModel.push(oSelectedObject);
alert(oModel);
}
}
}),
new sap.m.Label({
text: "{}",
textAlign: "Center"
}).addStyleClass("labelStyle")
]
})]
});
oList.bindItems("/", oTemplate);
oList.placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
// Code goes here
/* Styles go here */