Auteur : Claude COUDERC

L’objectif de cet exercice est d’afficher une carte de Microsoft Bing géolocalisée.

Si vous ne voyez rien durant l’exercice, faites des tests avec l’application Power Apps Mobile. Sur un poste de travail, le navigateur Chrome semble mieux fonctionner.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente un des deux résultats attendus.

Obtenir une clé Bing Maps

Pour afficher un emplacement géographique sous forme d’une carte Bing Maps dans PowerApps, vous devez récupérer une clé d’API chez Microsoft. Elle est obligatoire.

Cette clé est un identifiant unique, qui est générée à partir de votre compte Microsoft. Selon son usage, vous avez le droit à un certain nombre d’appels de l’API Bing Maps.

Voilà à quoi ressemble une clé d’API.

Attention la clé ci-dessous est fausse (elle n’existe pas) et elle ne peut pas être utilisée.

AvyDgx0hxBPCWNLJuBPzJ2oK0yCr7tuhzVEdF3fPnIwJEC8CqrUuMV

L’utilisation de la clé est expliquée dans la suite de l’exercice. Toutefois, ce n’est pas très compliqué car elle est simplement transmise comme paramètre lors de l’appel de l’API.

Pour créer une clé, ouvrez le site web suivant :

https://coudr.com/keymsmaps

Suivez la procédure décrite sur la page pour obtenir une clé d’API pour Microsoft Maps. Cette procédure est en anglais. Si vous ne comprenez pas cette langue, demandez de l’aide à votre formateur.

La procédure est simple. Toutefois, vous devrez fournir les renseignements suivants :

• Application name (Nom de l’application) : obligatoire. Par exemple : demo.
• Application URL (URL de l’application) : facultatif. Laissez vide.
• Key type (Type de clé) : obligatoire. Indiquez : Basic.
• Application type (Type d’application) : obligatoire. Indiquez : Dev/Test.

Vous obtenez ensuite l’écran suivant :

Il suffit ensuite de cliquer sur Show key pour la voir, ou de cliquer sur Copy key pour la récupérer : copiez la clé et enregistrez-la dans un simple fichier texte, créé avec le Bloc-Notes (notepad) car vous allez bientôt l’utiliser.

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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

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

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.

Récupérer la position courante

Si un pop-up vous indique que Power Apps souhaite connaître votre position, cliquez sur le bouton Autoriser.

Insérez un contrôle Bouton, puis changez ses propriétés.

Button1.Text = "Où suis-je ?"

Button1.Y = 40

Button1.OnSelect = UpdateContext({maPosition: Location})

Insérez deux étiquettes, et nommez-les : maLongitude, maLatitude.

Définissez leur positionnement.

maLongitude.Y = 160

maLatitude.Y = 280

Définissez leur contenu.

maLongitude.Text = "Longitude: " & maPosition.Longitude

maLatitude.Text = "Latitude: " & maPosition.Latitude

Facultativement, vous pouvez aussi agrandir la police et changer la couleur des étiquettes. C’est selon votre envie, car cela n’a pas de conséquence sur la suite de l’exercice.

Afficher la position courante

Insérez un contrôle Image, nommez-le maCarte puis définissez sa taille et son positionnement.

maCarte.Height = 600

maCarte.Width = 600

maCarte.X = 20

maCarte.Y = 400

Ensuite, définissez la propriété Image du contrôle de type Image, avec l’URL suivante. Vous prendrez soin de remplacer <votre clé> par la valeur de votre clé Bing Maps.

maCarte.Image = "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & Substitute("maPosition.latitude";",";".") & Substitute("maPosition.longitude";",";".") & "?mapSize=600,600 & key=<votre clé>"

La fonction Substitue() remplace le caractère “,” par “.”.

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

Afficher une position déterminée

Cette fois-ci, vous allez afficher la géolocalisation d’un endroit précis.

Pour ce faire, supprimez le contrôle bouton, et supprimez aussi les deux contrôles étiquettes : il ne doit rester que le contrôle image.

Ensuite, insérez un contrôle Entrée de texte, et nommez-le maVille puis définissez ses propriétés.

maVille.Default = ""

maVille.HintText = "Nom de la ville"

maVille.X = 20

maVille.X = 40

Définissez le positionnement de la carte.

maCarte.Width = 600

maCarte.X = 20

maCarte.Y = 160

Définissez la propriété Image du contrôle de type Image, avec l’URL suivante. Vous prendrez soin de remplacer <votre clé> par la valeur de votre clé Bing Maps.

maCarte.Image = "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & EncodeUrl(maVille.Text) & "?mapSize=600,600&key=<votre clé>"

Vous pouvez copier-coller cette URL à partir des fichiers d’exercices.

La fonction EncodeUrl() remplace les caractères non alphanumériques par des caractères alphanumériques, comme % ou des caractères hexadécimaux. En théorie, elle n’est pas indispensable. Toutefois, elle évite des caractères qui pourraient faire planter l’application.

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

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment afficher une carte de Microsoft Bing géolocalisée en fonction de votre position courante et en fonction d’un emplacement défini.

Il y a d’autres appels possibles de l’API Bing Cartes. Vous les trouverez des exemples à l’emplacement : https://coudr.com/apimsmaps.

La procédure pour obtenir une clé d’API pour Google Maps est décrite sur ce lien : https://coudr.com/keygooglemaps. Le principe est similaire. Ce qui change concerne l’appel de l’API qui est différent : https://coudr.com/apigooglemaps.

Article mis à jour le 16.04.2020.

L’objectif de cet exercice est de permettre à un utilisateur de se servir du stylet. Par ailleurs, vous personnaliserez la saisie et vous autoriserez la suppression par un simple clic.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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

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

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 Entrée du stylo

Ajoutez un contrôle Entrée du stylo.

Ensuite, ajoutez un contrôle Bouton, puis changez le texte du titre pour Enregistrer.

Button1.Text = "Enregistrer"

Créez une collection nommée mesSaisies, associée à la propriété OnSelect du bouton.

Button1.OnSelect = Collect(mesSaisies; {Saisie:PenInput1.Image})

Insérer un contrôle Galerie

Ajoutez un contrôle Galerie vertical : dès qu’il est inséré, cliquez sur mesSaisies dans le volet Sélectionner une source. Cela revient à faire manuellement :

Gallery1.Items = mesSaisies

Déplacez vers le bas le contrôle Galerie.

Dans le volet Propriétés du contrôle Galerie, modifiez la disposition en Image et titre.

Supprimez le contrôle NextArrow, qui ne sert à rien dans cette application.

Le titre contient par défaut l’URL de l’élément en cours. Ce qui ne nous sert pas.

Par ailleurs, vous souhaitez que votre utilisateur, supprime une Saisie.

Pour ce faire, modifiez la propriété Text du titre par Supprimer.

Gallery1.Title2.Text = "Supprimer"

Ensuite, modifiez la propriété OnSelect du titre pour effectuer la suppression.

Gallery1.Title2.OnSelect = Remove(mesSaisies;ThisItem)

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

Il serait tout à fait possible d’implémenter un pop-up de confirmation avant la validation de la suppression. C’est d’ailleurs fait dans le TP Créer un pop-up de confirmation dans Power Apps.

Tester l’application

Appuyez sur la touche F5 de votre clavier.

Grâce au menu du contrôle Entrée de stylet, changez l’épaisseur du trait en taille 8 et changez la couleur par défaut en bleu.

Avec la souris, écrivez le mot Camion ou faites un gribouillage quelconque. Si vous avez un écran tactile, vous pouvez le faire avec un stylet ou votre doigt.

Puis, cliquez deux fois sur le bouton Enregistrer.

Supprimez une saisie.

Dans le menu du contrôle Entrée de stylet, cliquez sur la X pour vider la fenêtre.

Avec la souris, écrivez le mot Bleu ou faites un gribouillage quelconque.

Puis, cliquez sur le bouton Enregistrer.

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

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment utiliser le contrôle Entrée du stylo. Par ailleurs, vous avez utilisé le menu du contrôle pour personnaliser la saisie. Vous avez aussi permis de supprimer les saisies par un simple clic.

Article mis à jour le 14.04.2020.

L’objectif de cet exercice est de créer une application Power Apps pour prendre des photos. Ces photos seront stockées dans une collection de données, puis exposées dans une galerie.

Elles pourront aussi être supprimées à la demande.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu (à la photo près !).

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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

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

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 Camera

Ajoutez un contrôle Caméra.

Si un pop-up vous indique que Power Apps souhaite utiliser votre caméra, cliquez sur le bouton Autoriser.

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

Créez une collection nommée mesPhotos alimentée par la propriété Photo de la caméra, lorsque l’utilisateur sélectionnera ou appuiera sur le contrôle Camera :

Camera1.OnSelect = Collect(mesPhotos;Camera1.Photo)

Insérer un contrôle Galerie

Ajoutez un contrôle Galerie vertical : dès qu’il est inséré, cliquez sur mesPhotos dans le volet Mes sources. Cela revient à faire manuellement :

Gallery1.Items = mesPhotos

Déplacez vers le bas le contrôle Galerie.

Dans le volet Propriétés du contrôle Galerie, modifiez la disposition en Image et titre.

Supprimez le contrôle NextArrow, qui ne sert à rien dans cette application.

Le titre contient par défaut l’URL de l’élément en cours. Ce qui ne nous sert pas.

Par ailleurs, vous souhaitez que votre utilisateur, supprime une image.

Pour ce faire, modifiez la propriété Text du titre par Supprimer.

Gallery1.Title2.Text = "Supprimer"

Ensuite, modifiez la propriété OnSelect du titre pour effectuer la suppression.

Gallery1.Title2.OnSelect = Remove(mesPhotos;ThisItem)

Il serait tout à fait possible d’implémenter un pop-up de confirmation avant la validation de la suppression. C’est d’ailleurs fait dans le TP Créer un pop-up de confirmation dans Power Apps.

Tester l’application

Appuyez sur la touche F5 de votre clavier.

Il est normal que le contrôle Galerie soit vide car la collection mesPhotos n’a aucune valeur, pour l’instant.

Cliquez plusieurs fois sur le contrôle Caméra.

Supprimez aussi une ou deux photos.

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

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment prendre des photos avec Power Apps

Ces photos étaient stockées dans une collection de données, puis exposées dans une galerie que vous avez personnalisée.

Vous avez aussi permis de supprimer les photos par un simple clic.

Maintenant, il reste à fournir quelques efforts supplémentaires avant de développer une application mobile comme Instagram 😉

Article mis à jour le 15.04.2020.

L’objectif de cet exercice est de créer un graphique à partir des données d’une collection.

Lors de la sélection d’un segment du graphique, il sera automatiquement encadré.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Préparation

• L’exercice du TP Regrouper les données d’une collection doit être terminé avec succès.

Modifier une application existante

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canGraphiques.

Dans la liste qui apparaît, cliquez sur Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Insérer et configurer un contrôle Graphique

Appuyez sur la touche F5 de votre clavier.

Cliquez sur le bouton pour créer la collection VillesHabitants.

Ajoutez un contrôle Graphique en secteurs, puis changez le texte du titre:

CompositePieChart1.Title2.Text = "Total par pays"

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

Ne faites pas attention aux données, elles proviennent d’un exemple fictif, livré avec le contrôle (PieChartSample).

Ensuite, provisionnez le contrôle Graphique en secteurs :

CompositePieChart1.PieChart1.Items = PaysHabitants

Cette formule permet d’alimenter le graphique. Celui-ci peut être vide, si aucune donnée n’existe !

Tester l’application

Appuyez sur la touche F5 de votre clavier.

Si cela n’a pas encore été fait, cliquez sur le bouton avec l’intitulé Habitants par villes, pour alimenter la collection VillesHabitants, qui contient les données en entrée. Bien évidemment, vous pouvez le faire plusieurs fois car la fonction est ClearCollect(). Cela signifie que les données ne sont alimentées qu’une seule fois, indépendamment du nombre d’appels de la fonction.

Ensuite, cliquez sur le bouton avec l’intitulé Total par pays, pour alimenter la collection PaysHabitants, qui contient le regroupement.

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

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment créer un graphique à partir des données d’une collection. Bien évidemment, vous pouvez alimenter un graphique avec des données d’un connecteur quelconque.

Vous pouvez aussi personnaliser la légende, grâce à sa propriété Items. Enfin, selon la nature du graphique, vous pouvez aussi définir son orientation, ainsi que choisir ses couleurs.

Pour information, sachez qu’il existe d’autres possibilités plus riches. Notamment avec les vignettes Power BI ou à partir de Power BI.

Article mis à jour le 13.04.2020.

L’objectif de cet exercice est de créer un regroupement de données à partir d’une collection de données. Cette collection est constituée des 3 champs suivants : Ville, Pays, Habitants.

Le regroupement doit créer une nouvelle collection de données, nommée PaysHabitants. Celle -ci doit exposer le nombre total d’habitants par pays, en utilisant la fonction GroupBy().

Pour faire cet exercice, téléchargez les fichiers. Ensuite, dézippez le fichier. Dans le dossier Collections, vous devrez utiliser le fichier Collection du nombre habitants par villes. Le mode opératoire est indiqué ci-dessous.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

Attention, il s’agit d’un total sur 2 ou 3 villes du pays et non pas le nombre total d’habitants par pays 😉

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

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

Dans la bannière du volet central (en haut), cliquez sur Nouvelle application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur : Zone de dessin.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone sous Application vide.

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 : Ignorer.

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

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.

Créer la collection de données

Dans les exercices téléchargés, ouvrez le fichier Collection du nombre habitants par villes. Ce fichier contient une fonction ClearCollect() qui crée une collection nommée VillesHabitants. Cette collection expose le nombre d’habitants de quelques villes de certains pays.

Pour créer la collection, vous allez ajouter et paramétrer un bouton.

Dans l’application canGraphiques, ajoutez un bouton, puis changez le texte du bouton :

Button1.Text = "Habitants par villes"

Ensuite copiez le contenu du fichier Collection du nombre habitants par villes dans sa propriété OnSelect (à la place de false).

Appuyez sur la touche F5 de votre clavier.

Cliquez sur le bouton pour créer la collection VillesHabitants.

Dans le ruban Fichier, vérifiez la présence de la collection.

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

Regrouper les données

Le regroupement doit créer une nouvelle collection de données, nommée PaysHabitants. Celle -ci doit exposer le nombre total d’habitants par pays, en utilisant la fonction GroupBy().

Pour ce faire, ajoutez un bouton, puis changez le texte du bouton :

Button2.Text = "Total par pays"

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

Ensuite, paramétrez la propriété OnSelect :

Button2.OnSelect = ClearCollect(PaysHabitants; DropColumns(AddColumns(GroupBy(VillesHabitants; "Pays"; "PaysTotal"); "Total";Sum(PaysTotal;Habitants));"PaysTotal"))

Comprendre le raisonnement

Avant d’expliquer en détail la formule, il faut comprendre le raisonnement qui aboutit à trouver cette formule.

L’objectif est d’avoir un total par pays à partir de la collection VillesHabitants.

Si vous regardez comment est construite cette collection, vous voyez ceci :

{ Ville: "Bruxelles";  Pays: "Belgique";       Habitants: 180000};
{ Ville: "Liège";      Pays: "Belgique";       Habitants: 200000};
{ Ville: "Anvers";     Pays: "Belgique";       Habitants: 500000};
{ Ville: "Genève";     Pays: "Suisse";         Habitants: 500000};
{ Ville: "Zurich";     Pays: "Suisse";         Habitants: 400000};
{ Ville: "Luxembourg"; Pays: "Luxembourg";     Habitants: 620000};
{ Ville: "Paris";      Pays: "France";         Habitants: 2200000};
{ Ville: "Nantes";     Pays: "France";         Habitants: 300000}

Celle-ci stocke le nombre d’habitants par ville et par pays : il est donc naturel de regrouper les données par pays. Dans la formule, c’est le rôle de la colonne PaysTotal, qui est créée avec la fonction GroupBy().

Ensuite, il suffit de faire la somme du nombre d’habitants qui se trouve pour chaque ligne de la colonne PaysTotal. Pour chaque pays, cette somme est stockée dans la colonne Total. La somme est calculée avec la fonction Sum(). La colonne Total est créée avec la fonction AddColumns().

Enfin, la colonne intermédiaire PaysTotal est supprimée avec la fonction DropColumns().

Ci-dessous, vous trouverez une explication plus détaillée.

Mettre en forme la formule

Pour comprendre cette formule, il faut repérer le début et la fin de chaque fonction. Pour cela, le mieux est d’utiliser la mise en forme proposée par Power Apps.

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

Fonction ClearCollect()

La fonction ClearCollect(…) demande à Power Apps de créer une collection. Pour ce faire, Power Apps créé une table en mémoire qui sera la future collection de données. Ensuite, le premier argument donne le nom de la collection : PaysHabitants. Power Apps le note.

Le second argument contient les champs avec leurs données. Dans un premier temps, oublions les fonctions DropColumns() et AddColumns().

Intéressons-nous à la fonction GroupBy().

Fonction GroupBy()

La fonction suivante va créer une nouvelle colonne qui se nomme PaysTotal, à partir des données de la collection VillesHabitants :

GroupBy(VillesHabitants;"Pays";"PaysTotal")

Par construction, cette colonne est donc une table qui regroupe les données de VillesHabitants par pays.

Par exemple pour la Belgique, son contenu ressemble à cette copie d’écran:

Fonctions AddColumns() et Sum()

Nous venons de voir que le premier argument de la fonction suivante renvoie une table par pays :

AddColumns(GroupBy(VillesHabitants;"Pays";"PaysTotal");"Total";Sum(PaysTotal;Habitants))

Le second argument créé une nouvelle colonne, qui se nomme “Total”. Par construction, celle-ci est alimentée avec la formule du troisième argument.

En effet, la somme de la colonne Habitants de chaque table est faite avec la fonction :

Sum(PaysTotal;Habitants)

Fonction DropColumns()

Dans la mesure où la colonne PaysTotal ne contient pas le résultat final, il ne sert à rien de la garder. C’est un simple résultat intermédiaire.

La colonne PaysTotal est donc supprimée avec la fonction :

DropColumns(AddColumns(GroupBy(VillesHabitants; "Pays"; "PaysTotal"); "Total";Sum(PaysTotal;Habitants));"PaysTotal"))

En résumé, la colonne PaysTotal a été créée avec la fonction GroupBy(), elle a servi à calculer le total par pays puis elle a été supprimée avec la fonction DropColumns().

Vérifier la formule

Appuyez sur la touche F5 de votre clavier.

Cliquez sur le bouton avec l’intitulé Habitants par villes, pour créer la collection VillesHabitants, qui contient les données en entrée.

Ensuite, cliquez sur le bouton avec l’intitulé Total par pays, pour créer la collection PaysHabitants, qui contient le regroupement.

Dans le ruban Fichier, vérifiez la présence de la collection.

Pour vous aider, regardez la copie d’écran ci-dessous qui présente le résultat attendu.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert comment regrouper les données d’une collection, et vous avez vu une méthode de résolution de problème. Ces techniques sont évidemment applicables à d’autres sources de données (Listes SharePoint, Tables SQL Server, Entités CDS, etc.)

Vous avez aussi appris comment mettre en forme une formule Power Apps complexe.

Article mis à jour le 12.04.2020.

Cet exercice vous explique comment faire différentes manipulations sur les collections. Notamment, vous verrez comment créer des tables dans Power Apps. Cette technique est pratique pour générer rapidement un jeu d’essai avec des valeurs différents.

Vous verrez aussi comment récupérer la valeur d’une liste déroulante sélectionnée, et vous apprendrez à vider le contenu d’une collection existante ou d’un seul élément.

Préparation

• L’exercice du TP Exporter et Importer une application doit être terminé avec succès.

Modifier une application existante

Ouvrez le site web Microsoft Power Apps :

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canCollections.

Dans la liste qui apparaît, cliquez sur : Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Modifier l’interface

Vous allez simplifier légèrement l’interface visuelle. En particulier, vous allez supprimer la table de données, les contrôles d’entrée de texte et réorganiser l’écran.

Pour ce faire, dans l’arborescence, cliquez sur le contrôle DataTable1 puis appuyer sur la touche Suppr de votre clavier pour supprimer le contrôle.

Avec la souris, sélectionnez les 3 contrôles d’entrée de texte puis appuyer sur la touche Suppr de votre clavier pour supprimer les contrôles.

Bien évidemment, vous auriez pu faire toutes les suppressions en une seule opération. L’intérêt est ici pédagogique afin de vous montrer différentes techniques de sélection et suppression.

Les icônes rouges d’erreurs apparaissent à cause des suppressions. En effet, les formules font encore référence aux propriétés des objets supprimés. Les erreurs vont être bientôt corrigées.

Pour l’instant, renommez le contrôle Button1 en Ajouter et déplacez le au-dessus de la galerie.

Ajouter une première liste déroulante

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

Ensuite, cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown1 est créé.

Renommez le contrôle Dropdown1 en ListeDeroulanteNom.

Centrez le contrôle ListeDeroulanteNom.

Définissez la table de valeurs suivantes pour ListeDeroulanteNom :

Items = ["Martin";"Durand";"Tran"]

Ajouter une seconde liste déroulante

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

Ensuite, cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown2 est créé.

Renommez le contrôle Dropdown2 en ListeDeroulantePrenom.

Centrez le contrôle ListeDeroulantePrenom et positionnez le sous ListeDeroulanteNom.

Définissez la table de valeurs suivantes pour ListeDeroulantePrenom :

Items = ["Alice";"Bob";"Chris";"Gérard"]

Ajouter une troisième liste déroulante

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

Ensuite, cliquez sur Contrôles, puis sélectionnez Liste déroulante : le contrôle Dropdown3 est créé.

Renommez le contrôle Dropdown3 en ListeDeroulanteAge.

Centrez le contrôle ListeDeroulanteAge et positionnez le sous ListeDeroulantePrenom.

Définissez la table de valeurs suivantes pour ListeDeroulanteAge :

Items = [28;32]

Modifier les formules

Définissez le contrôle bouton Ajouter :

OnSelect = Collect(Stagiaires; {Prénom:ListeDeroulantePrenom.Selected.Value; Nom:ListeDeroulanteNom.Selected.Value; Age:ListeDeroulanteAge.Selected.Value})

Width = 240

X = 40

Y = 390

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

Tester l’ajout

Avant de tester l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Appuyez sur la touche F5.

Cliquez sur le bouton Ajouter : le premier élément de la collection Stagiaires est créé et affiché dans la galerie.

Modifiez les valeurs des combinaisons Nom, Prénom et Age puis générez deux éléments supplémentaires.

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

À la fin de vos tests, fermez l’application.

Insérer un contrôle Bouton (Button)

Ce contrôle permettra de vider complètement la collection.

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

Sous Insérer, cliquez sur Bouton : le contrôle Button2 est créé.

Renommez le contrôle Button2 en Vider.

Positionnez le contrôle Vider à coté du bouton Ajouter.

Réduisez aussi légèrement la taille des deux boutons.

Définissez le contrôle Ajouter :

Width = 240

X = 40

Y = 390

Définissez le contrôle Vider :

OnSelect = Clear(Stagiaires)

Text = "Vider"

Width = 240

X = 340

Y = 390

La fonction Clear() vide complètement une collection. Vous trouverez l’aide de la fonction Clear() sur le lien ci-dessous.

https://coudr.com/powfncollect

Tester le vidage

Avant de tester l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Appuyez sur la touche F5.

Cliquez 3 fois sur le bouton Ajouter : 3 éléments identiques sont créés et affichés dans la galerie.

Cliquez sur le bouton Vider : le contenu de la collection est supprimé et la galerie n’affiche plus rien.

À la fin de vos tests, fermez l’application.

Vous pouvez vérifier que la collection existe toujours mais qu’elle est vide. Pour ce faire, cliquez sur le ruban Fichier puis cliquez sur Collections : votre collection Stagiaires apparaît bien mais vide.

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

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

L’opération précédente permet de vider une collection, vous allez voir comment supprimer un élément unitaire d’une collection.

Insérer un contrôle Icône (Icon)

Ce contrôle permettra de supprimer l’élément de votre choix de la collection.

Dans l’arborescence, cliquez sur un contrôle à l’intérieur de Gallery1, par exemple Separator2.

Faites très attention. Pour insérer un contrôle dans la une galerie, il ne suffit pas de cliquer sur la galerie. Le focus doit être sur un contrôle à l’intérieur de la galerie.

Puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Icônes, puis sélectionnez la corbeille : le contrôle Icon1 est créé.

Afin d’éviter que les contrôles se superposent, vous allez redéfinir la longueur des 3 contrôles : Title2, Subtitle2 et Body1.

Avec la souris, sélectionnez les 3 contrôles Title2, Subtitle2 et Body1, puis définissez en une seule fois la propriété Width :

Width = Parent.TemplateWidth - 150

Ensuite, définissez le contrôle Icon1 :

OnSelect = Remove(Stagiaires;ThisItem)

La fonction Remove() supprime un élément d’une collection. Vous trouverez l’aide de la fonction Remove() sur le lien ci-dessous.

https://coudr.com/powfncollect

Tester la suppression unitaire

Avant de tester l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Appuyez sur la touche F5.

Ajoutez 3 éléments différents dans la collection.

Cliquez sur l’icône en forme de corbeille en face de l’élément du milieu et constatez qu’il est bien supprimé.

À la fin de vos tests, fermez l’application.

Bien évidemment, vous pouvez aussi vérifier que l’élément a été supprimé de la collection grâce au menu Collections du ruban Fichier.

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer des tables de données dans Power Apps. Ces tables étaient associées à des listes déroulantes.

Vous avez aussi vu comment récupérer la valeur d’une liste déroulante sélectionnée, vider le contenu d’une collection existante ou supprimer un élément d’une collection.

Article mis à jour le 11.04.2020

Cet exercice vous explique comment créer une collection, puis l’exposer via un contrôle Table de données et un contrôle Galerie.

Une table de données est un contrôle simple. Son rôle est d’afficher les données sous forme d’un tableau. Ce contrôle dispose de très peu de paramétrage, contrairement aux contrôles galeries qui offrent de très nombreuses possibilités.

À travers cet exercice, vous verrez donc deux des outils les plus importants de Power Apps : les collections et les contrôles Galerie.

Créer une application Power Apps

Ouvrez le site web Microsoft Power Apps.

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.

Dans le volet central du nouvel onglet, cliquez sur Mode téléphone d’Application vide.

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 : Ignorer.

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

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

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 Bouton (Button)

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 Bouton permet d’effectuer des actions, comme le changement d’écran, ou la création d’une variable.

Dans l’arborescence, 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, sous Screen1 : Button1.

Dans l’arborescence, cliquez sur le contrôle Button1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Bouton par Ajouter.

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

Collect(Stagiaires; {Prénom:"Alice"; Nom:"Martin"; Age:32}; {Prénom:"Bob"; Nom:"Durand"; Age:36}; {Prénom:"Chris"; Nom:"Dubois"; Age:34})

La fonction Collect() crée de nouvelles collections. Une collection permet en particulier de stocker les données saisies par l’utilisateur.

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

https://coudr.com/powfncollect

Dans ce scénario, la collection s’intitule Stagiaires. Elle est composée de trois variables : Prénom, Nom et Age. Elle contient trois éléments.

Appuyez sur la touche F5 puis cliquez une seule fois sur le bouton Ajouter.

C’est tout.

Appuyez sur la touche échap pour sortir de l’aperçu.

Pour l’instant, vous ne “voyez” rien mais sachez que grâce à cette action, vous avez bien créé la collection.

Vous pouvez vérifier que la collection existe. Pour ce faire, cliquez sur le ruban Fichier puis cliquez sur Collections : votre collection Stagiaires apparaît bien.

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

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

Dans l’étape suivante, vous pourrez voir vos valeurs grâce à un contrôle Table de données.

Insérer un contrôle Table de données (DataTable)

Maintenant, vous allez afficher les données de la collection dans un nouveau contrôle. C’est le contrôle Table de données. Ce contrôle sert uniquement à afficher des données sous forme de tableaux.

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

Sous Insérer, cliquez sur Table de données : un cadre apparaît sur l’écran blanc. Descendez légèrement le cadre pour qu’il n’empiète pas sur le bouton.

Dans l’arborescence, cliquez sur le contrôle DataTable1 puis cliquez dans ses propriétés (à droite), cliquez dans la liste déroulante de Source de données et sélectionnez Stagiaires.

Dessous, cliquez sur Modifier les champs en face de Champs : le volet Données apparaît.

Dans ce volet, cliquez sur Ajouter un champ.

Dans la liste, cochez les trois champs dans cet ordre : Prénom, Nom et Age.

Si vous n’avez pas respecter l’ordre, ce n’est pas grave. Il suffit de déplacer les champs avec la souris dans le volet Données.

Fermez le volet Données.

Appuyez sur la touche F5.

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

Cliquez deux ou trois fois sur le bouton Ajouter : la table de données affiche la même collection plusieurs fois. C’est normal dans la mesure où la fonction Collect() cumule les valeurs d’une collection.

Vous allez changer ce comportement.

Appuyez sur la touche échap pour sortir de l’aperçu.

Dans l’arborescence, cliquez sur le contrôle Button1 puis cliquez dans ses propriétés.

Dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et remplacez la fonction Collect par ClearCollect. Ce qui donne :

ClearCollect(Stagiaires; {Prénom:"Alice"; Nom:"Martin"; Age:32}; {Prénom:"Bob"; Nom:"Durand"; Age:36}; {Prénom:"Chris"; Nom:"Dubois"; Age:34})

La fonction ClearCollect() crée une nouvelle collection. Si la collection existe déjà, elle est entièrement supprimée avant d’être recréée. Tandis que pour la fonction Collect(), si la collection existe déjà, les valeurs sont simplement ajoutées à la collection existante.

Appuyez sur la touche F5.

Cliquez deux ou trois fois sur le bouton Ajouter : la table de données n’affiche qu’une seule fois le contenu de la collection. C’est normal dans la mesure où la fonction ClearCollect() recrée systématiquement la collection. Si la collection existe déjà, elle est supprimée avant d’être recréée.

Appuyez sur la touche échap pour sortir de l’aperçu.

Dans cette étape, les données de la collection étaient stockées dans l’application. Dans les étapes suivantes, vous allez voir comment utiliser les contrôles pour alimenter automatiquement la collection à partir d’une saisie.

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

Refaites la même opération pour insérer un troisième contrôle Entrée de texte. Normalement, il se nomme TextInput3.

Pour tous les contrôles Entrée de texte concernés, supprimez le texte par défaut dans les propriétés (Entrée de texte).

Pour le dernier contrôle Entrée de texte TextInput3, changez son format dans Propriétés, en Nombre.

Arranger l’écran

Maintenant, vous allez arranger l’écran. Comme les manipulations sont un peu délicates, voici le résultat visuel attendu. Le détail des manipulations à faire se trouve en dessous.

Dans un premier temps, vous allez diminuer de moitié environ la hauteur du contrôle Table de données.

Il y a plusieurs méthodes pour le faire: souris ou formule. Dans tous les cas, assurez-vous de bien sélectionner le contrôle DataTable1.

Avec la souris, diminuez de moitié la hauteur du contrôle DataTable1. Si vous préférez utiliser la formule, indiquez que :

Height = 250

Y = 144

Avec la souris, descendez les trois contrôles Entrée de texte pour qu’ils soient sous le contrôle Table de données.

Ensuite, avec la souris, enlevez environ 2/3 de la largeur de chacun des trois contrôles Entrée de texte. En le faisant, vous remarquerez des pointillés qui apparaissent pour vous aider dans l’alignement du contrôle.

Si vous préférez utiliser la formule, indiquez pour chacun des trois contrôles Entrée de texte

Width = 186

Sachez que vous pouvez sélectionner les 3 contrôles en même temps et modifier en une seule opération la valeur d’une propriété commune.

Puis, alignez les 3 contrôles sur la même ligne.

Si vous préférez utiliser la formule, indiquez pour chacun des trois contrôles Entrée de texte

Y = 400

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

Modifier le contrôle bouton

Dans l’arborescence, cliquez sur le contrôle Button1 puis cliquez dans ses propriétés.

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

Collect(Stagiaires; {Prénom:TextInput1.Text; Nom:TextInput2.Text; Age:TextInput3.Text})

Appuyez sur la touche F5.

Saisissez des données dans les contrôles Entrée de texte puis cliquez sur le bouton Ajouter: vous alimentez la collection. Celle-ci s’affiche dans le contrôle Table des entrées.

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

Appuyez sur la touche échap pour sortir de l’aperçu.

Dans un environnement de production, il faudrait évidemment apporter de nombreuses améliorations à cette application, mais ce n’est pas l’objectif ici.

Dans l’étape suivante, vous allez aussi afficher les données dans un contrôle Galerie.

Insérer un contrôle Galerie (Gallery)

Un contrôle Galerie propose de nombreuses options, même si dans cet exercice, vous n’en verrez que quelques-unes.

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

Sous Insérer, cliquez sur Galerie : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Verticale : le volet Sélectionner une source de données apparaît.

Fermez ce volet. Vous n’en avez pas besoin pour l’instant.

Par défaut, le contrôle Gallery1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence, cliquez sur le contrôle Gallery1.

Descendez le contrôle Gallery1 tout en bas de l’écran.

Ensuite, cliquez dans ses propriétés (à droite), cliquez sur la flèche vers le bas du menu Disposition.

Dans la liste des dispositions, cliquez sur Titre, sous-titre et corps.

Dans le contrôle Gallery1, définissez la propriété Items :

Stagiaires

Dans propriétés, sélectionnez Modifier à côté de l’étiquette Champs puis vérifiez que :

Si ce n’est pas le cas, mettez à jour les données.

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

Fermez le volet Données.

Appuyez sur la touche F5.

Ajoutez deux stagiaires supplémentaires.

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

Appuyez sur la touche échap pour sortir de l’aperçu.

Enregistrer l’application

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

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

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

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à créer et exposer les collections via les tables de données et les galeries. Contrairement aux tables de données, les galeries proposent de très nombreuses options de paramétrages. Certaines d’entre elles seront vues dans d’autres manipulations. Vous avez aussi découvert la différence entre les fonctions Collect() et ClearCollect().

Article mis à jour le 09.04.2020.

Cet exercice vous explique comment créer une jointure entre deux sources de données. L’exemple utilise des listes SharePoint. Vous pouvez utiliser cette technique avec les autres sources de données.

Vous verrez notamment comment utiliser la fonction LookUp() qui cherche des informations dans une source de données. Cette fonction est très similaire à la fonction équivalente de Microsoft Excel.

Préparation

• L’exercice du TP Ajouter une connexion SharePoint Online dans Power Apps doit être terminé avec succès.
• La liste lstFruits doit exister dans votre site SharePoint.
• La liste lstProducteurs doit exister dans votre site SharePoint.

Modifier une application existante

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canFruits.

Dans la liste qui apparaît, cliquez sur : Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Insérer un contrôle Étiquette

Pour afficher le pays du producteur, vous allez utiliser un contrôle de type étiquette.

Avant d’insérer ce contrôle, vous allez lui faire de la place sur l’écran EcranModification.

Pour ce faire, cliquez dans l’arborescence sur EditForm1 qui se trouve sous EcranModification.

Une fois que le contrôle EditForm1 est sélectionné, réduisez sa taille avec la souris, de façon que le bas du formulaire se trouve juste en-dessous de la carte du producteur. Cela correspond à :

Height = 621

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

Maintenant, il faut insérer le contrôle de type étiquette. Pour ce faire, sélectionnez l’écran EcranModification dans l’arborescence.

Ensuite, cliquez dans l’onglet Insérer puis cliquez sur Étiquette : un nouveau contrôle apparait (Label1).

Descendez le sous le formulaire et centrez-le. Cela correspond à :

Y = 709

Dans la zone de la formule, définissez Label1 :

Text = "Provenance : " & LookUp(lstProducteurs; Titre = ListeDeroulanteProducteurs.Selected.Titre; Provenance.Value)

Cette formule concatène un texte (“Provenance : “) et le résultat de la fonction LookUp. Cette fonction cherche dans la liste lstProducteurs, l’élément dont le titre est identique au titre de l’élément sélectionné dans la liste déroulante ListeDeroulanteProducteurs. Puis, elle affiche la valeur correspondante de la colonne Provenance.

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

Exécuter l’application Power Apps

Avant d’exécuter l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Ensuite, cliquez sur EcranModification.

Appuyez sur la touche F5.

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

Changez le producteur du fruit sélectionné pour Verdure stagionali, puis vérifiez que la liste provenance a bien été mise à jour avec Italie.

À la fin de vos tests, fermez l’application.

Enregistrer l’application

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

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

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

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment afficher des données liées entre elles, grâce à la fonction LookUp().

Article mis à jour le 08.04.2020

Dans cet exemple, vous allez procéder à plusieurs personnalisations de l’application Power Apps qui a été générée automatiquement à partir d’une liste SharePoint, dans l’exercice Créer automatiquement une application Power Apps à partir de Sharepoint.

Notamment, vous verrez comment appliquer un formatage conditionnel à la liste afin de faire apparaître en rouge, certains éléments.

Vous verrez aussi comment mettre en œuvre une liste déroulante à l’aide de la fonction Filter(). Cette fonction affiche les éléments sélectionnés selon le critère que vous avez indiqué.

Vous mettrez aussi en œuvre un second filtre pour n’afficher que les éléments qui correspondent à la saisie des premières lettres du titre.

Enfin, vous approfondirez le tri Power Apps, que vous mettrez aussi en œuvre.

Si vous faites des modifications dans votre liste SharePoint, comme l’ajout d’une colonne ou d’un élément, Power Apps ne peut pas le “savoir”. Vous devrez actualiser systématiquement votre connexion de données dans Power Apps pour que vos modifications soient prises en compte.

Pour ce faire, vous cliquerez sur le menu Affichage puis Source de données. En face de la source de données, vous cliquerez sur …, puis Actualiser.

Préparation

• La liste lstAffaires doit exister dans votre site SharePoint.

Modifier une application existante

Ouvrez le site web Microsoft Power Apps.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application shpAffaires.

Dans la liste qui apparaît, cliquez sur : Modifier.

Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Appliquer un formatage conditionnel

Dans l’écran BrowseScreen1, vous souhaitez que le titre des jouets dont le montant hors taxe est supérieur à 20 euros, s’affiche en noir. Le titre des jouets dont le montant hors taxe est inférieur ou égal à 20 euros, s’affiche en rouge.

Dans l’écran BrowseScreen1, cliquez sur BrowseGallery1.

Ensuite, cliquez sur Title1.

Définissez sa propriété Color avec la formule :

If(MontantHT > 20;Color.Black;Color.Red)

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

Filtrer avec une liste déroulante

Dans l’écran BrowseScreen1, vous souhaitez disposer d’une liste déroulante pour filtrer les jouets sur leur état de conservation.

C’est une bonne pratique que la liste des valeurs d’une liste déroulante provienne d’une source de données externes comme une liste SharePoint. Toutefois, pour des raisons pédagogiques et afin d’éviter d’alourdir les manipulations, vous allez alimenter directement cette liste dans l’application.

Définissez l’écran BrowseScreen1 avec la propriété suivante :

OnVisible = ClearCollect( AffairesEtats; { Etat: "Tous"}; { Etat: "Neuf"}; { Etat: "Comme neuf"}; { Etat: "Très bon"}; { Etat: "Bon"}; { Etat: "Acceptable"} )

La fonction ClearCollect crée une collection nommée AffairesEtats. Cette collection énumère tous les états, ainsi que l’état “Tous” qui permet d’afficher tous les éléments. La collection sera créée et provisionnée lorsque la propriété OnVisible de l’écran BrowseScreen1 sera appelée.

La propriété OnVisible définit le comportement d’une application quand l’utilisateur accède à un écran. Autrement dit quand une action de l’utilisateur dans l’application affiche l’écran. Un simple aperçu F5 dans Power Apps ne déclenche donc pas l’action.

Vous allez insérer le contrôle de liste dé roulante qui va afficher les valeurs de la collection AffairesEtats.

Pour ce faire, cliquez sur le menu Insérer, puis cliquez sur Contrôles, puis sélectionnez Liste déroulante: le contrôle Dropdown1 est créé.

Vous allez recouvrir le contrôle TextSearchBox1 par le nouveau contrôle et indiquer qu’il est alimenté par la collection AffairesEtats.

Pour ce faire, définissez le contrôle Dropdown1 avec les propriétés suivantes :

Height = 71

Items = AffairesEtats

Width = 640

X = 0

Y = RectQuickActionBar1.Height

Maintenant, vous allez lier le contrôle Dropdown1 au contrôle BrowseGallery1 afin de filtrer les éléments.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Items = If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value))

La formule est composée d’une fonction If() qui vérifie si l’utilisateur a sélectionné la valeur “Tous”. Si c’est le cas, Items est alimenté par tous les éléments de la liste lstAffaires. Si ce n’est pas le cas, la fonction Filter() s’applique. Dans cette formule, la liste lstAffaires est filtrée pour n’afficher que les éléments dont l’état est identique à l’état sélectionné par l’utilisateur dans la liste déroulante.

Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

• Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
• Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
• Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Cliquez sur l’écran DetailScreen1.

À partir de l’écran DetailScreen1, appuyez sur la touche F5 de votre clavier. Ensuite, cliquez sur Revenir à la liste (icône < en haut et à gauche) pour revenir à la liste.

Attention. Si vous faites F5 à partir de BrowseScreen1, le sélecteur sera vide. Ce qui est normal, car la propriété OnVisible définit le comportement d’une application quand l’utilisateur accède à un écran.

Si vous êtes face à un sélecteur vide, cliquez sur Créer un élément (icône + en haut et à droite), puis sur le bouton Annuler (icône X en haut et à gauche).

Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.

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

À plusieurs reprises, changez la valeur de la liste déroulante afin de vérifier que les éléments correspondants s’affichent bien.

À la fin de vos tests, fermez l’application.

Filtrer sur les premières lettres

En plus du filtre précédent sur la liste déroulante, vous souhaitez filtrer les enregistrements du champ Titre en fonction des premières lettres de la zone de recherche. Cela requiert l’utilisation d’une seconde fonction Filter().

Tout d’abord, vous allez faire réapparaître la zone TextSearchBox1 en redimensionnant le contrôle BrowseGallery1, puis en déplaçant le contrôle Dropdown1.

Définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Y = 222

Grâce à ce paramétrage, vous avez abaissé le point haut du contrôle BrowseGallery1.

Définissez le contrôle Dropdown1 avec la propriété suivante :

Y = 154

Grâce à ce paramétrage, vous avez déplacé vers le bas le contrôle Dropdown1.

Maintenant, vous allez filtrer les enregistrements du champ Titre en fonction des premières lettres de la zone de recherche.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Items = Filter(If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value));StartsWith(Title;TextSearchBox1.Text))

La formule est composée d’une fonction Filter() qui encapsule la fonction If(). L’explication de cette fonction est donnée dans l’étape précédente.

Afin de mieux comprendre le rôle du Filter(), la formule est réécrite différemment. Faites attention que cette écriture n’est pas valide dans Power Apps. Son rôle est uniquement de vous aider à mieux comprendre la fonction Filter().

Filter("Résultats du If()";StartsWith(Title;TextSearchBox1.Text))

La fonction Filter() n’affiche que les éléments issus du If() dont le titre débute comme les premières lettres saisies dans TextSearchBox1.

Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

• Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
• Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
• Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Appuyez sur la touche F5 de votre clavier.

Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.

Saisissez les caractères poup dans la zone de recherche.

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

À la fin de vos tests, fermez l’application.

Trier sur une colonne

Vos utilisateurs souhaitent que le résultat de la liste soit trié sur le titre de l’élément. Cela nécessite d’utiliser la fonction SortByColumns(). Vous trouverez l’aide de la fonction SortByColumns() sur le lien ci-dessous qui présente toutes les fonctions de Power Apps.

https://coudr.com/powfn

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Items = SortByColumns((Filter(If(Dropdown1.Selected.Etat="Tous";lstAffaires;Filter(lstAffaires;Dropdown1.Selected.Etat = Etat.Value));StartsWith(Title;TextSearchBox1.Text)));"Title";If(SortDescending1;Descending;Ascending))

La formule est composée d’une fonction SortByColumns() qui récupère le résultat de la première fonction Filter(). L’explication de cette dernière fonction est donnée dans l’étape précédente.

Afin de mieux comprendre le rôle de SortByColumns(), la formule est réécrite différemment. Faites attention que cette écriture n’est pas valide dans Power Apps. Son rôle est uniquement de vous aider à mieux comprendre la fonction SortByColumns().

SortByColumns("Résultats du Filter()";"Title";If(SortDescending1;Descending;Ascending))

La fonction SortByColumns() trie tous les résultats du Filter() sur la colonne Title. En plus, l’ordre dépend de la variable booléenne SortDescending1. La valeur de cette variable est définie par le contrôle IconSortUpDown1. En effet, la propriété OnSelect de ce contrôle est définie ainsi :

UpdateContext({SortDescending1: !SortDescending1})

Le changement de la formule peut changer l’affectation des champs de la galerie. Vous allez donc vérifier l’affectation et éventuellement la corriger.

Pour ce faire, définissez le contrôle BrowseGallery1 avec les propriétés suivantes :

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

• Dans la zone Body1, sélectionnez Responsable, avec la valeur d’affichage DisplayName. Si c’est déjà le bon champ, ne faites rien.
• Dans la zone Subtitle1, sélectionnez IDaffaire. Si c’est déjà le bon champ, ne faites rien.
• Dans la zone Title1, sélectionnez Title. Si c’est déjà le bon champ, ne faites rien.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Appuyez sur la touche F5 de votre clavier.

Effacez le contenu de la zone de recherche, si des caractères sont toujours présents, comme poup.

Ensuite, sélectionnez par exemple la valeur Très bon dans la liste déroulante.

Cliquez sur Trier (icône avec une flèche montante et descendante).

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

À la fin de vos tests, fermez l’application.

Enregistrer l’application

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

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

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

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 Power Apps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris à modifier une application Power Apps SharePoint. Notamment, vous avez vu comment appliquer un formatage conditionnel à la liste afin de faire apparaître en rouge les éléments dont le montant était inférieur à 20 euros.

Vous avez vu aussi comment n’afficher que les éléments qui correspondent au choix d’une liste déroulante, et ceux qui correspondent à la saisie de premières lettres.

Enfin, vous avez découvert le fonctionnement du tri dans Power Apps.

Article mis à jour le 07.04.2020

Dans cet exemple, vous découvrirez comment créer un formulaire Power Apps avec des onglets.

Pour ce faire, l’astuce consiste à utiliser des boutons qui seront suffisamment arrondis pour ressembler à des onglets.

Par ailleurs, afin de s’éviter trop de manipulations, un premier bouton nommé Jouets sera entièrement configuré. Ensuite, il sera copié 2 fois pour disposer au total de 3 boutons et donc 3 onglets. Il suffira de changer le texte des 2 nouveaux boutons pour les identifier.

Enfin, vous terminerez en associant les contrôles cartes de données aux onglets correspondants.

Préparation

• L’exercice du TP Personnaliser une liste SharePoint doit être terminé avec succès.
• La liste lstAffaires doit exister dans votre site SharePoint.

Personnaliser le formulaire SharePoint

Tout d’abord, ouvrez vote site SharePoint puis sur ce site, ouvrez la liste lstAffaires avec l’interface moderne.

Ensuite, dans le menu de la liste, cliquez sur Power Apps, puis dans le sous-menu qui s’ouvre, cliquez sur Personnaliser les formulaires.

Patientez quelques instants, le temps du chargement et de la préparation du formulaire.

Préparer le formulaire

Une fois que le formulaire est ouvert dans Power Apps, fermez le volet Champs avec la croix.

Ensuite, supprimez le contrôle Image1. Ce contrôle avait été inséré précédemment dans le TP Personnaliser une liste SharePoint.

Donnez la couleur suivante au formulaire :

SharePointForm.Fill = RGBA(0; 120; 212; 1)

Puis, avec l’onglet Insérer, insérez une étiquette puis configurez ses propriétés :

Label1.Text = "Détail d'une affaire"

Label1.FontWeight = Bold

Label1.Italic = True

Label1.Height = 151

Label1.Size = 28

Ajouter un bouton

Ensuite, avec l’onglet Insérer, insérez un bouton. Grâce aux propriétés, remplacez le texte Bouton par le texte Jouet.

Button1.Text = "Jouet"

Puis, modifiez la courbure du haut du bouton de 20 degrés :

Button1.RadiusTopLeft = 20

Button1.RadiusTopRight = Button1.RadiusTopLeft

Comprendre les effets visuels des onglets

Un onglet est une sorte “d’illusion d’optique”.

En effet, lorsque l’utilisateur clique sur un onglet, il s’attend à voir l’onglet sur lequel il a cliqué “s’activer”. Inversement, il s’attend à voir les autres onglets “se désactiver”. Ces phénomènes visuels s’obtiennent en jouant sur les paramètres de couleur du bouton et ceux liés aux bordures de l’onglet.

Vous trouverez l’explication des propriétés de couleur et de bordure dans Power Apps sur le site de Microsoft Docs, qui est consultable grâce à ce raccourci : https://coudr.com/powco

De plus, le paramétrage de ces propriétés utilise la fonction ColorFade(). Celle-ci renvoie une version plus claire ou plus sombre d’une couleur. La quantité de fondu varie de -100% (complètement noir) à 100%, qui éclaire complètement une couleur au blanc.

Vous trouverez l’aide de la fonction ColorFade() sur ce lien : https://coudr.com/powfn

Personnaliser les effets visuels des onglets

Configurez les couleurs et la bordure du bouton avec ces paramètres :

Button1.BorderColor = SharePointForm1.BorderColor

Button1.BorderStyle = BorderStyle.Solid

Button1.DisabledBorderColor = ColorFade(Button1.BorderColor;
60%)

Button1.DisabledColor = Button1.Color

Button1.DisabledFill = SharePointForm1.Fill

Button1.HoverBorderColor =
ColorFade(Button1.BorderColor; 20%)

Button1.HoverColor = Button1.Color

Button1.PressedBorderColor = Button1.Fill

Mécanisme d’activation

Les propriétés DisabledBorderColor, DisabledColor, DisabledFill ne s’affichent que si la valeur de la propriété DisplayMode est définie sur Disabled (désactivé). DisplayMode fait partie des propriétés principales de Power Apps, au même titre que OnSelect par exemple. Elle sert à définir si le contrôle autorise l’entrée utilisateur (valeur: Edit), affiche uniquement les données (valeur: View) ou est désactivé (valeur: Disabled).

Si un onglet n’est pas sélectionné, ses propriétés Disabled doivent s’afficher. Si l’onglet est sélectionné, ses propriétés Disabled ne doivent pas s’afficher. Pour savoir, si l’onglet est sélectionné, il suffit de stocker le texte de l’onglet dans une variable au moment où l’utilisateur clique sur l’onglet :

Button1.OnSelect = Set(varOngletTitre;Button1.Text)

Ensuite, il suffit de comparer la valeur de la variable avec la valeur du texte de l’onglet en cours. Configurez la propriété DisplayMode du bouton :

Button1.DisplayMode = If(varOngletTitre=Button1.Text;Disabled;Edit)

Finaliser le paramétrage du bouton

Enfin, pour une raison purement esthétique (et pédagogique), le texte de l’onglet est aligné en haut et la taille du bouton est réduite. La réduction permettra d’avoir bientôt 3 boutons. Configurez ces deux dernières propriétés :

Button1.VerticalAlign = Top

Button1.Width = 148

Ensuite, glissez le bouton pour qu’il s’aligne en haut du contrôle de formulaire.

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

Multiplier le bouton d’origine

Maintenant, sélectionnez votre bouton, copiez-le et collez-le à 2 reprises : vous obtenez 3 boutons.

Renommez les 2 nouveaux boutons : Button2 et Button3.

Alignez vos boutons en haut du formulaire.

Grâce à la propriété Text, remplacez le texte “Jouet” par “Montant” puis “Responsable”.

Button2.Text = "Montant"

Button3.Text = "Responsable"

Attribuer les contrôles

Chaque onglet doit afficher des cartes de données différentes, sinon ils ne servent à rien.

Dans la vraie vie, il y aurait probablement 12 à 15 champs à répartir sur les onglets. Dans ce scénario, il y a seulement 3 champs. Toutefois, il est facile de décliner ce qu’il y a faire avec plus de champs.

Votre objectif est que le Titre apparaisse sur tous les onglets, la carte MontantHT ne doit apparaître que sur l’onglet “Montant”, tandis que la carte Responsable ne doit apparaître que sur l’onglet “Responsable”.

Cliquez sur la carte Responsable, puis définissez sa propriété visible :

Responsable_DataCard1.Visible = varOngletTitre = "Responsable"

Ne soyez pas surpris de voir le contrôle disparaître. Comme l’application n’a pas été exécutée, la variable varOngletTitre n’a pas encore de valeur. Donc varOngletTitre = “Responsable” est faux. Du coup Responsable_DataCard1.Visible = false.

Ensuite, cliquez sur la carte MontantHT, puis définissez sa propriété visible:

MontantHT_DataCard1.Visible = varOngletTitre = "Montant"

Pour la carte Titre, c’est encore plus simple : il suffit de ne pas définir la propriété OnVisible pour que la carte s’affiche sur tous les onglets. Il n’y a donc rien à faire.

Configurer l’écran

Lors de l’ouverture du formulaire, vous souhaitez que l’utilisateur arrive par défaut sur l’onglet Jouet.

Pour ce faire, configurez la propriété avancée OnVisible de l’écran :

FormScreen1.OnVisible = varOngletTitre = "Jouet"

C’est fini 😉

Tester le nouveau formulaire

Vous allez vérifier l’efficacité de vos modifications. Pour cela, cliquez sur le lien dans le coin supérieur gauche, qui s’intitule Revenir à SharePoint : une boite de dialogue s’ouvre.

Dans cette boîte de dialogue, cliquez sur le bouton Publier sur SharePoint.

Patientez quelques instants : la liste SharePoint va s’ouvrir.

Il est possible que le résultat ne soit pas immédiat suite à la manipulation ci-dessous. Dans ce cas patientez une bonne minute. Si le résultat n’est toujours pas visible : modifiez à nouveau le formulaire PowerApps puis publiez le à nouveau.

Dans cette liste, cliquez sur un élément quelconque pour l’ouvrir : il s’affiche bien dans le nouveau formulaire Power Apps.

Cliquez sur l’onglet Responsable et remarquez la présence des champs Titre et Responsable, uniquement.

Cliquez sur l’onglet Montant et remarquez la présence des champs Titre et MontantHT, uniquement.

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

Dans SharePoint, fermez le volet de l’élément affiché.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer des formulaires dans un formulaire Power Apps.

Maintenant, vous pouvez appliquer cette technique sur des formulaires ou sur les applications Power Apps que vous développerez dans l’avenir.

Pour aller encore plus loin, vous avez un excellent article (en anglais et en deux parties) de Mme Audrie Gordon sur Microsoft Docs. Il montre une utilisation encore plus poussée des onglets dans une application Power Apps :

Partie 1 : Handling Tab Control Scenarios in PowerApps for Full Screen Formats : https://coudr.com/powtab01

Partie 2 : Tabbed User Interface – Mobile Version : https://coudr.com/powtab02

Article mis à jour le 13.03.2020