<!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>sap.m.List Sample</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;
	}
	.oInputStyle{
	margin-left:10% !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 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);

     oList.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 */