Éléments dentrée et comment ils sont utilisés dans Power Apps

Dans ce didacticiel, nous allons parler des éléments d'entrée et de la manière d'optimiser leur utilisation dans Power Apps.

Il existe un grand nombre d'éléments d'entrée que vous pouvez utiliser pour afficher les données avec lesquelles vous travaillez tout en améliorant l'expérience globale de l'utilisateur final de l'application. Ce qui différencie les éléments d'entrée du reste des éléments, c'est qu'ils permettent aux utilisateurs de saisir quelque chose dans l'application.

Un exemple est la case à cocher, où les utilisateurs peuvent cocher et décocher la case pour montrer qu'ils acceptent ou choisissent l'option que la case représente. Un autre est le bouton radio qui fait la même chose, mais nécessiterait normalement au moins deux options.

Nous allons parcourir certaines des entrées les plus courantes que nous voyons souvent dans les applications. Comme il y a tellement d'entrées disponibles, vous pouvez consulter la documentation Microsoft Power Apps pour obtenir des informations plus spécifiques sur celles dont nous ne parlerons pas ici.

Table des matières

• Boîte combo
• Sélecteur de date
• Zone de liste
• Basculer
• Curseurs
• Notation
• Minuteur
• Conclusion

Boîte combo

Les zones de liste déroulante sont des éléments d'entrée qui présentent une liste d'éléments. Cela les rend très similaires aux listes déroulantes. La grande différence est qu'en plus de présenter une liste, les listes déroulantes permettent également de faire une recherche. Il a une boîte de recherche en haut qui permet aux utilisateurs de saisir n'importe quoi.

Ainsi, si nous tapons 1 par exemple, il filtre toute la liste et affiche les résultats correspondants.

Cela permet aux utilisateurs de trouver facilement ce qu'ils recherchent, surtout s'il y a une longue liste d'éléments à parcourir.

À l'heure actuelle, la zone de liste déroulante affiche les choix par défaut intégrés à Power Apps. Mais nous pouvons ajouter une source de données via le volet de droite et choisir une colonne spécifique à partir de laquelle Power Apps extraira la liste. Pour cet exemple, utilisons Location.

Maintenant, la liste montre les différents emplacements de notre source de données.

Nous pouvons taper Canada et la boîte filtrera automatiquement les correspondances.

Pour le moment, il affiche plusieurs résultats pour le même emplacement. En effet, les listes contenant plusieurs entrées du même élément doivent utiliser la fonction Distinct pour supprimer les doublons. Ensuite, nous devons le suivre avec la fonction SortByColumn pour trier la liste par ordre alphabétique. Nous avons parlé de ces fonctions dans un tutoriel sur les listes déroulantes en cascade .

Sélecteur de date

Les sélecteurs de date sont couramment utilisés dans les applications qui obligent les utilisateurs à choisir une date spécifique.

L'avantage des sélecteurs de dates sur les plates-formes Microsoft comme celle-ci est qu'ils permettent aux utilisateurs de cliquer sur un calendrier réel pour choisir la bonne date.

Pour choisir l'année, les utilisateurs peuvent simplement cliquer sur l'année par défaut qui s'affiche à l'écran et choisir dans la liste.

La même chose peut être faite pour choisir le mois.

Nous pouvons également ajouter une étiquette ici, puis modifier le texte de l'étiquette en DatePicker1.SelectedDate. L'étiquette affichera la date choisie par l'utilisateur dans le sélecteur de date.

Zone de liste

La zone de liste est également très similaire à une liste déroulante, mais dans ce cas, vous pouvez sélectionner parmi une courte liste d'éléments affichés à l'écran. Cela signifie qu'il n'est pas nécessaire de faire défiler vers le haut ou vers le bas pour voir la liste entière.

Une zone de liste vous permet également de sélectionner plusieurs éléments dans la liste.

Considérez-le comme une collection d'éléments dans lesquels vous pouvez choisir tout ce qui s'applique à ce que vous essayez de faire sur la diapositive spécifique.

Basculer

L'entrée bascule est un autre élément utile que vous pouvez utiliser dans votre application. Vous voyez cela dans de nombreuses applications qui vous permettent d'activer ou de désactiver une option. Normalement, la bascule est mise en surbrillance ou colorée lorsque vous l'activez.

Ensuite, il devient gris lorsque vous le désactivez.

L'avantage des bascules est que vous pouvez modifier le texte afin de le rendre plus applicable à tout ce que vous voulez que l'utilisateur fasse dans cette partie de l'application. Par exemple, si vous souhaitez modifier l'étiquette de l'option "Off", vous pouvez simplement accéder à la propriété FalseText de la bascule.

Ensuite, vous pouvez le changer dans le texte que vous souhaitez utiliser, comme "Masquer l'étiquette".

Ensuite, vous pouvez aller à TrueText et le rendre "Afficher l'étiquette" afin qu'il reflète l'option opposée au moment où le commutateur est désactivé.

Vous pouvez également modifier d'autres propriétés. Par exemple, la couleur de la bascule peut également être changée en autre chose.

Nous pouvons également extraire la valeur provenant de la table de la même manière que nous l'avons fait avec le sélecteur de date plus tôt. Nous avons juste besoin d'ajouter une étiquette et de changer le texte en Toggle2.Value. Dans ce cas, nous utilisons Toggle2 car il correspond à l'élément spécifique que nous utilisons. Cela pourrait changer si vous avez d'autres bascules dans l'application.

Étant donné que la bascule a une valeur True ou False, notre étiquette affiche True lorsque l'élément est activé.

Ensuite, l'étiquette affiche False si nous désactivons la bascule.

Curseurs

Parlons ensuite des curseurs. Les curseurs sont un élément courant dans les applications qui utilisent des valeurs numériques.

Les utilisateurs peuvent choisir un nombre spécifique dans une plage de valeurs donnée en faisant glisser le commutateur vers la gauche ou vers la droite.

Il est possible de définir la valeur minimale et maximale dans le volet Propriétés à droite. À l'heure actuelle, le curseur permet aux utilisateurs de choisir entre 0 et 100. Vous pouvez le définir sur 200, par exemple, si vous souhaitez que les utilisateurs puissent choisir une valeur supérieure à cent mais inférieure à 200.

Voyons comment nous pouvons encore maximiser l'utilisation de ce curseur en ajoutant une icône rectangle.

Ajoutons également une étiquette ici.

Avant de connecter ces éléments, assurons-nous d'avoir le bon nom d'élément. Dans ce cas, nous travaillons avec Slider4.

Modifions donc le texte de notre étiquette et transformons-le en Slider4.Value.

Cela fera en sorte que l'étiquette affiche la valeur que nous choisissons sur le curseur.

Maintenant, faisons quelque chose de cool avec l'icône rectangle que nous avons ajoutée plus tôt. Voyons comment rendre l'opacité du rectangle dépendante de la valeur choisie sur le curseur.

Tout d'abord, nous allons remettre la valeur maximale à 100.

Le niveau de luminosité ou d'opacité peut être trouvé ici dans l'onglet Personnalisé dans la propriété de remplissage dans le volet de droite. Le but ici est de faire correspondre la valeur d'opacité du remplissage à l'opacité de l'icône rectangle. L'opacité est visible sur la dernière case à droite, qui affiche maintenant 58. Nous allons permettre à l'utilisateur de choisir cette valeur à l'aide du curseur.

Alors mettons en surbrillance l'icône rectangle et allons à la propriété Fill. Notez que la valeur finale affichée est 0,58, qui est notre opacité de remplissage.

Nous allons ensuite changer la valeur finale de la série en Slider4.Value.

Puisque la valeur d'opacité est maintenant un nombre décimal à 0,58, nous devons la diviser par cent pour en faire un nombre compris entre 0 et 100.

Une fois cette formule terminée, nous pouvons maintenant contrôler la luminosité de la boîte à l'aide du curseur. Par exemple, nous pouvons le faire glisser jusqu'à 4 et vous verrez que le rectangle a presque disparu.

Mais si nous déplaçons le curseur sur 100, vous verrez la luminosité maximale du rectangle.

Notation

Parlons maintenant de la notation. Nous le voyons couramment dans les applications, les pages ou les sites commerciaux qui permettent aux utilisateurs, aux clients et aux clients d'évaluer les services et les produits fournis.

Les notes sont presque les mêmes que les curseurs, sachant qu'ils permettent tous les deux aux utilisateurs de choisir une valeur spécifique. La principale différence est le format visuel.

Il est également possible de modifier la valeur maximale qu'un utilisateur peut choisir via le volet Propriétés sur la droite. Nous pouvons faire la valeur Max 9, par exemple, et nous verrons également le nombre d'étoiles augmenter.

Comme les autres éléments avec lesquels nous avons travaillé, nous pouvons également obtenir la valeur de la note et l'afficher sous la forme d'une étiquette. Avant de commencer sur cette étiquette, rappelons-nous que l'élément de notation que nous allons utiliser est Rating2.

Donc, comme nous l'avons fait précédemment, ajoutons une étiquette et changeons la valeur de test en Rating2.Value.

Désormais, l'étiquette affiche la valeur numérique de tout ce que l'utilisateur choisit dans la note.

Cela peut être très utile pour des applications comme celle que nous avons développée dans ces tutoriels. Étant donné que notre source de données a une colonne pour le niveau VIP, par exemple, nous pourrions utiliser l'élément d'évaluation puisque notre niveau VIP va de 1 à 5. Cela pourrait être plus amusant pour les utilisateurs par rapport à une liste déroulante ou à un curseur.

Minuteur

Le dernier des différents éléments d'entrée dont nous allons parler dans ce didacticiel est l'entrée de la minuterie.

En plus de permettre aux utilisateurs finaux de chronométrer quelque chose, une minuterie vous permet d'exécuter une action ou un morceau de code toutes les x nombre de secondes. Selon Power Apps , le minuteur « contrôle la façon dont votre application répond après un certain laps de temps.

Nous avons vu cela appliqué de différentes manières. Par exemple, un utilisateur qui a été sur un nouvel écran de formulaire pendant 30 secondes ou plus peut voir une fenêtre contextuelle contenant des informations utiles qui pourraient accélérer le processus pour lui. Une minuterie est utilisée pour déclencher cette fonction.

Jetons un coup d'œil au fonctionnement des minuteries et explorons quelques applications.

Dans le volet de droite des propriétés, vous pouvez contrôler la durée du minuteur. Notez que cela est affiché en millisecondes, donc le 60000 ici équivaut en fait à 60 secondes.

Changeons-le à 10 secondes, ce qui signifie que nous allons taper 10000.

Nous réglerons également la minuterie sur Répéter, ce qui signifie qu'elle redémarrera automatiquement la minuterie dès qu'elle atteindra 10 secondes. Allumons également le démarrage automatique pour que la minuterie démarre au moment où l'écran se charge.

Maintenant, faisons quelques applications sympas. Tout d'abord, prenons la valeur de la minuterie et faisons-la apparaître dans une étiquette. Ajoutons donc une étiquette et changeons le texte en Timer2.Value.

Rappelez-vous que la valeur est en millisecondes, c'est pourquoi bien que la minuterie affiche 2 secondes, l'étiquette affiche 2000.

Essayons de faire apparaître une icône après 5 secondes. Nous allons commencer par ajouter l'icône de recherche.

Ensuite, nous définirons la propriété Visible de l'icône sur une indiquant que si Timer2.Value est supérieur à 5000, l'icône doit être visible. Sinon, il ne devrait pas être visible.

Maintenant, voyons si cela fonctionne. En ce moment, la minuterie est à 2300 millisecondes. L'icône n'est pas visible actuellement.

Mais après que la minuterie ait atteint la barre des 5000, l'icône de recherche est apparue.

Et puisque nous avons réglé la minuterie pour qu'elle se répète, l'icône disparaît à nouveau au moment où la minuterie redémarre.

Voici une autre application sympa. Ajoutons un cercle.

Ensuite, nous laisserons la couleur du cercle changer en fonction de la minuterie. Cela crée des dégradés vraiment sympas pendant que la minuterie tourne.

Passons à la propriété Fill du cercle. Notez que le premier nombre ici est 56. Nous allons modifier la couleur du cercle en fonction de la minuterie.

Nous pouvons créer des dégradés vraiment sympas si nous faisons cela. Par exemple, passons à la couleur ou au remplissage.

Nous allons changer ce nombre en Timer2.Value, puis nous le diviserons par 100.

Avec cette formule en place, le cercle commence en bleu.

Au fur et à mesure que la minuterie tourne, il change lentement de couleur et devient violet lorsque la minuterie atteint 10 secondes.

Nous pouvons rendre le changement plus rapide et plus prononcé si nous changeons le nombre. Donc, au lieu de diviser cette première valeur par 100, changeons cela en 10.

Encore une fois, il commence en bleu.

Puis, à seulement 1900 millisecondes, il a pris une teinte violacée.

Et à 5600 millisecondes, il est devenu rose vif.

Vous pouvez être aussi créatif que vous le souhaitez avec ces paramètres. Vous pouvez faire en sorte que tout l'écran change de couleur, par exemple. Ou vous pouvez vouloir que quelque chose de différent se produise toutes les 5 secondes.

Ce n'est peut-être même pas juste pour l'esthétique. Par exemple, vous pouvez demander à l'application de demander à l'utilisateur s'il a besoin de plus d'aide au moment où il semble qu'il prend trop de temps sur un seul écran et de le diriger vers une page de destination, par exemple.

Présentation de Power Apps : définition, fonctionnalités, fonctions et importance
Environnements Power Apps : configuration correcte des éléments de l'application
Fonctions et formules PowerApps | Une introduction

Conclusion

Les éléments d'entrée sont définitivement utiles, quel que soit le type d'application que vous créez. Non seulement ils donnent à votre application un aspect plus professionnel, mais ils rendent également l'ensemble de l'expérience plus pratique pour les utilisateurs.

Quelque chose d'aussi simple qu'un curseur ou une zone de liste déroulante peut les aider à affiner d'énormes quantités de données, et sur la base de ce que nous venons de faire avec notre minuterie, vous pouvez également créer une expérience plus amusante et engageante pour eux.

Outre ces éléments d'entrée, vous pouvez explorer d'autres types d'éléments, tels que des éléments multimédias permettant aux utilisateurs d'utiliser la caméra ou le microphone de leur téléphone. Avec ces éléments multimédias et d'entrée fonctionnant ensemble dans votre application, vous créez une expérience vraiment unique pour vos utilisateurs.

Tous mes vœux,

Henri