Introduction et récapitulation
Dans le billet de blog précédent , nous avons commencé à concevoir notre application en rendant un tableau avec un partenaire commercial. Nous avons appris ce qu'est le protocole OData, comment lire un manifeste XML OData, comment lier des données à une table et comment personnaliser la disposition des colonnes en fonction de différentes résolutions d'écran.
Que couvrira cet exercice
Avec la partie 2 de cette série d'articles de blog, nous apprendrons comment interagir avec les données de nos tableaux et listes. Nous apprendrons comment filtrer et trier les données de manière intelligente.
- Créer JSONModel pour gérer les données locales
- Définissez un sizeLimit par défaut sur notre JSONModel
- FilterBar : contrôle d'interface utilisateur qui affiche les filtres de manière conviviale pour remplir les valeurs d'une requête
- Utiliser des fragments XML pour créer une boîte de dialogue Paramètres d'affichage pour gérer les données de tri et de groupe
- Filtrer et trier les données
- Ajoutez une barre d'outils d'informations à notre tableau pour afficher des informations utiles
Codons
Filterbar
La première chose que nous voulons faire est de permettre aux utilisateurs de filtrer la liste des partenaires commerciaux affichée sur notre tableau. La plupart du temps, nous avons de très grandes données à afficher (notre ensemble de partenaires commerciaux est composé de 13880 enregistrements) et l'utilisateur veut simplement filtrer tous ces enregistrements en fonction d'informations utiles.
Règle générale: n'affichez pas d'entrée de filtre pour les éléments d'information qui ne sont pas affichés dans votre tableau / liste
Pour ce faire, vous devez ajouter un FilterBar au-dessus de votre table. Ce contrôle d'interface utilisateur est uniquement disponible sur SAPUI5 et non dans OpenUI5.
FilterBar vous permet de grouper le filtre de manière ordonnée. Ce contrôle d'interface utilisateur est toujours utilisé avec un gestionnaire de variantes que je ne couvrirai pas cette fois.
Ajoutez quatre filtres différents:
- ID: entrée qui filtrera l'attribut BusinessPartnerID
- Nom: entrée qui filtrera l'attribut CompanyName
- Rue: entrée qui
- Pays: sélectionnez ( liste de codes de pays JSON ) pour filtrer l'attribut Adresse / Pays
Après avoir ajouté ces entrées au FilterBar, vous devez vous lier aux événements "search" et "clear". Le premier sera déclenché lorsque l'utilisateur lancera une recherche, le second lorsque vous devrez effacer tous les filtres et lancer une recherche vide.
Les filtres doivent être exclusifs entre eux. Si l'utilisateur a ajouté «SAP» dans le nom de l'entreprise et «IT» dans le code de pays, votre table doit filtrer pour une requête comme
Donnez-moi tous les partenaires commerciaux avec un nom contenant «SAP» et avec un code de pays égal à «DE»
JSONModel
Nous avons déjà dit que dans SAPUI5, vous devez différents types de modèles:
- ODataModel v2: implémentation de modèle basée sur le protocole OData (version 2). Il est utilisé lorsque vous devez interagir avec un service OData.
- JSONModel : implémentation de modèle pour les données JSON. Il est principalement utilisé pour gérer les données locales / temporaires
Pour notre exercice, je vous suggère de créer un modèle JSON pour stocker les données de filtre et un autre pour stocker les codes de pays. Lorsque vous avez créé un fichier JSON local dans votre dossier de modèles, vous pouvez facilement les importer à partir du _manifest.json_ qui gérera toute la logique pour précharger les informations au démarrage de votre application.
Filtrer
nouveau sap.ui.model.Filter (vFilterInfo, vOperator?, vValue1?, vValue2?)
Le filtre est un outil puissant, il vous permet de mélanger différents filtres pour créer une requête OData complexe qui sera ensuite traduite en SQL côté backend.
- Le premier paramètre est le nom de la colonne sur laquelle vous souhaitez filtrer. Vous pouvez également spécifier une colonne à partir d'une propriété développée telle que "Adresse / Rue"
- Le deuxième paramètre est l'opération que vous souhaitez appliquer à votre filtre. Vous pouvez trouver toutes les opérations possibles dans la documentation FilterOperator .
- Les troisième et quatrième paramètres sont des valeurs de requête entrées par l'utilisateur et sur lesquelles vous souhaitez filtrer.
Le deuxième constructeur du filtre vous permet de mélanger des filtres afin de créer des groupes de filtres ET et OU.
nouveau sap.ui.model.Filter (aFilters, bAnd)
Après avoir créé votre filtre final, vous pouvez l'appliquer à la liaison de table.
Trier et grouper
Un utilisateur souhaite toujours trier / regrouper les enregistrements en fonction d'une colonne spécifique et ils fonctionnent plus ou moins comme un filtre.
nouveau sap.ui.model.Sorter (sPath, bDescending?, vGroup?, fnComparator?)
- Le premier paramètre (comme pour Filter) est l'attribut OData sur lequel vous souhaitez trier
- Le deuxième paramètre (booléen) triera les données de manière décroissante ou ascendante
- Le troisième paramètre peut être à la fois un booléen (si vous voulez regrouper des données) ou une fonction (je l'expliquerai dans un instant).
- Le dernier paramètre est facultatif et vous permet de faire un tri personnalisé local (pas sur OData) en fonction du résultat de la fonction
Le paramètre vGroup est important car il vous permet de spécifier une méthode personnalisée pour regrouper des éléments. Vous avez juste besoin d'implémenter une fonction personnalisée qui renvoie un objet JavaScript avec une clé et une valeur de texte à l' intérieur.
- La clé sera utilisée par SAPUI5 pour comprendre si l'enregistrement est déjà contenu dans un groupe avec la même valeur de clé
- Le texte est utilisé par SAPUI5 pour créer l'interface utilisateur pour afficher le nom du groupe
Cette fonction est particulièrement importante lorsque vous souhaitez regrouper des éléments pour des valeurs spéciales comme les dates. Chaque date JavaScript est différente car elle gère les données à la milliseconde près. Dans ce cas, vous pouvez formater la date pour n'afficher que l'année-mois-jour et les éléments seront regroupés correctement pour la date.
Essayez de simplement regrouper l'attribut «CreatedAt» sans fonction personnalisée et voyez ce qui se passe;)
Tri et regroupement: UI / UX
La meilleure façon de permettre à un utilisateur de trier et de grouper des données dans votre table / liste est d'utiliser le ViewSettingsDialog .
Il est assez facile à définir et à configurer et vous donne beaucoup de contrôle. ViewSettingsDialog est intégré à l'intérieur d'un fragment et il est affiché sous forme de boîte de dialogue / Popover.
Habituellement, lorsque vous souhaitez afficher une boîte de dialogue comme celle-ci, il vous suffit de créer votre définition de fragment dans un fichier (comme ViewSettingDialog.fragment.xml) et de la charger lorsque l'utilisateur clique sur le bouton au-dessus du tableau.
Lorsque nous parlons de Fragments, nous devons faire très attention à deux choses:
- Réutilisation des ressources
- Dépendance du cycle de vie
Les deux vous permettent de ne pas gaspiller de ressources et de ne pas créer de fuites de mémoire (et vous ne voulez vraiment pas y faire face!)
Donc:
- Créez un nouveau sap.ui.xmlfragment uniquement lorsque cela est nécessaire (lorsque la variable qui contient la référence n'est pas nulle ou détruite), sinon réutilisez-la simplement et ouvrez la boîte de dialogue
- N'oubliez pas de détruire la boîte de dialogue lorsque cela est nécessaire, comme lorsque la boîte de dialogue se ferme si vous utilisez la même variable pour différents fragments ou lors de l'événement de sortie du contrôleur
InfoToolbar est une barre d'outils gérée par ListBase (classe étendue par le tableau) et généralement affichée sous l'en-tête (elle se trouve à l'intérieur de l'agrégation infoToolbar). C'est très utile lorsque vous souhaitez afficher des informations qui doivent être mises en évidence.
Dans notre cas, lorsque l'utilisateur effectue une recherche, nous allons afficher le dernier horodatage de la recherche et le nombre total d'enregistrements filtrés.
Conclusion et quelle est la prochaine partie 3?
Si vous voulez vérifier le résultat final, vous pouvez directement aller à la branche step_2 de notre projet GitHub .
Dans la prochaine partie de l'exercice, nous présenterons le concept de SplitApp et de la disposition Master-Detail afin que vous fassiez mieux de commencer à lire de la nouvelle documentation;)