Claude Couderc Consulting

Manipuler les contrôles, les fonctions et les formules dans PowerApps

Cet exercice fait partie d’une série consacrée à l’apprentissage de PowerApps. C’est donc un entraînement purement pédagogique, qui sert à vous familiariser avec l’interface, les concepts, etc.

Vous verrez après d’autres exercices pour construire une application complète.

Cas d’usage

Cet exercice vous explique comment manipuler les contrôles, les fonctions et les formules dans PowerApps.

Il s’agit de simples manipulations 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 PowerApps

Ouvrez le site web Microsoft PowerApps et identifiez-vous avec votre compte de tenant.

https://make.powerapps.com/

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

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

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

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.

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

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 PowerApps 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.

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

Enregistrer et changer le nom
Enregistrer et changer le nom

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 PowerApps 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.

Vous trouverez l’aide de la fonction Len() sur le lien ci-dessous.

https://coudr.com/powfnlen

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.

Vérifier la formule
Vérifier la formule

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 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 en particulier 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.

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 Bouton : un bouton apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Button1.

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.

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 notamment de créer de nouvelles collections. Vous trouverez l’aide de la fonction ClearCollect() sur le lien ci-dessous.

https://coudr.com/powfncollect

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.

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.

Arrangez l’écran pour voir tous les contrôles sur l’écran du milieu.

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

Écran avec 5 contrôles
Écran avec 5 contrôles

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.

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.

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

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.

Action du bouton
Action du bouton

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.

Enregistrer l’application

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

Fin des manipulations

Fermez l’onglet de votre application : un pop-up apparaît pour confirmer la fermeture. Dans ce pop-up, cliquez sur le bouton Quitter la page. Vous retrouverez votre application sous le menu Applications de l’accueil du site PowerApps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à insérer un contrôle Étiquette (Label), qui sert à afficher un texte quelconque, ainsi qu’un contrôle “Entrée de texte”, pour permettre de saisir un texte quelconque, et un contrôle Bouton, qui exécute une action.

Vous avez aussi découvert l’existence de la fonction Len(), qui donne la longueur d’une chaîne de caractères, ainsi que 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. Un contrôle Galerie a permis d’afficher le contenu de la collection.

Il existe bien d’autres fonctions. Leur liste est accessible sur le lien Fonctions, signaux et énumérations PowerApps du site Microsoft Docs : https://coudr.com/powfn.

Office365 Addict

Ajouter un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.