<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons, sap.ui.comp"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"zdemovaluehelpdialog": "./"
}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<style type="text/css">
#idMainViewSimpleForm {
color: red;
background-color: gray;
}
#idMainViewSimpleFormTitle {
color: blue;
background-color: yellow;
}
#idMainViewSimpleFormLabelFirstName {
color: green;
background-color: orange;
}
#idMainViewSimpleFormTextFieldFirstName {
color: green;
}
#idMainViewSimpleFormLabelLastName {
color: orange;
background-color: blue;
}
#idMainViewSimpleFormTextFieldLastName {
color: blue;
}
#idMainViewSimpleFormLabelCountry {
color: gray;
background-color: brown;
}
#idMainViewSimpleFormMultiInputCountry {
color: orange;
}
</style>
<script>
var app = new sap.m.App({
initialPage: "idMainView1"
});
var page = sap.ui.view({
id: "idMainView1",
viewName: "zdemovaluehelpdialog.MainView",
type: sap.ui.core.mvc.ViewType.JS
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */
sap.ui.jsview("zdemovaluehelpdialog.MainView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf zdemovaluehelpdialog.MainView
*/
getControllerName: function() {
return "zdemovaluehelpdialog.MainView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf zdemovaluehelpdialog.MainView
*/
createContent: function(oController) {
/*The main idea is to create a Simple Form with a ResponsiveGridLayout. The FormElements might
* be filled using the ValueHelpDialog, which is a control that can be used to implement a
* value help for an input field. The ValueHelpDialog is actually the MAIN object of this
* application. We want to see how it can be used effectively
* */
//Create the SimpleForm instance
var oSimpleForm = new sap.ui.layout.form.SimpleForm({
id: "idMainViewSimpleForm",
title: new sap.ui.core.Title({
id: "idMainViewSimpleFormTitle",
text: "DG3 Empire SimpleForm Title"
}),
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
content: [
new sap.ui.commons.Label({
id: "idMainViewSimpleFormLabelFirstName",
text: "FirstName"
}),
new sap.ui.commons.TextField({
id: "idMainViewSimpleFormTextFieldFirstName"
}),
new sap.ui.commons.Label({
id: "idMainViewSimpleFormLabelLastName",
text: "LastName"
}),
new sap.ui.commons.TextField({
id: "idMainViewSimpleFormTextFieldLastName"
}),
new sap.ui.commons.Label({
id: "idMainViewSimpleFormLabelCountry",
text: "Country"
}),
new sap.m.MultiInput({
id: "idMainViewSimpleFormMultiInputCountry",
valueHelpRequest: [oController.onValueHelpRequest, oController]
})
]
});
//Define the Layout of the Form
//var oResponsiveGridLayout = new sap.ui.layout.form.ResponsiveGridLayout({});
//oSimpleForm.setLayout(oResponsiveGridLayout);
var oPage = new sap.m.Page({
title: "DG3 Empire: Demo for ValueHelpDialog",
content: [
oSimpleForm
]
});
return oPage;
}
});
sap.ui.controller("zdemovaluehelpdialog.MainView", {
onInit: function() {
this.oMultiInput = sap.ui.getCore().byId("idMainViewSimpleFormMultiInputCountry");
this.oMultiInput.setEnableMultiLineMode(sap.ui.Device.system.phone);
this.oKeys = ["Currency", "Country"];
var token1 = new sap.m.Token({
key: "CFA",
text: "Cameroon (CFA)"
});
this.oTokens = [token1];
this.oMultiInput.setTokens(this.oTokens);
this.oTableItems = [{
Currency: "NGN",
Country: "Nigeria",
Capital: "Abuja"
}, {
Currency: "CFA",
Country: "Cameroon",
Capital: "Yaounde"
}, {
Currency: "CFA",
Country: "Ivory Coast",
Capital: "Abidjan"
}, {
Currency: "EUR",
Country: "Germany",
Capital: "Berlin"
}, {
Currency: "RUB",
Country: "Russia",
Capital: "Moscow"
}, {
Currency: "USD",
Country: "USA",
Capital: "Washington"
}];
},
onValueHelpRequest: function() {
var that = this;
var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({
basicSearchText: this.oMultiInput.getValue(),
title: "Countries",
supportMultiselect: false,
supportRanges: false,
supportRangesOnly: false,
key: this.oKeys[0],
descriptionKey: this.oKeys[1],
stretch: sap.ui.Device.system.phone,
ok: function(oControlEvent) {
that.oTokens = oControlEvent.getParameter("tokens");
that.oMultiInput.setTokens(that.oTokens);
oValueHelpDialog.close();
},
cancel: function(oControlEvent) {
sap.m.MessageToast.show("Cancel pressed!");
oValueHelpDialog.close();
},
afterClose: function() {
oValueHelpDialog.destroy();
}
});
var oColModel = new sap.ui.model.json.JSONModel();
oColModel.setData({
cols: [{
label: "Country Currency",
template: "Currency"
}, {
label: "World Country",
template: "Country"
}, {
label: "Country Capital",
template: "Capital",
demandPopin: true //What is this property needed for?
}]
});
oValueHelpDialog.getTable().setModel(oColModel, "columns");
var oRowsModel = new sap.ui.model.json.JSONModel();
oRowsModel.setData(this.oTableItems);
oValueHelpDialog.getTable().setModel(oRowsModel);
if (oValueHelpDialog.getTable().bindRows) {
oValueHelpDialog.getTable().bindRows("/");
}
if (oValueHelpDialog.getTable().bindItems) {
var oTable = oValueHelpDialog.getTable();
oTable.bindAggregation("items", "/", function(sId, oContext) {
var aCols = oTable.getModel("columns").getData().cols;
return new sap.m.ColumnListItem({
cells: aCols.map(function(column) {
var colname = column.template;
return new sap.m.Label({
text: "{" + colname + "}"
});
})
});
});
}
oValueHelpDialog.setTokens(this.oMultiInput.getTokens());
var oFilterBar = new sap.ui.comp.filterbar.FilterBar({
advancedMode: true,
filterBarExpanded: false,
showGoOnFB: !sap.ui.Device.system.phone,
filterGroupItems: [new sap.ui.comp.filterbar.FilterGroupItem({
groupTitle: "foo",
groupName: "gn1",
name: "n1",
label: "Country Currency",
control: new sap.m.Input()
}),
new sap.ui.comp.filterbar.FilterGroupItem({
groupTitle: "foo",
groupName: "gn1",
name: "n2",
label: "World Country",
control: new sap.m.Input()
}),
new sap.ui.comp.filterbar.FilterGroupItem({
groupTitle: "foo",
groupName: "gn1",
name: "n3",
label: "Country Capital",
control: new sap.m.Input()
})
],
search: function() {
sap.m.MessageToast.show("Search pressed '" + arguments[0].mParameters.selectionSet[0].getValue() + "''");
}
});
if (oFilterBar.setBasicSearch) {
oFilterBar.setBasicSearch(new sap.m.SearchField({
showSearchButton: sap.ui.Device.system.phone,
placeholder: "Search",
search: function(event) {
oValueHelpDialog.getFilterBar().search();
}
}));
}
oValueHelpDialog.setFilterBar(oFilterBar);
oValueHelpDialog.open();
oValueHelpDialog.update();
}
});