Open UI5 : Tables en-tête et détails

Nous allons maintenant reprendre le projet « CalculatedFields » créé précédemment, que nous allons faire évoluer afin d’ajouter en table d’en-tête contenant la liste des sports. Dès lors que l’utilisateur sélectionne un sport, la table de détails (liste des sportifs) sera filtrée avec les sportifs correspondants au sport sélectionné.

Pour ce faire il conviendra de créer une nouvelle table (contenant la liste des sports donc) qui filtrera la seconde table (liste des sportifs) via la méthode attachRowSelectionChange.

Adapter la méthode createContent comme suit pour répondre à ce nouveau besoin :


createContent : function(oController) {
//Donnees de la table :
var tableData = {
//Les sports :
« sports » : [
{« sport »:« Tous »},
{« sport »:« Athletisme »},
{« sport »:« Badminton »},
{« sport »:« Basketball »},
{« sport »:« Boxe »},
{« sport »:« Tennis »},
],
//Les sportifs :
« data » : [
{« nom »:« Bolt »,« prenom »:« Usain »,« discipline »:« Athletisme »},
{« nom »:« Jordan »,« prenom »:« Michael »,« discipline »:« Basketball »},
{« nom »:« Blake »,« prenom »:« Yohan »,« discipline »:« Athletisme »},
{« nom »:« Bryant »,« prenom »:« Kobe »,« discipline »:« Basketball »},
{« nom »:« Johnson »,« prenom »:« Magic »,« discipline »:« Basketball »},
{« nom »:« Tyson »,« prenom »:« Mike »,« discipline »:« Boxe »},
{« nom »:« Kournikova »,« prenom »:« Anna »,« discipline »:« Tennis« },
{« nom »:« Holyfield »,« prenom »:« Evander »,« discipline »:« Boxe »},
{« nom »:« Lee »,« prenom »:« Chong Wei »,« discipline »:« Badminton »}
]};

//Creation de l’instance du model JSON :
var oModel = new sap.ui.model.json.JSONModel();
var oPanel = new sap.m.Panel(« panel »);
var oPanel1 = new sap.m.Panel(« panel1 », {headerText:« Les sports »});
var oPanel2 = new sap.m.Panel(« panel2 », {headerText:« Les sportifs »});

//Donnees du model :
oModel.setData(tableData);

//Creation de la table :
var oTableSports = new sap.ui.table.Table({
width: « 100% »,
columns: [
//Colonne Sport :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Sport »}),
template: new sap.ui.commons.TextView({ text: « {sport} »}),
})],
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
visibleRowCount:oModel.getData().sports.length,
});

//Model de la table de sports :
oTableSports.setModel(oModel);
//Binding de la table de sports :
oTableSports.bindRows(« /sports »);
//Ajout de la table au Panel 1 :
oPanel1.addContent(oTableSports);

//Creation de la table :
var oTable = new sap.ui.table.Table({
width: « 100% »,
columns: [
//Colonne Nom :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Nom »}),
template: new sap.ui.commons.TextView({ text: « {nom} »}),
}),
//Colonne Prenom :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Prenom »}),
template: new sap.ui.commons.TextView({ text: « {prenom} »}),
}),
//Colonne discipline :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Discipline »}),
template: new sap.ui.commons.TextView({ text: « {discipline} »}),
}),
//Colonne Description :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Description »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « nom », type: new sap.ui.model.type.String()},
{path: « prenom », type: new sap.ui.model.type.String()},
{path: « discipline », type: new sap.ui.model.type.String()} ],
formatter: function(nom, prenom,discipline){
if( discipline != null){
if( discipline.charAt(0) == « A »){
return prenom +  » «  + nom +  » est un champion d' » + discipline;
}
else{
return prenom +  » «  + nom +  » est un champion de «  + discipline;
}
}
}
}}),
}),
],
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
visibleRowCount:oModel.getData().data.length,
});

//Model de la table de sportifs :
oTable.setModel(oModel);
//Binding de la table de sportifs :
oTable.bindRows(« /data »);
//Ajout de la table au Panel 2 :
oPanel2.addContent(oTable);

//Ajout du Panel 1 au Panel global :
oPanel.addContent(oPanel1);
//Ajout du Panel 2 au Panel global :
oPanel.addContent(oPanel2);

//Evenement selection ligne :
oTableSports.attachRowSelectionChange(function(oEvent){
//Recuperation du contexte :
var selectedRowContext = oEvent.getParameter(« rowContext »);
//Recuperation du sport selectionne :
var selectedSport = oModel.getProperty(« sport », selectedRowContext);
//Binding sur table des sportifs :
var sportifsBinding = oTable.getBinding();
if (selectedSport == « Tous »){
//Application du filtre :
sportifsBinding.filter(null);
}
else{
//Filtre sur le sport :
var oFilter = new sap.ui.model.Filter(« discipline », sap.ui.model.FilterOperator.EQ, selectedSport);
//Application du filtre :
sportifsBinding.filter(oFilter);
}
});

return new sap.m.Page({
title: « Calculated fields Demo »,
content: [
oPanel
]
});
}


A la fin vous devriez obtenir cela :
2015-04-07_185038

2015-04-07_185219

2015-04-07_185314

Publicités

2 commentaires sur “Open UI5 : Tables en-tête et détails

  1. Salut Jo !

    Ils sont top tes articles !

    Concernant SAPUI5, as-tu prévu un exemple avec des données provenant de SAP en ODATA, et mises à jour côté client Web avec SAPUI5 ?

    A bientôt !

    Olivier B.

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 )

Connexion à %s