L’expérience utilisateur est au cœur de l’interface SAP Fiori : naviguer de manière fluide entre les applications est crucial pour gagner en efficacité par rapport au SAP GUI. Mais quoi de plus agaçant que de perdre les données saisies lorsqu’on navigue entre les applications ? Voici la recette pour conserver le contexte d’une application lorsqu’on la quitte. C’est un peu technique, accrochez-vous !
Stocker le contexte dans un xapp-sate
Description
Un “xapp-state” est une chaîne de caractères générée par SAPUI5 qui représente l’état actuel des données d’une application (filtres, saisies utilisateur, …). Cette chaîne de caractères, ajoutée à l’URL du navigateur, permet de conserver l’état de l’application lors d’une navigation. Cela permet de retrouver automatiquement les données saisies lors d’un retour arrière par exemple, ou de préremplir des informations dans l’application cible.
Voici un aperçu des avantages qu’offre cette technique :
- Navigation contextuelle: comme expliqué, cela permet de naviguer d’une application à une autre tout en conservant les filtres et les données saisies, ce qui améliore l’expérience utilisateur
- Partage d’URL : comme la chaîne de caractères est ajoutée à l’URL, cela permet aux utilisateurs de partager des liens avec leurs collègues ou de stocker des favoris avec un état déjà renseigné
- Réutilisation de l’état : Les développeurs peuvent enregistrer des états pour lancer une même application avec des données par défaut pertinentes pour différents scénarios, augmentant ainsi la flexibilité
Implémentation
Pour générer un xapp-state, on peut utiliser cet objet de la bibliothèque SAPUI5 : sap.ushell.services.CrossApplicationNavigation. Il permet de naviguer entre les applications SAP Fiori et d’ajouter un xsapp-state en paramètre.
Voici à quoi ressemble le code qui stocke 4 filtres :
Dans un objet au format JSON, on passe simplement le nom du champ qu’on souhaite impacter, accompagné de l’opération logique (égal, supérieur,…) et de sa valeur. Dans cette capture d’écran, le remplissage de l’objet JSON est fait manuellement pour faciliter la compréhension. Sachez toutefois qu’il est possible de reprendre le contenu d’une barre de filtres automatiquement.
L’extrait de code suivant montre la suite des opérations et concerne la navigation vers l’application cible :
Les applications SAP Fiori étant toutes représentées par un “target” (semanticObject + action), c’est ce qui est utilisé pour désigner la cible de la navigation. En plus de ce target, la clé du xsapp-sate précédemment créé est fournie : cette clé sera ajoutée en fin d’URL du navigateur et permettra de retrouver facilement les données stockées dans l’objet JSON.
Une fois dans l’application cible, il peut être pertinent de lire les données sauvegardées dans le xsapp-state (pour pré-remplir des champs par exemple). Voici à quoi ressemble le code de cette lecture :
Le code consiste à lire le contenu du xsapp-state à partir de la clé trouvée dans l’URL, puis d’appliquer les valeurs du xsapp-state aux champs de l’application (ici, à la barre de filtres).
Démonstration
Dans notre scénario d’exemple, on souhaite naviguer depuis une application spécifique vers l’application standard F2072 tout en remplissant automatiquement la barre de filtres. L’application F2072 permet de gérer les objets techniques du module PM : elle a été étendue pour lire et prendre en compte le xsapp-state renseigné par notre application spécifique.
On voit que l’URL du navigateur (en bas de la précédente capture) contient un paramètre supplémentaire “sap-xsapp-state” qui est la clé de l’état sauvegardé. Et effectivement, la barre de filtres de l’application F2072 se remplit automatiquement avec les données saisies dans l’application spécifique : pratique !
Passer des paramètres de tuile directement
Description
Une autre technique consiste à prévoir des paramètres de lancement lorsqu’on crée la tuile de l’application. Ces paramètres peuvent alors être renseignés par l’application de départ et être lus par l’application cible pour renseigner des champs automatiquement.
Implémentation
Il n’est pas question ici de stocker n’importe quelle donnée dans un contexte, mais plutôt de renseigner les paramètres prévu par la tuile de l’application cible. Voici à quoi ressemble un code qui renseigne 2 paramètres de lancement :
Cette fois-ci, il n’est pas utile d’étendre l’application standard pour lire les paramètres renseignés puisque l’application s’en charge automatiquement. Il y a donc moins d’effort de développement.
Démonstration
Si on renseigne les paramètres lors de la navigation vers l’application cible, on les retrouve bien pris en compte :
On voit que ici que l’URL contient directement le nom des paramètres et leur valeur. Le fonctionnement global ressemble au xsapp-state mais n’est pas aussi flexible : il doit être prévu lors de la création de l’application cible et de sa tuile.
Conclusion
Ces techniques de conservation du contexte doivent offrir aux utilisateurs SAP Fiori une expérience fluide et continue même en cas de navigation d’une application à une autre.
Mettez en œuvre ces techniques pour optimiser vos applications et faciliter la vie de vos utilisateurs !
