Imaginez que vous entrez à la bilbiothèque et que vous ne voyez que des livres… Haha, je vous donne raison, c’est exactement ce qu’est une bibliothèque. Prenez le contexte à la lettre et vous ne voyez que des livres, sans catégorie, sans ordre particulier, sans indication… Rien. Vous allez probablement trouver des titres intéressants, des livres que vous n’auriez probablement pas cherchés autrement. Cependant, qu’en est-il si vous cherchez une section ou un titre précis ? Voilà pourquoi les catégories et les sections prennent une grande valeur, ils sauvent temps et énergie. En fait, ils ordonnent les données. Alors, pourquoi ne pas faire de même lorsque l’on utilise une composante importante pour lister des enregistrements dans Power Apps, soit la galerie.
Tôt ou tard, si ce n’est pas déjà fait, vous ferez face à l’utilisation d’une galerie qui contient ne serait-ce qu’une centaine d’éléments. Oui, vous pouvez toujours filtrer vos éléments, mais le filtre n’est pas toujours souhaité ou possible dans certains cas utilisateurs. On affiche donc la liste des enregistrements et l’expérience utilisateur en est très affectée. C’est ici que je vous propose une façon de procéder pour transformer le composant ‘Galerie’ en quelque chose de beaucoup plus convivial et agréable à utiliser.
Catégoriser nos éléments
Dans un premier temps, vous devrez vous assurer que vos enregistrements puissent être ordonnés. Il faut simplement trouver la valeur de catégorisation pour nos éléments.
Permettez-moi d’offrir un exemple pour bien comprendre. Dans mon cas, j’ai une liste de compétences diverses qui seront éventuellement attitrées à des utilisateurs. Dans mon cas, la table des compétences possède une colonne nommé ‘Catégorie’:
« Pimp » mon galerie
Maintenant, il ne suffit que d’organiser nos enregistrements selon le dit champ ‘Catégorie’. Pour commencer, il faut s’assurer de créer une nouvelle instance du composant ‘Galerie à hauteur flexible’, important pour que les hauteurs soient dynamiques:
Nous donnerons, comme collection à la propriété ‘Items’, la liste des catégories possibles:
On agence la façon dont on veut voir les catégories. Dans mon cas, il s’agit d’un bandeau avec le nom de la catégorie que l’on pourra étendre ou refermé:
On ajoute ensuite une 2e galerie à l’intérieur du premier, juste dessous le bandeau:
Cette 2e galerie accueillera les compétences de chaque catégorie (dans mon cas, en se basant sur la même table) avec l’aide de cette simple formule pour la propriété ‘Items’ de la galerie:
On devrait avoir quelque chose du genre:
Maintenant, il faut s’assurer que la hauteur de chaque catégorie soit dynamique. Pour se faire, sur la 2e galerie, il faut changer les propriétés suivantes:
-‘TemplateSize’: Il faut ajuster la case pour qu’elle aille la hauteur souhaitée pour 1 seul élément. Dans mon cas, je n’ai qu’un libellé et une icone à afficher, donc j’ai réduit à 48 pixels la hauteur du ‘templateSize’:
-‘Height’: Il faut rendre dynamique la hauteur avec notre ‘templateHeight’ et en fonction du nombre d’enregistrements de la catégorie:
Pour ajouter le concept « d’étendre et de refermer », on doit procéder à quelques modifications:
-On doit déplacer la collection de la propriété ‘Items’ de la 1ère galerie dans une collection initialisée sur le ‘OnVisible’ de l’écran, en y ajoutant une colonne pour capter si notre section est fermée ou non:
-Ensuite, notre galerie prendra cette collection comme éléments à afficher:
-On peut maintenant ajouter un bouton/icone/graphique/autre qui indiquera si la section doit être ouverte ou fermée:
Pour la 2e galerie, on doit la rendre visible selon la valeur ‘collapse’ de notre section:
Ce qui devrait donner un résultat semblable à:
Voilà! En espérant que ce soit une idée qui puisse aider vos développement!