La bonne utilisation de filtres lors de la liaison des éléments par la XMLView

À l'aide de sap.m.Select, j'en ai un similaire du code ci-dessous:

<m:Select
    selectedKey='{state}'
    items="{
        path: 'states>/content',
        sorter: {
            path: 'name'
        }
    }">
    <core:Item key="{states>id}" text="{states>name}" />
</m:Select>

Que voulez être en mesure de filtrer les membres par pays lorsqu'il est sélectionné dans une autre entrée, donc, je vais essayer à l'aide de filters, qui est défini dans la documentation en:

Le problème est que je ne pouvais pas trouver n'importe où (docs, google, DONC, le code source, des exemples, des tests) montrant comment bien l'utiliser. J'ai essayé ces 2 façons, sans succès:

<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'
}),
...

Tout le monde le sait, la bonne façon de l'utiliser?

InformationsquelleAutor Marinho Brandão | 2016-04-22

sapui5

Ici est de savoir comment les filtres de travail dans des Vues XML - voir les 2 exemples ci-dessous j'ai codé pour vous (utilisez le jsbin liens si ils ne fonctionnent pas ici sur stackoverflow). Ils utilisent tous les deux les Comptoirs de service OData. Comme vous le verrez c'est assez simple:

<Select
    items="{
        path : '/Orders',
        sorter: {
            path: 'OrderDate',
            descending: true
        },
        filters : [
            { path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'}
        ]
    }">

Bien sûr, vous pouvez ajouter plusieurs filtres (voir le deuxième exemple ci-dessous).

Cependant, gardez à l'esprit que les filtres sont déclarées dans le XMLView. Malheureusement, UI5 est actuellement pas très dynamique pour permettre le changement de tels filtres définis dans un XMLView dynamiquement en utilisant uniquement la syntaxe de liaison dans le XMLView. Au lieu de cela, vous auriez besoin d'un morceau de code JavaScript. Dans votre cas, vous pouvez écouter l'événement de changement de l'autre champ. Dans le gestionnaire d'événements, vous serait alors simplement de créer un nouveau Filtre et de l'appliquer:

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

Qui devrait être tout ce que vous devez faire. Les exemples ci-dessous, ne pas utiliser de code JavaScript pour le filtre, mais je suppose que vous avez l'idée.

1. Exemple - boîte de sélection:

Exécuter le code: https://jsbin.com/wamugexeda/edit?html,sortie

HTML:

<!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. Exemple De Table:

Exécuter le code: https://jsbin.com/yugefovuyi/edit?html,sortie

HTML:

<!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>

est-il possible d'utiliser la variable dans valeur1 ?
Non, ce n'est pas pris en charge à compter d'aujourd'hui.
Petite question, est il possible que je peux avoir plusieurs filtres qui travaillent dans un OU logique? Je veux les mettre en œuvre dans le XML, par l'ajout de filtres, ils peuvent être combinés avec un ET

InformationsquelleAutor Nabi

Vous devez vous connecter pour publier un commentaire.