<!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>Dialog BusyDialog 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.m"
	data-sap-ui-xx-bindingSyntax="complex"></script>

    <!-- 2.) Create a UI5 ObjectHeader 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 oSelectedInputId = $('#OverviewList').find('.sapMInput')[oSelectedIndex].id;
		alert(oSelectedInputId);
		alert(sap.ui.getCore().byId(oSelectedInputId).getValue());
		sap.ui.getCore().byId(oSelectedInputId).setEnabled(false);
		}
		});

	var oTemplate = new sap.m.StandardListItem("parentListItem",{
					title:"{LastName}", description:"{EmployeeID}"
	});

	var oSorter = new sap.ui.model.Sorter("EmployeeID", false, false);
	oList.bindItems("/modelData/employeesData",oTemplate,oSorter);

     var oBusyDialog_Global = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});
	 var oButton=new sap.m.Button({text:"BusyDialog Open", type:"Emphasized", press:function(oEvent){
                              var oPage = new sap.m.Page({title:"BusyDialog Sample"});
							  oPage.addContent(oList);
                              var oDialog = new sap.m.Dialog({title:"Dialog",stretch : true,content:[oPage],
											afterOpen:function(oEvent){
										var oPageBusy = setInterval(function () {
											var oGetBusy = oPage.getBusy();
											if(oGetBusy == false){
											oBusyDialog.close();
											clearInterval(oPageBusy);
												}
											}, 500);
											}});
							  var oCancelButton = new sap.m.Button({text:"OK", press:function(oEvent){
												oDialog.close();
												}});
							  oDialog.setEndButton(oCancelButton);
                              oDialog.open();
							  var oBusyDialog = sap.ui.getCore().byId("GlobalBusyDialog");
                              oBusyDialog.open();
		}});

	oButton.placeAt("uiArea");
     </script>
</head>
<body class="sapUiBody">

    <!-- This is where you place the UI5 ObjectHeader -->
    <div id="uiArea"></div>
</body>
</html>
// Code goes here

/* Styles go here */