Imaginez-vous en tant que Chef dans un restaurant bondé de clients qui attendent de passer un bon moment à jaser et manger un de vos plats renommés. Vous préparez vos assiettes et soudainement, vous vous rendez compte qu’il manque une épice à votre recette et vous venez tout juste d’avoir une illumination sur ce qu’il manque. Vous décidez donc de prendre les choses en main fièrement et décidez d’y ajouter le fameux ingrédient qui révolutionnera votre réputation, qui vous placera comme étant une sommité du monde de la cuisine!
Cependant, une fois arrivé devant l’armoire à épices…Coup de théâtre! L’armoire est fermée à clé et vous ne pourrez achever votre mission qu’en faisant la demande au propriétaire du restaurant qui, soit dit en passant, prend toujours 2 semaines avant de répondre à vos demandes, aussi simples soient-elles. Voilà comment se sent un utilisateur qui navigue dans votre application fantastique et frappe le mur de l’évolution, face à la réalité: « Va falloir demander à un développeur pour modifier le menu… »
Alors, comment éviter ce phénomène et permettre aux utilisateurs d’être autonome sans devenir des configurateurs ? En utilisant un menu pilotable! Prenez note que le principe peut s’appliquer à plusieurs autres concepts différents d’un menu ;).
11e commandement: Le bouton, tu n’utiliseras plus
Bon… titre à prendre à la légère, on change son utilité :). Le composant bouton étant un peu ‘statique’, on veut souvent rendre notre application unique. En gardant toujours le ‘Bouton’ de Power Apps, vous n’arriverez pas à vous démarquer vraiment. Pour ma part, j’utilise toujours le groupe des 3 composants suivants: Image, Text, Button.
Je vous entends déjà dire: « Oui, mais tu viens de dire de ne plus prendre le bouton!?! ». En effet, je suggère de prendre le bouton uniquement pour la fonctionnalité du curseur… C’est-à-dire que le bouton ici ne servira qu’à afficher un curseur en forme de petite main pour indiquer à l’utilisateur que le composant est cliquable. Pour ce qui est de l’image, on y injecte du code ‘HTML’ et le texte… bien il reste un texte d’affichage.
Il est où l’aspect pilotable ?
L’idée est de construire une table qui accueille les informations de vos boutons. Ensuite, on les affiche simplement dans une galerie dans un format désiré.
Pour commencer, la liste des éléments du menu doit être contenue dans une table, avec un nom d’affichage et une icône pour chaque élément.
Ensuite, on y ajoute nos éléments de menu de base en tant qu’enregistrement de la table.
Maintenant, si l’utilisateur doit/veut ajouter un élément au menu, il doit simplement ajouter un enregistrement dans cette table. Pour les besoins de l’exemple, je me suis créé une table ‘Produit’ pour montrer les changements au niveau de l’application. Le but d’avoir une relation sur vos éléments du menu. (Dans mon exemple, les produits sont simplement filtrés selon le bouton du menu qui est sélectionné)
Au tour du développement de l’application.
Dans notre menu pilotable, on a un composant ‘Galerie’ qui pointe vers notre table ‘Catégorie de produit’.
Également, s’assurer de rendre la galerie « présentable » en optimisant l’espace pour l’affichage des boutons.
Ainsi, on aura les 3 colonnes de boutons avant de recommencer une nouvelle ligne. On doit également s’assurer d’avoir un peu d’espace libre pour les ajouts à venir, au besoin. Sinon, vous devrez avoir une barre de défilement pour vous rendre aux boutons ajoutés. Dans le conteneur d’un élément du composant ‘Galerie’, on a ma version du bouton, c’est-à-dire « Image-Texte-Bouton invisible ».
menuIcone: il y a simplement la référence vers le champ colonne »Icone » de la table.
menuCursor: S’assurer de mettre le bouton transparent et sans texte ni icône.
menuText: Référence vers le champ « Name » de la table.
menuBackground: On construit un bouton plus agréable avec le « HTML ».
"data:image/svg+xml;utf8, " & EncodeUrl(
"
<svg width='" & Self.Width & "' height='" & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
<rect id='cont01' rx='25' ry='25' x='0' y='0' width='" & Self.Width & "' height='" & Self.Height & "' fill='white'>
</rect>
<style>
#cont01 {
fill: rgba(200,100,5, 1);
}
</style>
</svg>
"
)On s’assure d’avoir le composant bouton en avant-plan dans le conteneur.
Lors que le bouton transparent est cliqué, on enregistre l’élément sélectionné dans une variable pour avoir plus de portée sur notre sélection.
Pour l’affichage dans notre exemple, on relie simplement le composant « Galerie » pour les produits en fonction de la catégorie sélectionnée.
Filter(Produits; Categorie.'Catégorie de produit' = _catSelected.'Catégorie de produit')Et voilà! On devrait avoir un menu interactif.
Maintenant, si on ajoute simplement un enregistrement dans notre table, on verra un nouveau bouton s’afficher.
Il ne suffit que d’adapter notre besoin au concept, mais le point étant qu’il reste simple d’ajouter des menus dans votre application dont lesquels le client/utilisateur peut ajouter ou retirer des éléments sans aide. (jusqu’à un certain point, bien entendu)
En espérant vous aidez dans vos développements!