[UI5] Filtering

이 단계에서는 제품 목록에 대한 검색 필드를 추가하고 검색 용어를 나타내는 필터를 정의힌다. 검색 할 때 검색어가 일치하는 항목만 표시되도록 목록이 자동으로 업데이트된다.

invoiceList.view.xml

    <List
        id="invoiceList"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}" >  <!-- invoices.json의 객체 Invoices를 가져온다 -->
        <headerToolbar>
            <Toolbar>
                <Title text="{i18n>invoiceListTile}" />
                <ToolbarSpacer />
                <SearchField width="50%" search=".onFilterInvoices" />
            </Toolbar>
        </headerToolbar>

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", {
        formatObj : formatter ,
        onInit : function (){
            var oViewModel = new JSONModel({

            });
            this.getView().setModel(oViewModel, "view");
        },

검색하면 검색에 맞는 조건으로 필터링을 해주기 위해 Filter와 FilterOperator 경로, 매개변수를 추가한다.

        onFilterInvoices : function (oEvent) {
            var aFilter = [];
            var sQuery = oEvent.getParameter("query"); 

이벤트 객체에 getParameter라는 메소드에 query라는 프로포티가 있다. 이 query 프로포티에 검색창에서 입력된 값이 들어가고 그 값을 변수에 담는다. aFilter는 아래에서 사용한다.

            if( sQuery ){
                aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
            }

만약 sQuery에 값이 있으면(사용자가 검색창에 값을 입력했다면) 그걸 aFliter에 넣는다. new Filter에는 어떤걸 필터로 잡고, 어떤방법으로 필터를 걸거고, 키워드가 무엇인지 입력한다. 그래서 제품의 이름을 필터로 잡고, Contains는 a를 검색하면 a가 들어간 모든 항목을 보이게 하며, sQuery가 키워드가 된다.

Contains말고도 All, Any, BT(between, 숫자만).... 등 다양한 필터 방법이 있다.

            var oList= this.byId("invoiceList"); 
            var oBinding = oList.getBinding("items"); 
            oBinding.filter(aFilter);            
        }        
    });
});

뷰에서 List 모듈에 invoiceList ID를 부여했으므로 컨트롤러에서 this.byId로 가져온다.

byId
모델을 통하지않고 뷰 데이터 변경할수있는 방법이다. id남발하면 듀플리케이트id가 발생할 수 있기 때문에 꼭 필요할때만 사용해야한다.

getBinding으로 item 모듈안의 aggregation을 가져온다. 여러개가 반복되기 때문에 배열상태기 때문에 filter 메소드로 aFilter에 배열을 넣어준다. 그래서 aFilter 변수는 배열의 상태로 데이터를 가지고 있다.