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 :
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
Laisser un commentaire