<!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 */