본문 바로가기
Fiori/UI5

[UI5] Input Value Help (Fragment)

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


Main.view.xml

<fb:FilterGroupItem label="프로젝트" groupName="default" name="A" visibleInFilterBar="true">
    <fb:control>
        <m:Input id="idInputPosid" 
                 type="Text" 
                     enabled="true" 
                         showValueHelp="true" 
                     valueHelpRequest="onF4" 
                         value="{F4SelectModel>/posid}">
            <m:customData>
                <core:CustomData key="f4InputPosid" 
                                 value="F4Posid" writeToDom="false"/>
            </m:customData>
        </m:Input>
    </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"
                         valueHelpRequest="onF4" 
                         value="{F4SelectModel>/lifnr}">
            <m:customData>
                <core:CustomData key="f4InputLifnr" 
                                 value="F4Lifnr" writeToDom="false"/>
            </m:customData>
        </m:Input>
    </fb:control>
</fb:FilterGroupItem>

showValueHelp valuehelp 버튼이 생기게 한다.
valueHelpRequest valuehelp 버튼을 클릭했을때 해당 함수 로직을 탄다.
valueHelpOnly 의 값을 "true"로 주면 필수값으로 설정한다.

CustomData는 반복되는 로직을 재사용하기 위해..



Main.controller.js

사용한 컴포넌트

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageBox",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/ui/model/Sorter",
"sap/ui/table/library",
"sap/ui/core/Fragment"
], function(Controller, JSONModel, MessageBox, Filter, FilterOperator, Sorter, library, Fragment)

Init

            var oMainModel = new JSONModel();
            this.getView().setModel(oMainModel, "mainModel");

            var oDataF4 = {
                "F4Lifnr": [],
                "F4Posid": []
            };
            var oF4Model = new JSONModel(oDataF4);
            this.getView().setModel(oF4Model, "F4Model");

            var oSelectF4 = {
                lifnr: "",
                posid: ""
            };
            var oF4SelectModel = new JSONModel(oSelectF4);
            this.getView().setModel(oF4SelectModel, "F4SelectModel");

F4Model valueHelp를 클릭했을때 나오는 데이터를 가지고 있는 모델이다.
F4SelectModel valueHelp에서 클릭한 값을 가지고 있는 모델이다.


onF4

        onF4: function(oEvent) {
            sSelectId = oEvent.getSource().getAggregation('customData')[0].mProperties['key'];
            this._getDialog(oEvent);
        },

sSelectId 전역변수로 선언해준다. var sSelectId = "";

_getDialog

        _getDialog: function(oEvent) {
            var self = this;
            var sPath = oEvent.getSource().getAggregation('customData')[0].mProperties['value'];

            switch (sPath) {
                case 'F4Posid':
                    if (!this._oPosidDialog) {
                        this._oPosidDialog = sap.ui.xmlfragment("프로그램명.view.fragments." + sPath, this);
                        this.getView().addDependent(this._oPosidDialog);

                        var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/오데이터/", true);
                        oModel.read("/F4PosidSet", {
                            success: function(oResult, response) {
                                self.getView().getModel("F4Model").setProperty("/F4Posid", oResult.results);
                            }
                        });
                    }
                    this._oPosidDialog.open();
                    break;
                case 'F4Lifnr':
                    if (!this._oLifnrDialog) {
                        this._oLifnrDialog = sap.ui.xmlfragment("프로그램명.view.fragments." + sPath, this);
                        this.getView().addDependent(this._oLifnrDialog);

                        var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/오데이터/", true);
                        oModel.read("/F4LifnrSet", {
                            success: function(oResult, response) {
                                self.getView().getModel("F4Model").setProperty("/F4Lifnr", oResult.results);
                            }
                        });
                    }
                    this._oLifnrDialog.open();
                    break;
            }

        },


Fragments (New)

F4Lifnr.fragment.xml

<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:core="sap.ui.core">
    <SelectDialog
            id="F4Lifnr"
            title="{i18n>titleF4Lifnr}"
            class="sapUiPopupWithPadding"
            items="{F4Model>/F4Lifnr}"
            search="onF4Search"
            liveChange="onF4Search"
            confirm="onF4Select"
            cancel="onF4Select">
     <items>
        <StandardListItem
                title="{F4Model>Lifnr}"
                info="{F4Model>Name1}" />
        </items>
    </SelectDialog>
</core:FragmentDefinition>

F4Posid.fragment.xml

<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:core="sap.ui.core">
    <SelectDialog
            id="F4Posid"
            title="{i18n>titleF4Posid}"
            class="sapUiPopupWithPadding"
            items="{F4Model>/F4Posid}"
            search="onF4Search"
            liveChange="onF4Search"
            confirm="onF4Select"
            cancel="onF4Select">
     <items>
        <StandardListItem
                title="{F4Model>Posid}"
                info="{F4Model>Post1}" />
        </items>
    </SelectDialog>
</core:FragmentDefinition>


Main.controller.js


onF4Search

Dialog의 검색버튼을 눌렀을때 탄다.

        onF4Search: function(oEvent) {
            var sF4 = oEvent.getSource().getId();

            switch (sF4) {
                case 'F4Posid':
                    this._callF4Search(oEvent, 'Posid');
                    break;
                case 'F4Lifnr':
                    this._callF4Search(oEvent, 'Lifnr');
                    break;
            }
        },

_callF4Search

        _callF4Search: function(oEvent, aFields) {
            var sValue = oEvent.getParameter("value");

            if (!aFields && aFields.length === 0) {
              return;
            }

            var aFilters = [];
            aFilters.push(new Filter(aFields, FilterOperator.Contains, sValue));

            oEvent.getParameters().itemsBinding.filter(aFilters); //segw odata
        },

onF4Select

Dialog의 데이터를 선택했을때 탄다.

        onF4Select: function(oEvent) {
            var sF4 = oEvent.getSource().getId();
            var oSelectedInfo = this._callF4Select(oEvent);

            if (!oSelectedInfo.title || oSelectedInfo.title.length === 0) {
                return;
            }

            switch (oSelectedInfo.id) {
                case 'f4InputPosid':
                    this.getView().getModel("F4SelectModel").setProperty("/posid", oSelectedInfo.title);
                    break;
                case 'f4InputLifnr':
                    this.getView().getModel("F4SelectModel").setProperty("/lifnr", oSelectedInfo.title);
                    break;
            }

            // this._refresh();
        },

_callF4Select

        _callF4Select: function(oEvent) {

            var oSelectedItem = oEvent.getParameter("selectedItem");
            if (oSelectedItem) {
                var sTitle = oSelectedItem.getProperty('title');
            }

            oEvent.getSource().getBinding("items").filter([]);

            return {
                id: sSelectId,
                title: sTitle
            };
        }
728x90
반응형

댓글