Contrôles et fonctions Power Apps

Cette manipulation sur les contrôles et fonctions Power Apps fait partie d’une série consacrée à l’apprentissage de Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Cas d’usage de contrôles et fonctions Power Apps

Cette manipulation vous explique comment utiliser les contrôles, les fonctions et les formules dans Power Apps.

Il s’agit de manipulations simples qui vous permettent de vous familiariser avec l’interface et les contrôles.

Dans cette nouvelle application, vous allez insérer un contrôle Étiquette (Label). Celui-ci sert à afficher un texte quelconque. Vous insérerez aussi un contrôle « Entrée de texte ». Ce contrôle permet de saisir un texte quelconque. Enfin, vous verrez comment ajouter un contrôle Bouton. Ce type de contrôle vous est familier à travers les boutons OK, Annuler, etc.

Vous verrez également une nouvelle fonction qui donne la longueur d’une chaîne de caractères. Cette fonction est utilisée notamment pour vérifier que la chaîne ne dépasse pas une valeur avant de la stocker. Ensuite, vous apprendrez à additionner des valeurs numériques avec l’opérateur +. Enfin, vous découvrirez la fonction ClearCollect qui permet notamment de créer de nouvelles collections. Une collection sert à stocker des données temporaires, utilisées tant que l’application est ouverte.

Créer une application grâce aux contrôles et fonctions Power Apps

Ouvrez le site web Microsoft Power Apps.

Ensuite, dans le volet de navigation (à gauche), cliquez sur Applications.

Puis, dans la bannière du volet central (en haut), cliquez sur Créer une application (en haut, vers la gauche).

Et, dans le menu qui s’affiche, cliquez sur Zone de dessin : un nouvel onglet s’ouvre.

Enfin, dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Mode téléphone sous Application vide, puis patientez.

Pour vous aider, regardez la copie d’écran ci-dessous.

Notez que vous auriez pu aussi bien choisir la disposition de la tablette sous Application vide, car les manipulations sont strictement identiques. Il s’agit d’un choix purement arbitraire.

Si la fenêtre Bienvenue dans Power Apps Studio s’ouvre, cliquez sur le bouton Ignorer. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Enregistrer et renommer l’application

Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Dans le volet central (vers la droite), remplacez le nom de l’application (« Application ») par canControles.

En bas et à droite de l’écran, cliquez sur le bouton Enregistrer.

Si vous ne voyez pas le bouton Enregistrer, c’est parce que vous êtes dans les Paramètres de l’application. Dans ce cas, cliquez sur Enregistrer.

Cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Insérer un contrôle Étiquette (Label)

Afin d’éviter toute ambiguïté, il est indiqué systématiquement le nom du contrôle. Toutefois, vous pouvez aussi sélectionner un contrôle dans la représentation graphique de l’écran au milieu.

Un contrôle Étiquette sert à afficher du texte ou des données qui sont généralement calculées. Par exemple, le résultat de la somme de deux nombres.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Étiquette : une étiquette apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Label1.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Texte par Haricot et cliquez ailleurs pour que Power Apps prenne en compte votre modification.

Tester l’application

Pour voir ce que donne vos modifications, il y a plusieurs techniques : 1) Appuyer sur la touche F5 du clavier puis fermer la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier ; 2) Cliquer sur l’icône en forme de triangle dans le coin supérieur droit puis fermer la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier ; 3) Cliquer sur le contrôle puis appuyer simultanément sur la touche Alt du clavier. Il suffit de relâcher la touche Alt pour quitter le mode d’aperçu.

Utilisez la méthode de votre choix pour voir le résultat.

Appuyez sur la touche échap pour sortir.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Insérer une formule

Maintenant, vous allez afficher le résultat d’une formule.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis dans la zone de formule (au milieu et en haut), remplacez « Haricot » par :

Len("Haricot")

Puis cliquez ailleurs. La fonction Len donne la longueur d’une chaîne de caractères. Dans ce scénario, vous obtenez la valeur 7.

Avec la souris, descendez le contrôle pour qu’il soit un peu au-dessus du milieu de l’écran blanc.

Insérer un contrôle Entrée de texte (Text input)

Un contrôle « Entrée de texte » permet de saisir du texte ou des nombres.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Texte puis sélectionnez Entrée de texte : une entrée de texte apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : TextInput1.

Refaites la même opération pour insérer un second contrôle « Entrée de texte ». Normalement, il se nomme TextInput2.

Avec la souris, descendez le nouveau contrôle pour qu’il soit sous le premier.

Pour les deux contrôles Entrée de texte, changez leur format dans Propriétés, en Nombre.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis dans la zone de formule (en haut), remplacez Len(« Haricot ») par :

TextInput1+TextInput2

Puis cliquez ailleurs.

Appuyez sur la touche F5 puis saisissez des nombres quelconques dans les contrôles d’entrée et constatez que la somme est calculée dans le contrôle étiquette.

Ensuite, avec la souris, descendez les nouveaux contrôles pour qu’ils soient juste au-dessus de l’étiquette.

Pour vous aider, regardez la copie d’écran ci-dessous.

Enfin, appuyez sur la touche Échap pour sortir.

Insérer un contrôle Bouton (Button)

Un contrôle Bouton permet d’interagir avec l’application. Vous allez utiliser un bouton afin de créer une nouvelle collection qui se nommera Stagiaire.

Une collection permet de stocker les données saisies par l’utilisateur. Dans ce scénario, il s’agit des données des contrôles d’entrée de texte TextInput1 et TextInput2.

Tout d’abord, dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Ensuite, sous Insérer, cliquez sur Bouton : un bouton apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Button1.

Puis, dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Bouton par Action puis faites une tabulation avec votre clavier.

Enfin, dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et remplacez False par :

ClearCollect(Stagiaire;{Prénom:TextInput1.Text; Nom:TextInput2.Text})

Deux remarques importantes :

• N’oubliez pas le .Text, qui est collé à TextInput1 et TextInput2 dans la fonction.
• Si vous supprimez un contrôle, puis vous en créez un nouveau, vous devez éditer toutes les fonctions qui font référence à ce contrôle, même si vous l’avez nommé exactement pareil. Ceci est toujours vrai, pour tous les contrôles.

La fonction ClearCollect est très utilisée car elle permet de créer de nouvelles collections.

Dans ce scénario, la collection s’intitule Stagiaire et elle est composée de deux variables : Prénom et Nom. La variable Prénom sera alimentée par le contenu saisi de TextInput1, tandis que la variable Nom sera alimentée par le contenu saisi de TextInput2.

Si vous avez des erreurs, signalées par des points rouges ou des croix blanches sur un fond rouge, vérifiez votre formule. Notamment, vérifiez que vous avez bien écrit TextInput1 et non pas Input1.

Enfin, pour les deux contrôles Entrée de texte, changez leur format (dans Propriétés) en Texte.

Insérer un contrôle Galerie (Gallery)

Un contrôle Galerie permet notamment d’afficher le contenu d’une collection.

Grâce au menu Insérer, ajoutez un contrôle de type Galerie verticale. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Gallery1.

Ensuite, arrangez l’écran pour voir tous les contrôles sur l’écran du milieu.

Pour vous aider, regardez la copie d’écran ci-dessous.

Puis, dans le contrôle Gallery1, définissez la valeur de la propriété avancée Items à Stagiaire, à la place de CustomGallerySample. Stagiaire est tout simplement le nom de la collection.

Ensuite, dans l’onglet Propriétés du contrôle Gallery1, sélectionnez Modifier à côté de l’étiquette Champs puis vérifiez que Prénom est rattaché à Subtitle1 et Nom à Title1. Si ce n’est pas le cas, mettez à jour les données. Par contre, ne changez pas la valeur de Image1, qui ne nous intéresse pas pour l’instant.

Puis, fermez le volet Données, en cliquant sur la croix en haut, à droite du volet.

Enfin, appuyez sur la touche F5 puis saisissez des valeurs pour le prénom et le nom puis cliquez sur le bouton Action.

Pour vous aider, regardez la copie d’écran ci-dessous.

Ensuite, appuyez sur la touche échap pour sortir.

Enregistrer l’application

Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Enfin, fermez l’onglet de votre application : un pop-up apparaît pour confirmer la fermeture.

Puis dans ce pop-up, cliquez sur le bouton Quitter la page : vous retrouverez votre application sous le menu Applications de l’accueil du site Power Apps.

La manipulation est terminée.