Personnaliser le menu d'une application mobile est essentiel pour offrir une expérience utilisateur optimale. En adaptant les options de menu, on peut simplifier la navigation, rendre l'application plus intuitive et accélérer l'accès aux fonctionnalités les plus pertinentes. Cela permet de maximiser l'efficacité de l'application, d'augmenter l'engagement des utilisateurs, et in fine, de fidéliser une clientèle s'il s'agit d'une application à vocation commerciale. Dans cet article, nous allons voir ensemble comment créer un menu personnalisé pour votre application AppSheet.
Avant de commencer, il est important de définir cette notion de « menu personnalisé ».
En effet, on ne parlera pas ici de changer le menu selon la personne qui utilisera votre application. Il s’agira plutôt d’un menu qui sera différent de ceux qui sont créés par défaut par AppSheet, à savoir:
- le burger menu ou menu latéral, qui se trouve en haut à gauche de votre application
- la barre de navigation, qui se situe au bas de l’interface utilisateur.
Ces 2 éléments sont présents à la création de votre application. Bien sûr, vous pouvez désactiver l’affichage du burger menu. Vous pouvez également modifier l’apparence de votre barre de navigation.
Mais comment faire pour créer un menu de toute pièce? En d’autres termes, comment mettre en place vous-même des boutons de navigation au sein de votre application?
Les boutons de navigation
Tout d’abord, un bouton de navigation, comme son nom l’indique, permet de passer d’une vue à l’autre ou d’une application à l’autre.
Pour créer un bouton de navigation dans AppSheet, il vous faudra combiner 2 choses: les actions et les liens profonds ou deep link.
Les actions sont des opérations qui peuvent modifier les données de votre application ou amener l’utilisateur vers une autre vue. Grâce aux actions, vous pouvez réaliser différentes choses:
- ouvrir une autre application à l’aide de l’expression LINKTOAPP()
- afficher une ligne spécifique d’une table en utilisant l’expression LINKTOROW()
- afficher une autre vue de l’application avec LINKTOVIEW()
- ouvrir un formulaire à l’aide de LINKTOFORM()
- afficher une table avec des lignes associées grâce à LINKTOFILTEREDVIEW()
Ensuite, pour mettre en place ces actions dans votre application, vous avez le choix. Vous pouvez les afficher directement dans une vue de type détail ou créer une vue de type galerie. C’est cette dernière qui nous intéresse particulièrement dans cet article.
Exemple de création de menu personnalisé
Etape 1 : Configuration de la base de données
Reprenons l’exemple de l’image de droite ci-dessus et essayons de la reproduire.
Notre but est d’avoir un menu qui s’affiche dans une vue « Home », de type « gallery » et associée à une table appelée « Menu ».
La table « Menu » est relativement simple car elle contient uniquement:
- une colonne « Name » qui va correspond aux noms des vues que l’on souhaite afficher. Ce sont les textes placés sous les icônes (« People », « Places », « Things »)
- une autre appelée « Image » dans laquelle nous renseignons le chemin des icônes de chaque bouton du menu.
Pour la suite, il nous faut simplement disposer d’une table associée à chaque vue que l’on souhaite afficher. Dans notre cas, on veillera à avoir les 3 tables dans notre feuille de calcul google sheets.
Etape 2 : Création des vues
Une fois que nous avons les tables dans notre base de données, nous devons créer les vues dans notre application.
Dans notre cas, il nous faut créer les 3 vues: « People », « Places » et « Things ». Seulement, il faudra modifier leurs positions et choisir « Ref » . En faisant cela, nous nous assurons que le bouton pour accéder à cette vue ne sera visible ni dans la barre de navigation ni dans le menu.
Etape 3 : Mise en place des actions
Dans notre exemple, nous allons utiliser l’expression LINKTOVIEW() pour aller vers une autre vue de notre application.
La première étape consistera donc à aller dans l’onglet « Behavior » pour créer une action dénommée « Go To View ». Celle-ci sera reliée à la table « Menu ».
Ensuite, il faut définir ce que fait cette action. AppSheet offre plusieurs possibilités pour cela mais dans notre cas, nous choisirons « App: go to another view within this app ».
Enfin, le dernier élément, et le plus crucial, sera de saisir l’expression pour indiquer à AppSheet de changer de vue. Pour cela, dans la section « Target » de l’action, entrez l’expression suivante:
LINKTOVIEW([Name])Rappelons ici que « Name » représente la colonne qui contient la liste des vues que l’on souhaite afficher.
Une fois celà réalisé, retournons dans la vue « Home » dans laquelle nous souhaitons afficher notre menu avec les icônes. A ce stade, il reste une dernière chose à faire. Il s’agit d’aller dans la section « Behavior » de la vue, et de sélectionner l’action « Go To View » dans « Event Actions ».
Une fois ces paramétrages réalisés, il ne vous restera plus qu’à sauvegarder l’application et à tester votre menu personnalisé.
Vous pouvez désormais personnaliser votre application avec cette astuce. Si vous démarrez sur AppSheet, vous pouvez découvrir 5 exemples d’applications que vous pourrez facilement réaliser.
Conclusion
S’affranchir des menus par défaut d’AppSheet pour créer votre propre système de navigation est un excellent moyen de franchir un cap en matière de design et d’expérience utilisateur. En structurant une table dédiée et en tirant profit des actions de liens profonds (Deep Links), vous offrez à vos collaborateurs une interface sur mesure, plus intuitive et parfaitement adaptée à leurs habitudes de travail. Soigner l’accessibilité de vos fonctionnalités clés est la règle d’or pour maximiser l’adoption de votre application sur le terrain et booster la productivité de vos équipes.
➡️ Retrouvez tous nos articles dans la catégorie AppSheet ⬅️