Exercice : utilisation des variables et des collections

7 minutes

Ce labo pratique vous montre comment créer et utiliser les fonctions Global, Contextual et Collection.

Connectez-vous à Power Apps Maker Portal (make.powerapps.com).
Dans le volet de navigation gauche de l’écran d’accueil, cliquez sur + Créer, puis sélectionnez Application vide. Ensuite, dans la fenêtre contextuelle Créer, sous Application canevas vide, cliquez sur Créer.
Nommez votre application Exercice Collection, laissez le format défini sur Tablette, puis cliquez sur Créer.
Quelques instants après, votre nouvelle application s’affiche. Vous pouvez ignorer la boîte de dialogue de bienvenue (si elle s’affiche). Dans le volet Arborescence, recherchez et sélectionnez l’objet Application, puis sélectionnez la propriété OnStart.

Définissez la propriété OnStart sur la formule permettant de créer une collection de numéros client et les numéros de facture associés (sachant qu’il vous suffit de la copier-coller dans la barre de formule fx) :

ClearCollect(colCustomer,
{CustomerNumber: 7470, InvoiceNumber: "INV70817"},
{CustomerNumber: 4259, InvoiceNumber: "INV29595"},
{CustomerNumber: 8251, InvoiceNumber: "INV74302"},
{CustomerNumber: 2338, InvoiceNumber: "INV35115"},
{CustomerNumber: 1524, InvoiceNumber: "INV82337"},
{CustomerNumber: 1530, InvoiceNumber: "INV82338"}
);
Set(varUserDisplayName, User().FullName)

Cliquez sur les points de suspension (…) en regard de l’objet Application, puis sélectionnez Exécuter OnStart. Cette opération entraîne l’exécution de la formule OnStart que vous venez de saisir et renseigne votre collection colCustomer.
Pour afficher la collection, cliquez sur l’onglet Insérer (ou sur + Insérer dans la barre de commandes) et ajoutez un contrôle Galerie verticale, puis définissez sa propriété Items sur colCustomer.

Apportez les modifications ci-dessous à votre nouvelle galerie Gallery1 à l’aide du volet Propriétés sur le côté droit de l’écran :
- Layout : Titre et sous-titre
- Height : 650
- Fields : redéfinissez la propriété Title sur CustomerNumber dans le volet Données. (Vous pouvez également sélectionner le libellé Titre dans la galerie et redéfinir la propriété Text sur ThisItem.CustomerNumber.)
- Supprimez l’icône NextArrow. (Sélectionnez-la dans la galerie.)
Dans la galerie, cliquez sur le crayon de modification entouré d’un cercle ou sur le libellé Titre, puis ajoutez un contrôle Icône à l’aide de l’onglet Insérer. Recherchez et sélectionnez l’icône Corbeille. Déplacez l’icône Corbeille sur le côté droit de la galerie.

Votre galerie comprend désormais l’icône Corbeille.
Cliquez sur l’icône Corbeille, puis définissez sa propriété OnSelect sur la formule ci-dessous :

Remove(colCustomer,ThisItem)
Maintenez enfoncée la touche Alt, puis cliquez sur la première icône Corbeille.

Cette opération entraîne la suppression de la ligne sélectionnée de la collection. Lors de l’exécution de ce processus, vous souhaiterez probablement envoyer un message d’avertissement indiquant que la ligne sera supprimée.

À l’aide d’une Variable contextuelle, créons un avertissement contextuel pour informer l’utilisateur de la suppression en attente et lui permettre de l’annuler.
Commencez par redéfinir la propriété OnSelect de l’icône Corbeille sur la formule ci-dessous :

UpdateContext({varPopup:true})
Pour créer la fenêtre contextuelle, sélectionnez l’écran (en dehors du contrôle Galerie) et ajoutez un contrôle Rectangle à l’aide de l’onglet Insérer. (Vous pouvez saisir « rectangle » dans la zone de recherche du menu Insérer pour le rechercher rapidement.)
Définissez les propriétés du contrôle Rectangle comme suit :
- Name : rectangle_backgrd
- Size : 744 (width) ; 720 (height)
- Fill : RVBA(166, 166, 166, .50)
Positionnez le rectangle pour couvrir votre galerie.
Ajoutez un autre contrôle Rectangle et mettez à jour ses propriétés comme suit :
- Name : rectangle_foregrd
- Size : 744 (width) ; 348 (height)
- Fill : RVBA(255, 255, 255, 1)
- BorderThickness : 1
Positionnez ce rectangle pour l’adapter à la partie supérieure de l’autre rectangle.
Cliquez sur Insérer>Libellé de texte.
Apportez les modifications suivantes aux propriétés du contrôle Libellé de texte :
- Name : lbl_popup
- Font size : 15
- Font weight : Gras
- Text alignment : Centrer

Définissez la propriété Text de lbl_popup sur la formule ci-dessous :

varUserDisplayName & "
Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber

Cliquez sur Insérer, sélectionnez Bouton et nommez votre nouveau contrôle Bouton : button_Delete ; définissez sa propriété Text sur : Supprimer.

Définissez la propriété OnSelect du bouton Supprimer comme suit :

Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
UpdateContext({varPopup:false})

Cliquez sur Insérer, sélectionnez Bouton et nommez le nouveau contrôle Bouton : button_Cancel ; définissez sa propriété Text sur : Cancel.
Définissez la propriété OnSelect du bouton Cancel sur :

UpdateContext({varPopup:false})
Organisez les contrôles que vous avez créés au-dessus du contrôle Gallery1 comme suit :
Sélectionnons à présent tous ces contrôles afin de pouvoir les regrouper. Tout en maintenant enfoncée la touche Ctrl, sélectionnez les contrôles suivants :
- rectangle_backgrd
- rectangle_foregrd
- lbl_popup
- button_Delete
- button_Cancel
Une fois tous ces contrôles sélectionnés, cliquez avec le bouton droit de la souris et sélectionnez Groupe. Définissez la propriété Visible de Group1 sur :

varPopup

Cette opération devrait les faire tous disparaître de l’écran. Si tel n’est pas le cas, maintenez enfoncée la touche Alt et sélectionnez votre bouton Cancel.

Vous avez créé une fenêtre contextuelle qui permet de supprimer le client sélectionné de la galerie.

Testons maintenant la fonction Supprimer.
Maintenez enfoncée la touche Alt, puis cliquez sur l’icône Corbeille pour la facture n° INV29595.
Cliquez sur le bouton Supprimer ; la facture INV29595 est supprimée de la galerie et la fenêtre contextuelle disparaît.
À présent, maintenez de nouveau enfoncée la touche Alt, puis cliquez sur l’icône Corbeille pour la facture n° INV74302.
Cette fois-ci, cliquez sur le bouton Cancel. La fenêtre contextuelle se ferme et la facture n° INV74302 est conservée dans la galerie.

Nous avons créé une collection dynamique, une variable globale et une fenêtre contextuelle utilisant une variable contextuelle.

Exercice : utilisation des variables et des collections

Commentaires