Skip to content

Instantly share code, notes, and snippets.

/SAPUI5 Select Dialog Example

Created February 18, 2014 19:38
Show Gist options
  • Save anonymous/9078332 to your computer and use it in GitHub Desktop.
Save anonymous/9078332 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SAPUI5 Select Dialog Example
<!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>SAPUI5 Select Dialog Example</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"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
//The basic Test Data
var listData = {
Plants: [ {
plant: "Plant ABC",
id: "9001",
}, {
plant: "Plant DEF",
id: "9002",
}]
};
//The Template to use in the Dialog
var itemTemplate = new sap.m.StandardListItem({
title: "{plant}",
description: "{id}",
active: true
})
//Creation of the JSON Model for the Test Daya
var oModelList = new sap.ui.model.json.JSONModel();
oModelList.setData(listData);
//Create the Dialog and we attach this as helper
var oSelectDialog = new sap.m.SelectDialog("PlantDialog", {
title: "Plant Selection Helper",
noDataText: "No Plant Information Found"
});
//Now set the model for Dialog and bind the Aggregration.
oSelectDialog.setModel(oModelList);
oSelectDialog.bindAggregation("items", "/Plants", itemTemplate);
//Now Create a Input field to link to the Select Dialog
var oInput = new sap.m.Input({
type: "Text",
placeholder: "Open Select Dialog to Locate Plant Information",
showValueHelp: true,
valueHelpRequest: function () {
oSelectDialog.open(oInput.getValue());
}
});
//Now Create the Page to show it all
var app = new sap.m.App("myApp", {initialPage:"page1"});
var page1 = new sap.m.Page("page1", {
title:"Select Dialog Example",
content:[
new sap.m.VBox({
items: [ oInput ]
})
]
});
app.addPage(page1).placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
@das075
Copy link

das075 commented Oct 20, 2015

Thanks for the code....unfortunately this is not working.... :)

solution
use confirm event of select dialog

var oSelectDialog = new sap.m.SelectDialog("stateDialog", {
title: "state helper",
noDataText: "No Information Found",
confirm : oController.helpClose
});

helpClose: function(oEvent){

var selectItem = oEvent.getParameter("selectedItem");
var oInput = sap.ui.getCore().byId("stateHelp"); // Id of Input
oInput.setValue(selectItem.getTitle());

},

Regards,
Sanjaya

@Mruga-B
Copy link

Mruga-B commented Sep 6, 2016

Hi,
I tried writing this code in mvc architecture but it's not working. I'm new to SAPUI5. It would be of great help if someone could please help me.
View
controller

Controller
view

capture

Regards,
Mruga

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment