XMLViewを介してアイテムをバインドするときのフィルターの正しい使用法
sap.m.Selectを使用すると、以下と同様のコードが得られます。
<m:Select
selectedKey='{state}'
items="{
path: 'states>/content',
sorter: {
path: 'name'
}
}">
<core:Item key="{states>id}" text="{states>name}" />
</m:Select>
別の入力で選択された国によって国をフィルタリングできるようにするため、次のドキュメントで定義されているfiltersを使用しようとしています。
- https://sapui5.netweaver.ondemand.com/docs/api/symbols/sap.ui.base.ManagedObject.html#bindAggregation
- https://sapui5.netweaver.ondemand.com/#docs/api/symbols/sap.ui.model.Filter.html
問題は、それを正しく使用する方法を示す場所（ドキュメント、グーグル、SO、ソースコード、例、テスト）がどこにも見つからなかったことです。私はこれらの2つの方法を試しましたが、成功しませんでした。
<m:Select
selectedKey='{state}'
items="{
path: 'states>/content',
sorter: {
path: 'name'
},
filters: [{
path: 'countryId',
operator: 'EQ',
value1: '10' // just example
]}
}">
<core:Item key="{states>id}" text="{states>name}" />
</m:Select>
そして
# View
<m:Select
selectedKey='{state}'
items="{
path: 'states>/content',
sorter: {
path: 'name'
},
filters: ['.filterByCountry'}
}">
<core:Item key="{states>id}" text="{states>name}" />
</m:Select>
# Controller
...
filterByCountry: new sap.ui.model.Filter({
path: 'countryId',
operator: 'EQ',
value1: '10'
}),
...
誰かがそれを使用する適切な方法を知っていますか？
XMLビューでフィルターがどのように機能するかを以下に示します。以下の2つの例を参照してください（stackoverflowで実行されない場合はjsbinリンクを使用してください）。どちらもNorthwind ODataサービスを使用します。ご覧のとおり、かなり簡単です。
<Select
items="{
path : '/Orders',
sorter: {
path: 'OrderDate',
descending: true
},
filters : [
{ path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'}
]
}">
もちろん、複数のフィルターを追加することもできます（下の2番目の例を参照）。
ただし、フィルターはXMLViewで宣言されていることに注意してください。残念ながら、現在UI5はそれほど動的ではないため、XMLViewでバインド構文を使用するだけでXMLViewで定義されたそのようなフィルターを動的に変更できます。代わりに、JavaScriptコードが必要になります。あなたの場合、他のフィールドの変更イベントをリッスンできます。イベントハンドラーで、新しいフィルターを作成して適用するだけです。
var oSelect, oBinding, aFilters, sShipCountry;
sFilterValue = ...; // I assume you can get the filter value from somewhere...
oSelect = this.getView().byId(...); //get the reference to your Select control
oBinding = oSelect.getBinding("items");
aFilters = [];
if (sFilterValue){
aFilters.Push( new Filter("ShipCountry", FilterOperator.Contains, sFilterValue) );
}
oBinding.filter(aFilters, FilterType.Application); //apply the filter
あなたがする必要があるのはそれだけです。以下の例では、フィルターにJavaScriptコードを使用していませんが、アイデアが得られると思います。
1。例-選択ボックス：
コードを実行します： https://jsbin.com/wamugexeda/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 single file template | nabisoft</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="Edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="MyController"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Select
items="{
path : '/Orders',
sorter: {
path: 'OrderDate',
descending: true
},
filters : [
{ path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'}
]
}">
<core:Item key="{OrderID}" text="{OrderID} - {ShipName}" />
</Select>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### Controller ###
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/odata/v2/ODataModel"
], function (Controller, ODataModel) {
"use strict";
return Controller.extend("MyController", {
onInit : function () {
this.getView().setModel(
new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
json : true,
useBatch : false
})
);
}
});
});
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>2。例-テーブル：
コードを実行します： https://jsbin.com/yugefovuyi/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 single file template | nabisoft</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="Edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="MyController"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Table
id="myTable"
growing="true"
growingThreshold="10"
growingScrollToLoad="true"
busyIndicatorDelay="0"
items="{
path : '/Orders',
sorter: {
path: 'OrderDate',
descending: true
},
filters : [
{ path : 'ShipCity', operator : 'Contains', value1 : 'rio'},
{ path : 'ShipName', operator : 'EQ', value1 : 'Hanari Carnes'}
]
}">
<headerToolbar>
<Toolbar>
<Title text="Orders of ALFKI"/>
<ToolbarSpacer/>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="OrderID"/>
</Column>
<Column>
<Text text="Order Date"/>
</Column>
<Column>
<Text text="To Name"/>
</Column>
<Column>
<Text text="Ship City"/>
</Column>
</columns>
<items>
<ColumnListItem type="Active">
<cells>
<ObjectIdentifier title="{OrderID}"/>
<Text
text="{
path:'OrderDate',
type:'sap.ui.model.type.Date',
formatOptions: { style: 'medium', strictParsing: true}
}"/>
<Text text="{ShipName}"/>
<Text text="{ShipCity}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### Controller ###
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/odata/v2/ODataModel"
], function (Controller, ODataModel) {
"use strict";
return Controller.extend("MyController", {
onInit : function () {
this.getView().setModel(
new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
json : true,
useBatch : false
})
);
}
});
});
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>