【SAPUI5】리스트 필터링

필터란?

목록에 표시되는 레코드를 특정 조건으로 필터링하려는 경우 필터를 사용합니다. SAPUI5에서는 SearchField라는 컨트롤을 사용하여 필터를 구현합니다.

필터 구현

목표

목록에 검색 기준을 추가하여 제품 이름별로 결과를 좁힐 수 있습니다.

단계

전제: 【SAPUI5】입문편의 기사 정리(2)

뷰에 SearchFiled 추가

컨트롤러에 검색 메소드 추가

1. 뷰에 SearchFiled 추가

App.view.xml의 List 다음을 다음과 같이 변경합니다.

변경 전

                            <List items="{mPricelist>/products}">
                                <items>
                                    <ObjectListItem
                                     ・・・

변경 후

                            <List 
                                id="productList"
                                items="{mPricelist>/products}">
                                <headerToolbar>
                                    <Toolbar>
                                        <Title width="100%" text="Products"/>
                                        <SearchField search="onFilterProducts"/>                                        
                                    </Toolbar>
                                </headerToolbar>

컨트롤러 측에서 목록을 식별할 수 있도록 id를 부여합니다.
List의 시작 부분에 Toolbar를 놓고 그 안에 Title과 SearchField를 배치합니다.
SearchFild는 검색을 수행할 때 호출되는 메서드를 지정합니다.

그런데 Toolbar 안에는 어떤 컨트롤을 둘 수 있을까요?
sap.m.Toolbar 참조 를 보면, Aggregations의 형태가 sap.ui.core.Control이 되어 있으므로, 무엇이든 OK인 것 같습니다. (시험에 Button을 추가해 보았는데, 가능했습니다)

2. 컨트롤러에 검색 방법 추가

App.controller.js에 다음 코드를 추가합니다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast",
    //追加↓
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    //追加↑
    "test/helloworld/model/formatter"
], function (Controller, JSONModel, MessageToast, 追加→Filter, 追加→FilterOperator, formatter) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {
        formatter: formatter,

        _data : {
            "date" : new Date()
        },

        onInit : function (oEvent) {
            var oModel = new JSONModel(this._data);
            this.getView().setModel(oModel);
        },

        onShowHello : function () {
            // read msg from i18n model
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sProduct = this.getView().getModel("mPrice").getProperty("/product/name");
            var sMsg = oBundle.getText("helloMessage", [sProduct]);

            // show a native JavaScript alert
            MessageToast.show(sMsg);
        },

        //追加
        onFilterProducts : function (oEvent) {

            // build filter array
            var aFilter = [];
            var sQuery = oEvent.getParameter("query");
            if (sQuery) {
                aFilter.push(new Filter("name", FilterOperator.Contains, sQuery));
            }

            // filter binding
            var oList = this.byId("productList");
            var oBinding = oList.getBinding("items");
            oBinding.filter(aFilter);           
        },      
   });
});     

첫째, Filter와 FilterOperator라는 두 클래스를 사용하기 위해 먼저 이들을 추가합니다.
onFilterProducts 메서드 내에서 SearchField에 입력한 검색 조건을 가져옵니다.
조건이 입력되면 필터 객체를 만들고 배열에 저장합니다.
※ 조건이 입력되지 않은 경우 배열은 비어 있습니다. 이렇게하면 조건을 지정하지 않고 검색을 실행할 때 필터가 걸리지 않습니다.
그런 다음 목록에 바인딩된 item을 검색하고 item에 대해 filter를 실행합니다.

참고로, 디버그로 보면 이벤트 파라미터의 query라는 파라미터에 입력한 조건이 설정되어 있는 것을 확인할 수 있었습니다.

결과

다음과 같이 제품명(name)으로 좁혀집니다. 검색 조건의 대소문자는 구별되지 않습니다.

Filter 생성 방법에 대해 자세히 알아보기

Filter 객체는 다음과 같이 생성되었습니다.new Filter("name", FilterOperator.Contains, sQuery)첫 번째 인수는 path(어떤 항목에 대해 필터링할지), 두 번째 인수는 operator(필터 조건)이고 세 번째 인수는 value(필터 값)입니다.
Filter에는 다음 세 가지 생성 방법이 있습니다. 이번 사례는 1번째에 해당합니다.

path, operator, 1개 또는 2개의 value(value1, value2)

path, 자체 필터 기능 (test)

filters로 묶인 여러 필터와 해당 필터를 AND로 연결할지 OR로 연결할지 여부의 플래그 (ture = AND, false = OR)

자세한 내용은 아래를 참조하십시오.
sap.ui.model.Filter

FilterOperator란?

FilterOperator는 필터 조건을 지정하는 상수 모음입니다.
필터 조건이란, 지정한 값을 「포함하는」인가 「같은」인가의 조건이라고 합니다.
이번에는 Contains를 사용했지만 '포함'에 해당합니다.
그 외, 일부를 이하에 기재합니다. 이 이외의 값에 대해서는 아래를 참조하십시오.
sap.ui.model.FilterOperator


값
의미


sap.ui.model.FilterOperator.BT
두 값 사이

sap.ui.model.FilterOperator.EndsWith
~로 끝나다

sap.ui.model.FilterOperator.EQ
~와 동일

sap.ui.model.FilterOperator.GT
~보다 크다

sap.ui.model.FilterOperator.StartsWith
~로 시작

참고로 한 페이지

Get Started: Setup and Tutorials-Walkthrough-Step 24: Filtering