제품 목록에 대한 검색 필드를 추가하고 검색 할 때 검색어가 일치하는 항목만 표시 되도록 한다.

Preview

24_preview.png

Coding

Walkthrough - Step 24.

webapp/view/InvoiceList.view.xml

<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를 사용하여 오른쪽에 위치시킨다.

webapp/controller/InvoiceList.controller.js

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

API Reference: sap.ui.model.FilterOperator

API Reference: sap.m.SearchField