Exercice : ajouter une galerie de machines et se connecter à la source de données

  • 25 minutes

Dans cet exercice, vous allez ajouter une galerie contenant toutes les machines disponibles pour permettre aux utilisateurs de parcourir plus facilement la liste et d’obtenir un aperçu rapide.

Remarque

Vous devez terminer les exercices à l’aide de quelques fichiers. Téléchargez les fichiers App in a Day à utiliser dans ce module. Voici les dossiers de fichiers qui se trouvent dans ce téléchargement :

  • Modules terminés avec instructions : fichiers de package permettant d’importer les étapes d’exercice terminées.
  • Machine-Order-Data.xlsx : fichier utilisé dans les exercices.

Dans cette tâche, vous allez ajouter une galerie répertoriant les types de machines. Il s’agit d’une galerie verticale à une seule colonne s’affichant sur le côté gauche de l’écran, chaque cellule montrant une image du type de machine. Vous allez ensuite utiliser cette galerie comme filtre pour la galerie de machines que vous allez créer.

  1. Sélectionnez Main Screen dans le volet Arborescence.

  2. Cliquez sur + Insérer, développez le groupe Disposition, puis sélectionnez Galerie verticale.

    Capture d’écran du bouton Insérer et de l’option Galerie verticale.

    Cette action entraîne l’ajout d’une galerie nommée Gallery1 à l’écran. L’arborescence des contrôles à gauche affiche cette galerie avec un rectangle, un séparateur, une flèche Suivant, deux libellés et une image. Le volet de données s’affiche automatiquement lors de la création de la galerie.

    Capture d’écran de la galerie sur le canevas du concepteur d’applications.

  3. Cliquez sur Données au-dessus de la galerie, puis développez Connecteurs et cliquez sur Afficher tous les connecteurs.

    Capture d’écran avec le bouton Afficher tous les connecteurs mis en évidence.

  4. Sélectionnez Importer à partir d’Excel.

    Capture d’écran de l’option importer à partir d’Excel mise en évidence.

  5. Dans la boîte de dialogue Ouverture du fichier, accédez à l’emplacement où vous avez décompressé le fichier de données (par exemple C:\AIAD\PAHandsOnLabContent), puis sélectionnez Machine-Order-Data.xlsx pour le charger.

    Capture d’écran du bouton Ouvrir.

  6. Sélectionnez les tables Machines et MachineTypes, puis cliquez sur le bouton Se connecter. Les deux tables sont désormais ajoutées en tant que données statiques dans l’application.

    Capture d’écran des deux entités sélectionnées et d’une flèche pointant vers le bouton Se connecter.

    Remarque

    Dans ce labo, vous allez utiliser des tables importées à partir d’un fichier de données statiques et intégrées en tant que ressources dans l’application. Si vous créiez une solution réelle, les mêmes tables seraient probablement stockées dans le cloud, par exemple dans une liste SharePoint, une table SQL ou une table Microsoft Dataverse.

  7. Redéfinissez le nom de la galerie sur galMachineType.

    Capture d’écran d’une galerie renommée.

Section 2 : utiliser des galeries

Les galeries sont un excellent moyen de visualiser des données tabulaires dans Power Apps. Il est important de vous familiariser avec la personnalisation d’une galerie. Voici les composants clés d’une galerie : le contrôle de galerie, la cellule modèle (première cellule) et les contrôles dans la cellule modèle.

Pour sélectionner la galerie entière, cliquez sur la galerie dans l’arborescence à gauche ou sur la deuxième ou troisième cellule. Un clic sur toute cellule autre que la première de la galerie entraîne la sélection de la galerie entière. Vous pouvez maintenant spécifier des propriétés qui s’appliquent à l’ensemble de la galerie, comme la propriété Items qui est la source de données, la couleur de remplissage de la galerie, les bordures, etc.

Pour personnaliser l’affichage de chaque élément dans la galerie, vous allez personnaliser la cellule modèle. Sélectionnez le modèle en cliquant dans la première cellule de la galerie ou vous pouvez cliquer sur l’icône représentant un crayon dans le coin supérieur gauche lorsque toute la galerie est sélectionnée.

Vous pouvez maintenant ajouter, supprimer et personnaliser les contrôles dans la cellule modèle. Ces modifications sont répercutées dans chaque élément ou ligne de la table.

Si vous sélectionnez l’image de la machine dans la cellule modèle, vous pouvez modifier sa taille. Notez que la taille de l’image change dans toutes les cellules.

En outre, vous pouvez tester votre galerie directement sur le canevas en appuyant sur la touche Alt de votre clavier pour l’activer.

Vous allez personnaliser la galerie de machines dans les étapes suivantes.

Inutile de créer la galerie parfaite au pixel près : le but de cet exercice est de faire fonctionner votre application avec une expérience utilisateur (UX) acceptable. Vous pouvez toujours refaire ces labos pour parfaire vos compétences.

Lorsque vous utilisez le positionnement d’un contrôle, X fait référence au positionnement horizontal et Y au positionnement vertical.

  1. Cliquez sur Machine Type Gallery, accédez au volet Propriétés et définissez la propriété Source de données sur MachineTypes.

    Capture d’écran illustrant la propriété Source de données de la galerie.

  2. Définissez la propriété X de Machine Type Gallery sur 0.

  3. Définissez la propriété Y de Machine Type Gallery sur 60.

  4. Définissez la propriété Width de Machine Type Gallery sur 200.

  5. Définissez la propriété Height de Machine Type Gallery sur 708.

  6. Sélectionnez Machine Type Gallery, puis cliquez sur Layout dans l’onglet Propriétés à droite.

    Capture d’écran du menu de la propriété Layout.

  7. Faites défiler vers le bas jusqu’à la section Galerie, puis sélectionnez 2 colonnes.

    Capture d’écran avec une flèche pointant vers l’icône représentant deux colonnes dans la section Galerie.

  8. Redéfinissez la propriété Wrap count sur 1. Ce paramètre transforme la galerie en galerie à une seule colonne.

    Capture d’écran illustrant la propriété Wrap count pour la disposition de la galerie.

  9. Sélectionnez le contrôle Image dans la galerie. Redéfinissez le nom du contrôle Image sur imgMachineType.

    Capture d’écran illustrant Image dans une galerie.

  10. Définissez la propriété Image sur la formule suivante, afin de définir le contrôle Image sur l’URL de la photo :

    ThisItem.Photo

  11. Sélectionnez la galerie galMachineType, puis cliquez sur le crayon Modifier la galerie pour mettre la galerie en mode Édition.

    Capture d’écran illustrant le bouton Modifier la galerie.

  12. Réduisez la hauteur de la cellule modèle de sorte que les quatre images occupent la galerie et s’affichent sans défilement. Vous souhaitez que l’image occupe toute la cellule.

    Capture d’écran illustrant la hauteur de la cellule modèle.

  13. Assurez-vous que la cellule modèle de la galerie est toujours sélectionnée. Cliquez sur Insérer, puis sélectionnez Libellé de texte.

    Capture d’écran illustrant le bouton Insérer et le contrôle Libellé de texte.

  14. Définissez la propriété Text du contrôle Libellé de texte sur la formule suivante :

    ThisItem.Name

    Capture d’écran illustrant la propriété Text du contrôle Libellé de texte.

  15. Définissez la propriété X du contrôle Libellé de texte sur 0.

  16. Définissez la propriété Y du contrôle Libellé de texte sur 132.

  17. Définissez la propriété Width du contrôle Libellé de texte sur 192.

  18. Redéfinissez la propriété Fill sur Color.Black.

  19. Redéfinissez la propriété Color sur Color.Gray.

  20. À l’aide de la barre d’outils en haut de la page, redéfinissez la propriété Size sur 10.

    Capture d’écran illustrant la propriété Size du contrôle Libellé de texte.

    L’écran principal devrait maintenant ressembler à l’image suivante :

    Capture de l’écran principal.

  21. Cliquez sur Enregistrer, puis attendez que l’application soit enregistrée.

Pour ajouter une galerie de machines, procédez comme suit :

  1. Sélectionnez Main Screen, puis cliquez sur le menu déroulant + Insérer, développez le groupe Disposition, puis sélectionnez Horizontal gallery.

    Capture d’écran illustrant le bouton Insérer et l’option Horizontal gallery.

  2. Sélectionnez Machines comme source de données.

    Capture d’écran illustrant l’option Machines sélectionnée comme source de données.

  3. Redéfinissez le nom de la galerie sur galMachine.

    Capture d’écran illustrant le changement de nom de la galerie d’appareils.

Pour organiser Machine Gallery, procédez comme suit :

  1. Développez la galerie Machine Gallery renommée galMachine et renommez les contrôles selon l’image ci-dessous. Ensuite, sélectionnez le contrôle imgMachine.

    Capture d’écran illustrant une image dans le contrôle Galerie.

  2. Définissez la propriété Image du contrôle Image sur la formule suivante :

    ThisItem.Photo

  3. Dans la galerie galMachine, sélectionnez le contrôle Titre renommé lblTitle.

  4. Définissez la propriété Text du contrôle Titre sur la formule suivante :

    ThisItem.'Machine Name'

  5. Dans la galerie galMachine, sélectionnez le composant Sous-titre renommé lblSubtitle.

  6. Définissez la propriété Text du composant Sous-titre sur la formule suivante :

    ThisItem.Price

  7. Sélectionnez l’ensemble de la galerie galMachine dans le volet Arborescence.

  8. Définissez la propriété X de la galerie sur 200.

  9. Définissez la propriété Y de la galerie sur 60.

  10. Définissez la propriété Width de la galerie sur 1160.

  11. Définissez la propriété Height sur 650.

  12. Sélectionnez galMachine dans le volet Arborescence, accédez au volet Propriétés et définissez la propriété Wrap count sur 2.

    Capture d’écran illustrant la propriété Wrap count de Machine Gallery définie sur 2.

  13. Réglez le bouton bascule Show scrollbar sur Désactivé et le bouton bascule Show navigation sur Activé.

    Capture d’écran illustrant le bouton bascule Show scrollbar réglé sur Désactivé et le bouton bascule Show navigation réglé sur Activé.

  14. Sélectionnez le contrôle Image dans galMachine depuis le volet Arborescence.

    Capture d’écran illustrant un contrôle Image dans Machine Gallery.

  15. Définissez la propriété Width du contrôle Image sur 200.

  16. Définissez la propriété Height du contrôle Image sur 170.

  17. Maintenez la touche Ctrl enfoncée et effectuez une sélection multiple des libellés lblTitle et lblSubtitle dans la galerie.

    Capture d’écran illustrant des contrôles dans la galerie.

  18. Accédez à Propriétés et sélectionnez Centrer pour Text alignment.

    Capture d’écran illustrant la propriété Text alignment définie sur Centrer.

  19. Sélectionnez galmachine, puis cliquez sur l’icône représentant un Crayon pour modifier la galerie.

    Capture d’écran du bouton Modifier la galerie.

  20. Réduisez le modèle jusqu’à ce qu’un total de 8 machines soit visible.

    Capture d’écran illustrant le dimensionnement du modèle de galerie.

Dans cette tâche, vous allez spécifier la couleur de surbrillance de l’élément sélectionné à l’aide de la propriété TemplateFill de Machine Type Gallery. Vous pouvez décider comment vous souhaitez indiquer l’élément sélectionné. Vous allez également modifier le remplissage des libellés pour cette galerie.

  1. Développez galMachineType dans l’Arborescence, puis redéfinissez le nom du contrôle Libellé de texte sur lblMachineType. Ensuite, sélectionnez le contrôle lblMachineType.

    Capture d’écran illustrant un contrôle Libellé de texte dans Machine Type Gallery.

  2. Redéfinissez la propriété Fill du contrôle Libellé sur la formule suivante. Cette formule Power Fx définit le remplissage du libellé sur DarkRed pour l’élément sélectionné.

    If(ThisItem.IsSelected,Color.DarkRed)

    Vous pouvez également définir la propriété Fill sur : If(ThisItem.IsSelected,ColorFade (lblHeader.Fill,75%))

    Nous vous recommandons d’adopter cette approche, afin que la couleur de remplissage corresponde au libellé d’en-tête avec un fondu de 75 %. Si vous modifiez la couleur de remplissage du libellé d’en-tête, la couleur de remplissage de l’élément sélectionné dans la galerie change automatiquement.

    Capture d’écran illustrant la propriété Fill du contrôle Libellé.

  3. Essayez d’utiliser le mode Aperçu pour tester rapidement cette fonction. Vous pouvez activer le mode Aperçu en maintenant enfoncée la touche Alt (également appelée touche Option) et en sélectionnant quelques fabricants différents dans la galerie. Notez que l’élément sélectionné dans la galerie de fabricants est mis en surbrillance. Vous quittez le mode Aperçu lorsque vous relâchez la touche.

Vous pouvez également cliquer sur le bouton Lire pour passer en mode Aperçu. Pour quitter le mode Aperçu, cliquez sur le X dans le coin supérieur droit ou appuyez sur la touche Échap.

Dans cette tâche, vous allez filtrer les éléments dans galMachine à l’aide de la fonction Filter() et afficher uniquement les machines qui correspondent à l’élément sélectionné dans galMachine.

  1. Sélectionnez la galerie galMachine.

  2. Définissez la propriété Items sur la formule suivante :

    Filter(Machines, 'Machine Type ID' = galMachineType.Selected.'Type ID', 'Machine Type ID')

    Pour les paramètres régionaux autres/européens, saisissez la formule suivante :

    Filter(Machines; 'Machine Type ID' = galMachineType.Selected.'Type ID'; 'Machine Type ID')

    Capture d’écran illustrant la propriété Items de Machine Gallery.

    Remarque

    Si vous obtenez une erreur lors de la saisie de la commande Filter(), vérifiez le nom de la galerie de types de machines. Le nom dans la commande Filter() doit correspondre à celui de votre galerie.

    Machine Gallery devrait maintenant afficher les machines qui correspondent à l’élément sélectionné des types de machines.

    Capture d’écran illustrant une galerie de machines à café.

  3. Cliquez sur le bouton Prévisualiser l’application dans le coin supérieur droit de l’écran.

    Capture d’écran du bouton Prévisualiser l’application.

    L’application devrait se charger.

  4. Cliquez sur une option dans le menu de navigation à gauche de galMachine. La galerie Machine Gallery devrait afficher les machines qui correspondent au type de machine sélectionné.

    Capture d’écran illustrant le bouton Fermer l’aperçu.

  5. Fermez l’aperçu.

Pour en savoir plus sur la fonction Filter(), consultez Fonctions Filter, Search et LookUp.

Pour un ensemble complet d’expressions, consultez Référence de formule Power Fx.

Section 7 : configurer des libellés de texte dans la galerie Machine Gallery

Pour configurer des libellés de texte dans la galerie Machine Gallery, procédez comme suit :

  1. Développez la galerie galMachine dans le volet Arborescence et sélectionnez le libellé lblSubtitle.

  2. Pour ajouter le symbole dollar ($) au contrôle Sous-titre, remplacez la valeur Text de l’expression par la formule suivante :

    Text(ThisItem.Price,"$##,###.00")

    Pour les paramètres régionaux autres/européens, saisissez la formule suivante : Text(ThisItem.Price;"$##.###,00")

    Remarque

    Une fois la valeur précédente saisie dans la barre de formule, elle est automatiquement résolue pour inclure votre paramètre régional, par exemple [$-en-US]. Si une erreur survient, vos paramètres régionaux peuvent ne pas encore être pris en charge, auquel cas, comme solution de contournement, vous pouvez la redéfinir manuellement sur [$-en-US].

    Capture d’écran illustrant la définition du prix de l’appareil.

Section 8 : mise en forme conditionnelle pour mettre en surbrillance les machines d’une valeur supérieure à 10 000 $

Vous pouvez faciliter l’identification des machines qui coûtent plus de 10 000 $ en affichant le prix en rouge.

  1. Sous galMachine, sélectionnez le contrôle lblSubtitle qui affiche le prix, puis définissez la propriété Color sur la formule suivante :
    If(Value(ThisItem.Price)>10000,Color.OrangeRed,Color.Gray)

    Pour les paramètres régionaux autres/européens, saisissez la formule suivante : If(Value(ThisItem.Price)>10000;Color.OrangeRed;Color.Gray)

    Capture d’écran illustrant la définition de la couleur de la police du prix de l’appareil.

    Remarque

    Lorsque vous saisissez cette formule, notez que la suggestion automatique affiche un choix de couleurs correspondantes. Power Apps est fourni avec un ensemble de couleurs standard que vous pouvez référencer dans toute propriété qui accepte une valeur de couleur. Vous pouvez également définir des valeurs de couleur RGB spécifiques.

    Pour une liste complète des fonctions de couleur et des couleurs, consultez Énumération Color et fonctions ColorFade, ColorValue et RGBA dans Power Apps.

  2. Cliquez sur Prévisualiser l’application.

  3. Sélectionnez Commercial Espresso Machines dans Machine Type Gallery. Le prix des machines de plus de 10 000 $ devrait devenir rouge.

    Capture d’écran illustrant une liste de machines à expresso.

    Remarque

    Si une bordure apparaît autour de Machine Gallery en mode Aperçu, vous pouvez modifier la couleur afin qu’elle ne s’affiche pas. Pour ce faire, quittez le mode Aperçu, accédez au volet de galerie galMachine, puis définissez la propriété Border sous Color sur Transparent.

    Capture d’écran de la propriété Border sous Color dans le volet Machine Gallery.

  4. Fermez l’aperçu.

  5. Cliquez sur Enregistrer, puis attendez que l’application soit enregistrée.

Section 9 : ajouter une case à cocher permettant d’ajouter une machine à la liste de comparaison

À présent, vous souhaitez permettre aux utilisateurs de sélectionner plusieurs machines et de les comparer avant de faire une sélection finale sur l’écran suivant.

  1. Sélectionnez galMachine dans le volet Arborescence, puis cliquez sur l’icône Modifier la galerie représentant un crayon en haut de la galerie à gauche.

    Capture d’écran mettant en évidence l’icône Modifier la galerie représentant un crayon.

  2. Assurez-vous que seul le premier élément de la galerie est sélectionné (et non la galerie entière).

    Capture d’écran illustrant un élément de la galerie sélectionné.

  3. Cliquez sur la liste déroulante + Insérer, développez le groupe Saisie, puis sélectionnez Case à cocher.

    Capture d’écran illustrant le bouton Insérer et le contrôle Case à cocher.

  4. Redéfinissez le nom de la case à cocher sur chkCompare et déplacez-la sous le libellé de prix.

    Capture d’écran illustrant le positionnement de la case à cocher.

  5. Remplacez le texte de la case à cocher par Compare en modifiant la valeur de la propriété Text dans la barre de formule.

    Capture d’écran illustrant le texte de la case à cocher modifié.

Section 10 : créer une collection pour les machines sélectionnées

Lorsqu’un utilisateur sélectionne une machine à comparer, vous l’ajoutez à une collection nommée CompareList. Considérez cette collection comme une collection en mémoire de machines sélectionnées à des fins de comparaison.

  1. Sélectionnez le contrôle Checkbox renommé chkCompare dans le volet Arborescence et redéfinissez la propriété OnCheck sur la formule suivante :

    Collect(CompareList,ThisItem)

    Capture d’écran de la propriété OnCheck du contrôle Checkbox.

  2. Définissez la propriété OnUncheck sur la formule suivante :

    Remove(CompareList,ThisItem)

    Cette étape est nécessaire pour s’assurer que les éléments non cochés sont supprimés de la collection.

    Capture d’écran de la propriété OnUncheck du contrôle Checkbox.

  3. Définissez la propriété Default du contrôle Checkbox sur la formule suivante :

    ThisItem in CompareList

    Capture d’écran illustrant la propriété Default du contrôle Checkbox.

    La propriété Default du contrôle Checkbox est une valeur booléenne true ou false qui détermine si la case doit être cochée ou non par défaut. La définir sur cette formule garantit que la case est cochée par défaut si l’élément a déjà été ajouté à la collection, car le résultat sera true, par exemple si cet élément *est* dans CompareList.

  4. Pour tester l’ajout d’éléments à une collection, vous pouvez exécuter l’application en mode Aperçu (F5) ou cliquer sur le bouton Aperçu en haut à droite. Cochez les cases de trois machines.

    Capture d’écran illustrant l’aperçu de l’application avec un encadré autour des cases à cocher Comparer sous les machines.

  5. Fermez l’aperçu.

  6. Dans le volet de navigation sur le côté gauche de l’écran, cliquez sur l’icône Variables. Développez la section Collections.

  7. Survolez CompareList et cliquez sur les points de suspension à droite. Choisissez Afficher la table.

    Capture d’écran illustrant le bouton Collections.

    La collection CompareList et les trois éléments que vous avez sélectionnés s’affichent alors.

    Capture d’écran illustrant la collection CompareList avec les enregistrements.

    Chaque élément de la collection comporte toutes les informations de chaque machine que vous avez reçues de la source de données Machines, et non uniquement les champs que vous affichez dans Machine Gallery.

  8. Cliquez sur le X dans le coin supérieur droit pour quitter et revenir à la vue principale.

  9. Recliquez sur l’icône Aperçu.

  10. Décochez tous les éléments avec une coche, puis fermez l’aperçu.

    Capture d’écran illustrant l’aperçu avec toutes les cases décochées.

  11. Cliquez sur le bouton des points de suspension (…) en regard de CompareList, sous la section Collections, puis sélectionnez de nouveau Afficher la table.

    Notez que tous les éléments sont supprimés de la collection CompareList.

  12. Cliquez sur le X pour fermer la boîte de dialogue.

Section 11 : définir la sélection par défaut sur le premier type de machines et tester l’application

Pour éviter d’avoir une liste vide de machines au démarrage de l’application, définissez le premier élément comme l’élément sélectionné par défaut dans Machine Type Gallery.

  1. Sélectionnez la galerie entière (en cliquant sur galMachineType dans l’Arborescence à gauche), puis définissez la propriété Default de la galerie dans la barre de formule sur :

    First(MachineTypes)

    Capture d’écran illustrant la valeur par défaut de la galerie de types de machines.

    Cette action définit le premier élément de la table comme l’élément sélectionné.

  2. Pour prévisualiser l’application, cliquez sur le bouton Aperçu en haut du menu à droite. Vous pouvez également appuyer sur la touche F5 pour prévisualiser l’application. Vous pouvez aussi tester votre application directement dans le canevas en maintenant enfoncée la touche Alt pour activer les boutons et d’autres contrôles.

  3. Votre application devrait ressembler à l’image suivante :

    Capture d’écran présentant l’application en mode Aperçu.

  4. Pour quitter le mode Aperçu, cliquez sur le X dans le coin supérieur droit.

  5. Cliquez sur Enregistrer, puis attendez que l’application soit enregistrée.

  6. Ne quittez pas cette page.