OpenUI5 : Tris et Filtres

Il est possible de trier et filtrer les données d’un modèle via les méthodes Sorter (sap.ui.model.Sorter) et Filter (sap.ui.model.Filter).

Pour cet exemple nous allons créer deux ComboBox, la première permettant, au choix, de trier ou filtrer les données de la seconde :
Capture d’écran 2015-04-03 à 00.07.39

Pour ce faire nous allons créer une fonction « sortFilter » permettant d’appliquer les tris/filtres et qui sera appelée par la méthode sap.m.ComboBox.attachSelectionChange() :


sortFilter : function (oEvent) {
//Recuperation de la fonction :
var fonction = oEvent.oSource.getSelectedItem().getBindingContext(« ModelOptions »).getProperty(« id »);
//Recuperation du binding :
var oBinding = sap.ui.getCore().byId(« dataVal »).getBinding(« items »);
//Selon la fonction :
switch(fonction){
//Tri par prenom :
case « sortPrenom »:
//Reinitialisation du filtre :
oBinding.filter(null);
//Tri par prenom :
oBinding.sort(new sap.ui.model.Sorter(« prenom », false));
break;
//Tri par nom :
case « sortNom »:
//Reinitialisation du filtre :
oBinding.filter(null);
//Tri par nom :
oBinding.sort(new sap.ui.model.Sorter(« nom », false));
break;
//Tri par parent :
case « filterParent »:
//Filtre par parent :
oBinding.filter(new sap.ui.model.Filter(« fonction », sap.ui.model.FilterOperator.EQ, « parent »));
break;
//Tri par enfant :
case « filterEnfant »:
//Filtre par enfant :
oBinding.filter(new sap.ui.model.Filter(« fonction », sap.ui.model.FilterOperator.EQ, « enfant »));
break;
}
},

createContent : function(oController) {
//****************** DECLARATION DES VARIABLES *********************
//JSon data – Liste des options :
var optionList = { « selection »:« Choose an option »« options »: [
    { « id »:« sortPrenom », « text »:« Trier par prenom »},
    { « id »:« sortNom », « text »:« Trier par nom »},
    { « id »:« filterParent », « text »:« Filtrer par parent »},
    { « id »:« filterEnfant », « text »:« Filtrer par enfant »},
    ]};
//JSon data – Liste des personnages :
var dataList = { « data »: [
{« id »: « hsimpson », « nom »: « Simpson », « prenom »: « Homer »,
« sexe »:« masculin », « fonction »:« parent »,   « text »: « Homer Simpson »},
{« id »: « msimpson », « nom »: « Simpson », « prenom »: « Marge »,
« sexe »:« feminin », « fonction »:« parent », « text »: « Marge Simpson »},
{« id »: « bsimpson », « nom »: « Simpson », « prenom »: « Bart »,
« sexe »:« masculin », « fonction »:« enfant », « text »: « Bart Simpson »},
{« id »: « lsimpson », « nom »: « Simpson », « prenom »: « Lisa »,
« sexe »:« feminin », « fonction »:« enfant », « text »: « Lisa Simpson »},
{« id »: « msimpson2 », « nom »: « Simpson », « prenom »: « Maggie »,
« sexe »:« feminin », « fonction »:« enfant », « text »: « Maggie Simpson »}
]};

//Creation des instances de models :
var oModelOptions = new sap.ui.model.json.JSONModel();
var oModelData = new sap.ui.model.json.JSONModel();
//Assignation des donnees au model – Options :
oModelOptions.setData(optionList);
//Assignation des donnees au model – Data :
oModelData.setData(dataList);
//Assignation du model options :
sap.ui.getCore().setModel(oModelOptions, « ModelOptions »);
//Assignation du model data :
sap.ui.getCore().setModel(oModelData, « ModelData »);
//Panel :
var oPanel = new sap.m.Panel(« panel »);
//Layout :
var oLayout = new sap.ui.commons.layout.MatrixLayout(« layout »);
//Label Options :
var oOptionsLbl = new sap.m.Label(« optionsLbl », {text:« Options », labelFor:« oOptionsVal »});
//Options :
var oOptionsVal = new sap.m.ComboBox(« optionsVal »);
//Label Personnages :
var oDataLbl = new sap.m.Label(« dataLbl », {text:« Personnages », labelFor:« oDataVal »});
//Personnages :
var oDataVal = new sap.m.ComboBox(« dataVal »);
//Ajout des options dans le Select :
//oOptionsVal.bindAggregation(« items », {path: »ModelOptions>/options », template: new sap.ui.core.ListItem(« options », {text: « {ModelOptions>text} »,  key: « {ModelOptions>id} » })});
oOptionsVal.bindItems({path:« ModelOptions>/options », template:new sap.ui.core.ListItem(« options », {text: « {ModelOptions>text} »,  key: « {ModelOptions>id} » })});
oOptionsVal.bindValue(« ModelOptions>/selection »);
oOptionsVal.attachSelectionChange(this.sortFilter);
//Ajout des personnages dans le Select :
//oDataVal.bindAggregation(« items », {path: »ModelData>/data », template: new sap.ui.core.ListItem(« data », {text: « {ModelData>text} »,  key: « {ModelData>id} » })});
oDataVal.bindItems({path:« ModelData>/data », template:new sap.ui.core.ListItem(« data », {text: « {ModelData>text} »,  key: « {ModelData>id} » })});
//Longueur totale du layout :
oLayout.setWidth(« 100% »);
//Longueur de chaque colonne du layout :
oLayout.setWidths(« 30% »,« 70% »);
//Creation de la ligne dans le layout :
oLayout.createRow(oOptionsLbl,oOptionsVal);
//Ajout des personnes dans le select :
oLayout.createRow(oDataLbl,oDataVal);
//Ajout du layout au panel :
oPanel.addContent(oLayout);
//Ajout du panel au layout :
oPanel.placeAt(« content »);
}


A la fin vous devriez avoir le résultat suivant :
Capture d’écran 2015-04-03 à 00.07.39

Capture d’écran 2015-04-03 à 00.17.53

Capture d’écran 2015-04-03 à 00.17.17

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s