제품 목록에 대한 검색 필드를 추가하고 검색 할 때 검색어가 일치하는 항목만 표시 되도록 한다.
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List
id="invoiceList"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}" >
<headerToolbar>
<Toolbar>
<Title text="{i18n>invoiceListTitle}"/>
<ToolbarSpacer/>
<SearchField width="50%" search=".onFilterInvoices"/>
</Toolbar>
</headerToolbar>
<items>
<ObjectListItem>
…
</ObjectListItem/>
</items>
</List>
</mvc:View>
해당 view는 인보이스 목록에 추가 한 검색 컨트롤에 의해 확장된다.
검색 필드에 추가하는 onFilterInvoices를 이벤트 처리에서 식별 할 수 있도록 List 컨트롤에 ID invoiceList
지정한다.
검색 필드는 headerToolbar의 자식으로 변경 될 때마다 검색 필드를 포함하여 전체 목록이 다시 렌더링된다.
headerToolbar aggregation은 목록 헤더에 대한 간단한 title 속성을 대체한다.
툴바 컨트롤은 보다 유연하고 조정할 수 있다.
sap.m.title 컨트롤 spacer를 이용 왼쪽에 표시 하고 sap.m.SearchField를 사용하여 오른쪽에 위치시킨다.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"../model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
formatter: formatter,
onInit : function () {
var oViewModel = new JSONModel({
currency: "EUR"
});
this.getView().setModel(oViewModel, "view");
},
onFilterInvoices : function (oEvent) {
// build filter array
var aFilter = [];
var sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
}
// filter binding
var oList = this.byId("invoiceList");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}
});
});
필터링을 위한 두 개의 새로운 종속성을 로드한다.
Filter객체는 필터 동작에 대한 구성을 보유하고 FilterOperator는 필터를 지정하는 데 필요하다.
onFilterInvoices 함수에서 사용자가 검색 필드에 입력 한 검색 문자열에서 filter 객체를 생성한다.
이벤트 핸들러는 이벤트가 제공하는 매개 변수에 액세스하는 데 사용할 수 있는 이벤트 인수를 받는다.
oEvent 매개 변수에서 getParameter("query")
를 호출하여 액세스하는 매개 변수 쿼리를 정의한다.
쿼리가 비어 있지 않으면 필터의 aFilter변수에 새 filter객체를 추가한다.
그러나 쿼리가 비어 있으면 빈 배열을 사용하여 바인딩을 필터링한다.
이렇게하면 모든 목록 요소를 다시 볼 수 있다.
둘 이상의 데이터 필드를 검색하려는 경우 배열에 필터를 더 추가 할 수도 있다.
ProductName 경로를 검색하고 지정된 쿼리 문자열을 검색 할 필터 연산자를 지정한다.
Control들은 view ID에 의해 자동으로 접두사가 붙기 때문에 view에 사용된 list는 지정된 ID로 액세스 할 수 있다.
우리는 helper function byId를 사용하여 control에 view를 요청한다.
List Control에서 우리는 새로 생성 된 filter 객체로 필터하기 위해 item aggregation의 바인딩에 액세스한다.
이렇게하면 검색 문자열에 따라 자동으로 목록이 필터링 되므로 검색이 실행될 때 일치하는 항목만 표시한다.
operatorFilterOperator.Contains 필터는 대/소문자를 구분하지 않는다.
API Reference: sap.ui.model.Filter