본문 바로가기
Fiori/UI5

[UI5] Filterbar (with OData)

by clode 2023. 3. 8.
728x90
반응형

view.xml

<mvc:View xmlns:m="sap.m" xmlns:core="sap.ui.core" xmlns:fb="sap.ui.comp.filterbar" xmlns="sap.ui.table" >
                <m:content>
                    <fb:FilterBar id="filterbar" showFilterConfiguration="false" useToolbar="false" filterContainerWidth="12rem" search=".onSearch">
                        <fb:filterGroupItems>
                            <fb:FilterGroupItem label="프로젝트" groupName="default" name="A" visibleInFilterBar="true">
                                <fb:control>
                                    <m:Input id="input_posid"/>
                                </fb:control>
                            </fb:FilterGroupItem>
                            <fb:FilterGroupItem label="업체번호" groupName="default" name="B" visibleInFilterBar="true">
                                <fb:control>
                                    <m:Input  id="idInputLifnr"
                                                                                  type="Text"
                                                                                  enabled="true"
                                                                                  showValueHelp="true"
                                                                                  valueHelpOnly="true"
                                                                                  valueHelpRequest="onF4"
                                                                                  value="{
                                                                                    path: 'mainModel>/lifnr',
                                                                                    type: 'sap.ui.model.type.String',
                                                                                    constraints : {
                                                                                      minLength : 1
                                                                                    }
                                                                                  }" >
                                        <m:customData>
                                          <core:CustomData key="f4InputLifnr" value="F4Lifnr" writeToDom="false"/>
                                        </m:customData>
                                    </m:Input>
                                </fb:control>
                            </fb:FilterGroupItem>
                            <fb:FilterGroupItem label="구매월" groupName="default" name="C" visibleInFilterBar="true">
                                <fb:control>
                                    <m:DatePicker dateValue="{filterbar>/POMonth}" displayFormat="{filterbar>/dateFormat}" valueFormat="{filterbar>/valueFormat}"
                                        placeholder="yyyy-MM"/>
                                    <!--width="auto"-->
                                </fb:control>
                            </fb:FilterGroupItem>
                            <fb:FilterGroupItem label="입고월" groupName="default" name="D" visibleInFilterBar="true">
                                <fb:control>
                                    <m:DatePicker dateValue="{filterbar>/GRMonth}" displayFormat="{filterbar>/dateFormat}" valueFormat="{filterbar>/valueFormat}"
                                        placeholder="yyyy-MM"/>
                                </fb:control>
                            </fb:FilterGroupItem>
                        </fb:filterGroupItems>
                    </fb:FilterBar>
                </m:content>

controller - onSearch

sap.ui.define([
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter",
    var SortOrder = library.SortOrder;

    return Controller.extend("프로그램명.controller.Main", {
        oFilter: [],
        onInit: function() {
            var oData = {
                POMonth: null,
                GRMonth: null,
                dateFormat: "yyyy-MM",
                valueFormat: "yyyyMM"
            };

            var oModel = new JSONModel(oData);
            this.getView().setModel(oModel, "filterbar");

            this.getView().byId("filterbar")._oSearchButton.setText("조회");
            this._bDescendingSort = false;
 }

전역으로 선언

        onSearch: function(oEvent) {
            var aFilter = [];

            var sPosid = oEvent.getParameters().selectionSet[0].getProperty("value");
            var sLifnr = oEvent.getParameters().selectionSet[1].getProperty("value");
            var sPOMonth = oEvent.getParameters().selectionSet[2].getProperty("value");
            var sGRMonth = oEvent.getParameters().selectionSet[3].getProperty("value");

            // build filter array
            if (sPOMonth) {
                aFilter.push(new Filter("ZPO_MONTH", FilterOperator.EQ, sPOMonth));
            }
            if (sGRMonth) {
                aFilter.push(new Filter("ZGR_MONTH", FilterOperator.EQ, sGRMonth));
            }
            if (sLifnr) {
                aFilter.push(new Filter("lifnr", FilterOperator.EQ, sLifnr));
            }
            if (sPosid) {
                aFilter.push(new Filter("posid", FilterOperator.EQ, sPosid));
            }

            var that = this;

            var oTable = this.getView().byId("Table");
            var oBinding = oTable.getBinding("rows");

            var oMainModel = this.getView().getModel("mainModel");
            var oModel = new sap.ui.model.odata.ODataModel(
                 "https주소/sap/opu/odata/sap/odataName);


            oModel.read("/entitySetName", {
                filters: aFilter,
                success: function(oData, response) {
                    oMainModel.setData(oData.results);

                    //table sorting                    
                    var oProductNameColumn = that.getView().byId("idColumnlifnr");
                    oTable.sort(oProductNameColumn, SortOrder.Ascending);

                    setTimeout(function() {
                        oTable.setBusy(false);
                    }, 10);
                }
            });
        },
728x90
반응형

'Fiori > UI5' 카테고리의 다른 글

[UI5] yyyy-MM-dd 날짜 출력하기  (0) 2023.03.09
[UI5] Table Sort  (0) 2023.03.08
[UI5] 비동기처리와 Promise  (0) 2023.03.08
[UI5] Fragment dialog  (0) 2023.03.08
[UI5] Routing Detail Page  (0) 2023.03.08

댓글