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
반응형
'Fiori > UI5' 카테고리의 다른 글
[UI5] 금액, 수량필드 단위 같이 나오기 (ObjectNumber), +금액필드 콤마(sap.ui.model.type.Currency) (0) | 2023.03.09 |
---|---|
[UI5] yyyy-MM-dd 날짜 출력하기 (0) | 2023.03.09 |
[UI5] Table Sort (0) | 2023.03.08 |
[UI5] Filterbar (with OData) (0) | 2023.03.08 |
[UI5] 비동기처리와 Promise (0) | 2023.03.08 |
댓글