Catégories
Consultant, Formateur

Exposer une collection Power Apps via les tables et galeries

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.

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

Collection Stagiaires
Collection Stagiaires

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.

Contrôle Table de données
Contrôle Table de données

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.

Arrangement de l'écran
Arrangement de l’écran

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.

Nouvel écran
Nouvel écran

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.

Insertion des entrées de texte
Insertion des entrées de texte

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.

Propriétés de la galerie
Propriétés de la galerie

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.

Vue galerie
Vue galerie

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *