Dans le développement d’applications SAPUI5, le formatage des données est une étape cruciale souvent négligée. Pourtant, une présentation claire et cohérente des montants, quantités, dates, et autres informations est essentielle pour garantir une expérience utilisateur optimale. Dans cet article, nous comprenons pourquoi le formatage des données est important et quelles techniques utiliser pour y parvenir efficacement.
En quoi est-ce important ?
Le formatage des données dans le développement d’applications SAPUI5 est plus impactant qu’il n’y paraît pour plusieurs raisons :
- Clarté et lisibilité : des données bien formatées, telles que des montants avec leur devise (par exemple, “1 000,00 € ») ou des quantités avec leur unité (par exemple, « 10 kg »), sont plus faciles à lire et à comprendre. Cela permet aux utilisateurs de saisir rapidement les informations sans ambiguïté.
- Prévention des erreurs : un formatage précis aide à éviter des erreurs courantes, comme les arrondis incorrects des montants ou les formats de dates ambigus. Par exemple, afficher une date comme « 1er février 2023 » plutôt que « 01/02/2023 » élimine toute confusion potentielle.
- Expérience utilisateur : une application qui présente des données de manière cohérente et professionnelle améliore l’expérience utilisateur. La consistance dans le formatage renforce la crédibilité de l’application et offre une interface plus intuitive et agréable.
Quelles sont les techniques ?
Prenons comme exemple les données suivantes, exposées dans un service OData au format typique du backend SAP :
L’affichage de ces données de manière basique donne le code et le résultat suivant :
Ce manque de formatage peut rendre les données ambiguës et difficiles à comprendre pour les utilisateurs. Nous allons maintenant explorer comment appliquer des techniques de formatage pour améliorer la présentation de ces données.
Utilisation des types de données XML
Les types de données XML permettent de spécifier comment les données doivent être formatées sans avoir besoin de recourir à des fonctions de formatage personnalisées. Une bonne utilisation des types de données SAPUI5 ou OData rend cette technique très efficace pour afficher correctement les données mais aussi pour contrôler ce que l’utilisateur saisit dans les formulaires. Les décimales sont affichées en fonction de la devise ou de l’unité, les dates sont formatées selon la langue de connexion, etc…
L’application à notre exemple donne le code et le résultat suivants :
Un autre avantage de cette méthode est qu’elle automatise le contrôle des valeurs saisies par l’utilisateur ! En effet, si l’on change notre exemple pour en faire un formulaire, le format indiqué dans notre code est pris en compte pour faciliter et vérifier la saisie :
Expression binding
En complément du format de la donnée, il est courant de vouloir ajouter de la logique simple lors de l’affichage de l’écran. Par exemple, afficher un élément sous certaines conditions, mettre en couleur selon des critères dynamiques, etc… Cette logique, si toutefois elle est simple, peut être directement intégrée dans le binding XML grâce à un binding plus travaillé, appelé “expression binding”.
Ajoutons par exemple un icône d’avertissement si le montant saisi dépasse 5 000 euros. Il faut donc conditionner l’affichage de cet icône en fonction du montant grâce à un expression binding sur sa propriété “visible” :
Fonction de formatage complexe
Lorsque la logique à mettre en place est plus complexe et que les expressions binding ne suffisent pas, il est possible de créer une fonction qui sera appelée à chaque affichage d’un élément et dans laquelle on peut impacter son affichage. Ces fonctions sont des formateurs spécifiques implémentés en Javascript dans un fichier dédié.
Essayons par exemple d’ajouter le nombre de jours qui nous séparent de la date saisie par l’utilisateur. On crée une fonction qui retourne le nombre de jours restants avant une date :
Et on utilise cette fonction lors de la création de la vue XML, pour ajouter le nombre de jours restants à côté de la date saisie. La fonction spécifique sera appelée à l’ouverture de l’application mais aussi à chaque fois que la valeur saisie change, rendant ainsi dynamique l’information du nombre de jours restants :
Conclusion
Avec les types de données XML, les expressions binding et les fonctions de formatage, nous venons de découvrir 3 techniques simples pour formater correctement les informations affichées dans vos applications SAP Fiori. Le framework SAPUI5 permet de faire cela en seulement quelques lignes de code, et pourtant le ressenti utilisateur est grandement amélioré ! Alors à vous de jouer !
