Im View wird unserer Liste noch eine headerToolbar
hinzugefügt. Diese enthält ein searchField
. Die Liste bekommt ausserdem noch eine id
, damit sich der Controller darauf beziehen kann:
<List
id="invoiceList"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}" >
<headerToolbar>
<Toolbar>
<Title text="{i18n>invoiceListTitle}"/>
<ToolbarSpacer/>
<SearchField
width="50%"
search=".onFilterInvoices"/>
</Toolbar>
</headerToolbar>
...
webapp/view/InvoiceList.view.xml
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], (Controller, Filter, FilterOperator) => {
"use strict";
return Controller.extend("ui5.walkthrough.controller.InvoiceList", {
onFilterInvoices(oEvent) {
const aFilter = [];
const sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("ProductName",
FilterOperator.Contains,
sQuery));
}
const oList = this.byId("invoiceList");
const oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}
});
});
Neu: webapp/controller/InvoiceList.controller.js