<!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>Mobile App with data-bound List</title>
<!-- src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" -->
<script
src="https://sapui5.hana.ondemand.com/1.36.9/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.comp"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"demo.com.valuehelp": "./"}'></script>
<script type="text/javascript">
var app = new sap.m.App({
initialPage: "idMainView1"
});
var page = sap.ui.view({
id: "idMainView1",
viewName: "demo.com.valuehelp.View1",
type: sap.ui.core.mvc.ViewType.JS
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
// Code goes here
/* Styles go here */
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("demo.com.valuehelp.View1", {
onValueHelpRequest: function(oEvent) {
var oValueHelpDialog = sap.ui.jsfragment("demo.com.valuehelp.ValueHelpForSite", this);
var oThis = this;
if (!oValueHelpDialog.getTable().getModel("supplier")) {
var oODataModel = new sap.ui.model.odata.ODataModel(
"https://cors-anywhere.herokuapp.com/http://services.odata.org/V2/Northwind/Northwind.svc/"
);
oODataModel.setDefaultCountMode(sap.ui.model.odata.CountMode.None);
oODataModel.attachRequestCompleted(function(oEve) {
oThis.errProcValueHelpGetData(oValueHelpDialog, oEve);
});
oValueHelpDialog.getTable().setModel(
oODataModel,
"supplier"
);
}
if (oValueHelpDialog.getTable().bindRows) {
oValueHelpDialog.getTable().bindRows("supplier>/Suppliers");
}
if (oValueHelpDialog.getTable().bindItems) {
var oTable = oValueHelpDialog.getTable();
oTable.bindAggregation("items", "supplier>/Suppliers", 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.open();
}
});
});
sap.ui.jsview("demo.com.valuehelp.View1", {
/** 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 controller.View1
*/
getControllerName: function () {
return "demo.com.valuehelp.View1";
},
/** 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 controller.View1
*/
createContent: function (oController) {
var oSimpleForm = new sap.ui.layout.form.SimpleForm({
id: "idMainViewSimpleForm",
title: new sap.ui.core.Title({
id: "idMainViewSimpleFormTitle",
text: "Example"
}),
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
content: [
new sap.ui.commons.Label({
id: "idMainViewSimpleFormLabelCountry",
text: "Supplier"
}),
new sap.m.MultiInput({
id: "idMainViewSimpleFormMultiInputCountry",
valueHelpRequest: [oController.onValueHelpRequest, oController]
})
]
});
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [oSimpleForm]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}
});
sap.ui.jsfragment('demo.com.valuehelp.ValueHelpForSite', {
createContent: function(oController) {
var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({
title: 'Hello',
supportMultiselect: false,
supportRanges: false,
supportRangesOnly: false,
key: '',
descriptionKey: '',
ok: function(oControlEvent) {
// oController.setDefaultSiteFromHelp(oControlEvent);
oValueHelpDialog.close();
},
cancel: function(oControlEvent) {
oValueHelpDialog.close();
},
afterClose: function() {
oValueHelpDialog.destroy();
},
});
var oThis = this;
var oSearchField = new sap.m.SearchField({
showSearchButton: sap.ui.Device.system.phone,
placeholder: 'search',
showRefreshButton: true,
liveChange: function(oSearchEvent) {
oThis.onLiveSearchForSite(oSearchEvent, oController, oValueHelpDialog);
},
});
var oColModel = new sap.ui.model.json.JSONModel();
var aCols = this.createColumns(oController);
oColModel.setData({
cols: aCols,
});
// if (sap.ui.Device.system.phone) {
// oColModel.getData().cols.pop();
// oColModel.getData().cols.pop();
// }
oValueHelpDialog.getTable().setModel(oColModel, 'columns');
// oValueHelpDialog.insertContent(oSearchField);
// oValueHelpDialog.addStyleClass("sapUiSizeCompact");
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: 'Supplier ID',
control: new sap.m.Input(),
}),
new sap.ui.comp.filterbar.FilterGroupItem({
groupTitle: 'foo',
groupName: 'gn1',
name: 'n2',
label: 'Company Name',
control: new sap.m.Input(),
}),
],
search: function(oEvent) {
// sap.m.MessageToast.show("Search pressed '" + arguments[0].mParameters.selectionSet[0].getValue() + "''");
//search function
var oBinding = oValueHelpDialog.getTable().getBinding('items');
var oSource = oEvent.getSource();
var oBarContent = oSource.getContent();
var oToolBarContent = oBarContent[0].getContent();
var oSearch = oToolBarContent[1];
var sQuery = oSearch.getValue();
var aFilters = [];
if (sQuery) {
aFilters.push(
new sap.ui.model.Filter(
'SupplierID',
sap.ui.model.FilterOperator.Contains,
sQuery
)
);
aFilters.push(
new sap.ui.model.Filter(
'CompanyName',
sap.ui.model.FilterOperator.Contains,
sQuery
)
);
}
var oFilter = new sap.ui.model.Filter(aFilters, false);
oBinding.filter([oFilter], sap.ui.model.FilterType.Application);
},
});
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);
return oValueHelpDialog;
},
createColumns: function(oController) {
return [
{
label: 'Supplier ID',
template: 'supplier>SupplierID',
demandPopin: true,
},
{
label: 'Company Name',
template: 'supplier>CompanyName',
demandPopin: true,
},
];
},
onLiveSearchForSite: function(oSearchEvent, oController, oValueHelpDialog) {
var sQuery = oSearchEvent.getSource().getValue();
sQuery = sQuery.toUpperCase();
var oBinding = oValueHelpDialog.getTable().getBinding('rows');
// var aFilter = this.createFilter(sQuery, oController);
// oBinding.filter(aFilter, sap.ui.model.FilterType.Application);
},
// createFilter: function (sQuery, oController) {
// return [
// new sap.ui.model.Filter(
// oController.getStrWERKS(),
// sap.ui.model.FilterOperator.Contains,
// sQuery
// ),
// new sap.ui.model.Filter(
// oController.getStrNAME1(),
// sap.ui.model.FilterOperator.Contains,
// sQuery
// )
// ];
// }
});