Créer une galerie de détails dans une application canevas

Article
04/25/2023

Suivez les instructions pas à pas pour créer une galerie de détails dans une application canevas pour gérer les données fictives dans la base de données Northwind Traders. Cette rubrique fait partie d’une série qui explique comment créer une application métier sur des données relationnelles dans Microsoft Dataverse. Pour de meilleurs résultats, explorez ces rubriques dans cette séquence :

Créez une galerie de commandes.
Créez un formulaire de synthèse.
Créer une galerie de détails (cette rubrique).

Définition des zones d’écran.

Conditions préalables

Avant de démarrer cette rubrique, vous devez installer la base de données comme décrit précédemment dans cette rubrique. Vous devez alors soit créer la galerie de commandes et le formulaire de résumé, soit ouvrir l’application Commandes Northwind (canevas) - Début Partie 3, qui contient déjà cette galerie et ce formulaire.

Créer une autre barre de titre

En haut de l’écran, sélectionnez le contrôle Étiquette qui agit comme une barre de titre, copiez-le en appuyant sur Ctrl-C, puis collez-le en appuyant sur Ctrl-V :
Redimensionnez et déplacez la copie pour qu’elle apparaisse juste sous le formulaire de résumé.
Supprimez le texte de la copie de l’une des manières suivantes :
- Double-cliquez sur le texte pour le sélectionner, puis appuyez sur Supprimer.
- Définissez la propriété Text sur une chaîne vide ("").

Ajouter une galerie

Insérez un contrôle Galerie avec une disposition verticale vierge :

La nouvelle galerie, qui affichera les détails de la commande, apparaît dans l’angle supérieur gauche.
Fermez la boîte de dialogue volante de la source de données, puis redimensionnez et déplacez la galerie de détails dans l’angle inférieur droit, sous la nouvelle barre de titre :
Définissez la propriété Items de la galerie de détails sur la formule suivante :
```
Gallery1.Selected.'Order Details'
```
Si une erreur apparaît, confirmez que la galerie de commandes est nommée Gallery1 (dans le volet Arborescence près du bord gauche). Si cette galerie a un autre nom, renommez-la Gallery1.

Vous venez de lier les deux galeries. Lorsque l’utilisateur sélectionne une commande dans la galerie de commandes, cette sélection identifie un enregistrement dans la table Commandes. Si cette commande contient un ou plusieurs postes, l’enregistrement dans la table Commandes est liée à un ou plusieurs enregistrements dans la Détails de la commande et les données de ces enregistrements s’affichent dans la galerie de détails. Ce comportement reflète la relation un-à-plusieurs qui a été créée pour vous entre les tables Commandes et Détails de la commande. La formule que vous avez spécifiée « accompagne » cette relation en utilisant la notation par points :

Afficher les noms des produits

Dans la galerie des détails, sélectionnez Ajouter un article à partir de l’onglet Insertion pour sélectionner le modèle de la galerie :

Veillez à avoir sélectionné le modèle de galerie au lieu de la galerie elle-même. Le cadre englobant doit être légèrement à l’intérieur des limites de la galerie et probablement plus court que la hauteur de la galerie. Lorsque vous insérez des contrôles dans ce modèle, ils sont répétés pour chaque élément de la galerie.
Sous l’onglet Insertion, insérez une Étiquette dans la galerie de détails.

L’Étiquette doit apparaître dans la galerie ; si ce n’est pas le cas, réessayez, mais veillez à bien sélectionner le modèle de la galerie avant d’insérer l’étiquette.
Définissez la propriété Text de la nouvelle Étiquette sur cette formule :
```
ThisItem.Product.'Product Name'
```
Si aucun texte n’apparaît, sélectionnez la flèche pour Commande 0901 à proximité du bas de la galerie de commandes.
Redimensionnez l’étiquette pour que le texte complet apparaisse :

Cette expression part d’un enregistrement dans la table Détails de la commande. Le record est détenu dans ThisItem vers la table Commander des produits via une relation plusieurs-à-un :

La colonne Nom du produit (et les autres colonnes que vous êtes sur le point d’utiliser) sont extraites :

Afficher les images de produits

Sous l’onglet Insertion, insérez un contrôle Image dans la galerie de détails :
Redimensionnez et déplacez l’image et l’étiquette pour qu’elles soient côte à côte.

Conseil

Pour un contrôle précis de la taille et de la position d’un contrôle, commencez à le redimensionner ou à le déplacer sans appuyer sur la touche Alt, puis continuez à redimensionner ou à déplacer le contrôle tout en maintenant la touche Alt enfoncée :
Définissez la propriété Image sur la formule suivante :
```
ThisItem.Product.Picture
```
Encore une fois, l’expression fait référence à un produit associé à ce détail de commande et à l’extraction du champ Image à afficher.
Réduisez la hauteur du modèle de la galerie afin que plusieurs enregistrements Détails de la commande s’affichent à la fois :

Afficher la quantité et le coût du produit

Sur l’onglet Insertion, insérez une autre Étiquette dans la galerie de détails, puis redimensionnez et déplacez la nouvelle Étiquette à droite des informations sur le produit.
Définissez la propriété Text de la nouvelle Étiquette sur cette expression :
```
ThisItem.Quantity
```
Cette formule extrait les informations directement de la table détails de la commande (aucune relation requise).
Sous l’onglet Accueil, changez l’alignement de ce contrôle sur Droite :
Sur l’onglet Insertion, insérez une autre Étiquette dans la galerie de détails, puis redimensionnez et déplacez la nouvelle Étiquette à droite de l’étiquette de quantité.
Définissez la propriété Text de la nouvelle Étiquette sur cette formule :
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Si vous n’incluez pas la balise de langue ([$ -en-US]), elle est ajoutée pour vous en fonction de votre langue et de votre région. Si vous utilisez une balise de langue différente, vous souhaitez supprimer le $ juste après le crochet carré (]), puis vous ajoutez votre propre symbole monétaire à cette position.
Sous l’onglet Accueil, changez l’alignement de ce contrôle sur Droite :
Sur l’onglet Insertion, insérez un autre contrôle d’étiquette dans la galerie de détails, puis redimensionnez et déplacez la nouvelle Étiquette à droite du prix unitaire.
Définissez la propriété Text de la nouvelle Étiquette sur cette formule :
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
À nouveau, si vous n’incluez pas la balise de langue ([$ -en-US]), elle est ajoutée pour vous en fonction de votre langue et de votre région. Si la balise est différente, vous voudrez utiliser votre propre symbole monétaire au lieu de $ juste après le crochet carré (]).
Sous l’onglet Accueil, changez l’alignement de ce contrôle sur Droite :

Vous avez terminé d’ajouter des contrôles à la galerie de détails pour l’instant.
Dans le volet Arborescence, sélectionnez Screen1 pour vous assurer que la galerie de détails n’est plus sélectionnée.

Ajouter du texte à la nouvelle barre de titre

Sous l’onglet Insertion, insérez une autre Étiquette sur l’écran :
Redimensionnez et déplacez la nouvelle Étiquette au-dessus des images des produits dans la deuxième barre de titre, puis changez la couleur du texte en blanc sur l’onglet Accueil.
Double-cliquez sur le texte de l’étiquette, puis tapez Produit :
Copiez et collez l’étiquette du produit, puis redimensionnez et déplacez la copie au-dessus de la colonne de quantité.
Double-cliquez sur le texte de la nouvelle Étiquette, puis tapez Quantité :
Copiez et collez l’étiquette de quantité, puis redimensionnez et déplacez la copie au-dessus de la colonne de prix unitaire.
Double-cliquez sur le texte de la nouvelle Étiquette, puis tapez Prix unitaire :
Copiez et collez l’étiquette de prix unitaire, puis redimensionnez et déplacez la copie au-dessus de la colonne de prix global.
Double-cliquez sur le texte de la nouvelle Étiquette, puis tapez Global :

Totaux de l’ordre d’affichage

Réduisez la hauteur de la galerie de détails pour faire de la place aux totaux de commande en bas de l’écran :
Copiez et collez la barre de titre au milieu de l’écran, puis déplacez la copie vers le bas de l’écran :
Copiez et collez l’étiquette du produit à partir de la barre de titre du milieu, puis déplacez la copie vers la barre de titre du bas, juste à gauche de la colonne Quantité.
Double-cliquez sur le texte de la nouvelle Étiquette, puis tapez le texte suivant :
Totaux de commande :
Copiez et collez l’étiquette de totaux de commande, puis redimensionnez et déplacez la copie à droite de l’étiquette de totaux de commande.
Définissez la propriété Text de la nouvelle Étiquette sur cette formule :
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Cette formule affiche un avertissement de délégation, mais vous pouvez l’ignorer, car aucune commande ne contiendra plus de 500 produits.
Sous l’onglet Accueil, définissez l’alignement du texte de la nouvelle Étiquette sur Droite :
Copiez et collez ce contrôle Étiquette, puis redimensionnez et déplacez la copie en dessous de la colonne Globale.
Définissez la propriété Text de la copie sur cette formule :
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Cette formule affiche un avertissement de délégation, mais vous pouvez l’ignorer, car aucune commande ne contiendra plus de 500 produits.

Ajouter de l’espace pour de nouveaux détails

Dans n’importe quelle galerie, vous pouvez afficher des données, mais vous ne pouvez pas les mettre à jour ou ajouter des enregistrements. Sous la galerie de détails, vous allez ajouter une zone où l’utilisateur peut configurer un enregistrement dans la table Détails de la commande et insérez cet enregistrement dans une commande.

Réduisez suffisamment la hauteur de la galerie de détails pour faire de la place pour un espace d’édition d’un seul élément sous cette galerie.

Dans cet espace, vous allez ajouter des contrôles afin que l’utilisateur puisse ajouter un détail de commande :
Sous l’onglet Insertion, insérez une Étiquette, puis redimensionnez-la et déplacez-la sous la galerie de détails.
Double-cliquez sur le texte de la nouvelle Étiquette, puis appuyez sur Supprimer.
Sous l’onglet Accueil, définissez la couleur Remplissage de la nouvelle Étiquette sur Bleu clair :

Sélectionner un produit

Dans l’onglet Insertion, sélectionnez Contrôles > Zone de liste modifiable :

Le contrôle Zone de liste modifiable apparaît dans l’angle supérieur gauche.
Dans la boîte de dialogue volante, sélectionnez la source de données Produits de la commande.
Dans l’onglet Propriétés pour la zone de liste déroulante, sélectionnez Modifier (en regard de Champs) pour ouvrir le volet Données. Assurez-vous que Primary text et SearchField sont définis sur nwind_productname.

Vous spécifiez le nom logique, car le volet Données ne prend pas encore en charge les noms d’affichage dans ce cas :
Fermez le volet Données.
Dans l’onglet Propriétés près du bord droit, faites défiler vers le bas, désactivez Autoriser la sélection multiple et assurez-vous que Autoriser la recherche est activé :
Redimensionnez et déplacez la zone de liste déroulante dans la zone bleu clair, juste sous la colonne du nom du produit dans la galerie de détails :

Dans cette zone de liste déroulante, l’utilisateur spécifiera un enregistrement dans la table Produit pour l’enregistrement Détails de la commande que l’application va créer.
Tout en maintenant la touche Alt enfoncée, sélectionnez la flèche vers le bas de la zone de liste déroulante.

Conseil

En maintenant la touche Alt enfoncée, vous pouvez interagir avec les commandes Power Apps Studio sans ouvrir le mode Aperçu.
Dans la liste des produits, sélectionnez un produit :

Ajouter une image du produit

Sous l’onglet Insertion, sélectionnez Média > Image :

Le contrôle Image apparaît dans l’angle supérieur gauche :
Redimensionnez et déplacez l’image vers la zone bleu clair sous les autres images de produit et à côté de la zone de liste déroulante.
Définissez la propriété Image sur l’image pour :
```
ComboBox1.Selected.Picture
```
Vous utilisez la même astuce que celle utilisée pour afficher la photo de l’employé dans le formulaire de résumé. La propriété Selected de la zone de liste déroulante renvoie l’enregistrement complet du produit sélectionné par l’utilisateur, y compris le champ Image.

Ajouter une boîte de quantité

Dans l’onglet Insertion, sélectionnez Text > Saisie de texte :

Le contrôle Saisie de texte apparaît dans l’angle supérieur gauche :
Redimensionnez et déplacez la zone de saisie de texte à droite de la zone de liste déroulante, juste sous la colonne de quantité dans la galerie de détails :

En utilisant cette zone de saisie de texte, l’utilisateur spécifie le champ Quantité de l’enregistrement Détails de la commande.
Spécifiez la propriété Default de ce contrôle sur "":
Sous l’onglet Accueil, définissez l’alignement de texte de ce contrôle sur Droite :

Afficher l’unité et les prix globaux

Sous l’onglet Insertion, insérez un contrôle Étiquette.

L’Étiquette apparaît dans l’angle supérieur gauche de l’écran :
Redimensionnez et déplacez l’étiquette à droite du contrôle Text-input, puis définissez la propriété Text sur cette formule :
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Ce contrôle affiche la Liste des prix de la table Commander des produits. Cette valeur détermine le champ Prix unitaire dans l’enregistrement Détails de la commande.

Notes

Pour ce scénario, la valeur est en lecture seule, mais d’autres scénarios peuvent demander à l’utilisateur de l’application de la modifier. Dans ce cas, utilisez un contrôle Saisie de texte et définissez sa propriété Default sur Liste des prix.
Sous l’onglet Accueil, définissez l’alignement de texte de cette Étiquette de liste de prix sur Droite :
Copiez et collez l’étiquette de liste de prix, puis redimensionnez et déplacez la copie à droite de l’étiquette de liste de prix.
Définissez la propriété Text de la nouvelle Étiquette sur cette formule :
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Ce contrôle affiche le prix global en fonction de la quantité que l’utilisateur de l’application a spécifié et du prix catalogue du produit que l’utilisateur de l’application a sélectionné. C’est purement informatif pour l’utilisateur de l’application.
Double-cliquez sur le contrôle Text-input pour la quantité, puis tapez un nombre.

L’Étiquette de prix global recalcule la nouvelle valeur :

Ajouter une icône Ajouter

Sous l’onglet Insertion, sélectionnez Icônes > Ajouter :

L’icône apparaît dans l’angle supérieur gauche de l’écran.
Redimensionnez et déplacez cette icône vers le bord droit de la zone en bleu clair, puis définissez la propriété OnSelect de l’icône de cette formule :
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
En général, la fonction Patch met à jour et crée des enregistrements, et les arguments spécifiques de cette formule déterminent les modifications exactes que la fonction apportera.
- Le premier argument spécifie le source de données (dans ce cas, la table Détails de la commande) dans laquelle la fonction mettra à jour ou créera un enregistrement.
- Le deuxième argument spécifie que la fonction créera un enregistrement avec les valeurs par défaut pour la table Détails de la commande sauf indication contraire dans le troisième argument.
- La troisième instruction spécifie que quatre colonnes du nouvel enregistrement contiendront des valeurs de l’utilisateur.
  - La colonne Commande contient le numéro de la commande que l’utilisateur a sélectionné dans la galerie de commandes.
  - La colonne Produit contient le nom du produit que l’utilisateur a sélectionné dans la zone de liste déroulante qui affiche les produits.
  - La colonne Quantité contient la valeur spécifiée par l’utilisateur dans la zone de saisie de texte.
  - La colonne Prix unitaire contient le prix catalogue du produit que l’utilisateur a sélectionné pour ce détail de commande.
Notes

Vous pouvez créer des formules qui utilisent les données de n’importe quelle colonne (dans la table Commander des produits) pour tout produit sélectionné par l’utilisateur de l’application dans la zone de liste déroulante qui affiche les produits. Lorsque l’utilisateur sélectionne un enregistrement dans la table Commander des produits, non seulement le nom du produit apparaît dans cette zone de liste déroulante, mais également le prix unitaire du produit apparaît dans une Étiquette. Chaque valeur de recherche dans une application canevas fait référence à un enregistrement entier, et pas seulement à une clé primaire.

La onction Actualiser garantit que la table Commandes reflète l’enregistrement que vous venez d’ajouter à la table Détails de la commande. La fonction Refresh efface les données de produit, de quantité et de prix unitaire afin que l’utilisateur puisse plus facilement créer un autre détail de commande pour la même commande.
Appuyez sur F5, puis sélectionnez l’icône Ajouter.

La commande reflète les informations que vous avez spécifiées :
(facultatif) Ajoutez un autre article à la commande.
Appuyez sur Échap pour quitter le mode Aperçu.

Supprimer un détail de commande

Au centre de l’écran, sélectionnez le modèle de la galerie de détails :
Sous l’onglet Insertion, sélectionnez Icônes > Corbeille :

L’icône Corbeille apparaît dans l’angle supérieur gauche du modèle de la galerie.
Redimensionnez et déplacez l’icône Corbeille vers le bord droit du modèle de la galerie des détails, puis définissez la propriété OnSelect sur cette formule :
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Au moment d’écrire ces lignes, vous ne pouvez pas supprimer un enregistrement directement d’une relation, la fonction Supprimer supprime un enregistrement directement de la table associée. ThisItem spécifie l’enregistrement à supprimer, extrait du même enregistrement dans la galerie de détails où l’icône Corbeille apparaît.

Encore une fois, l’opération utilise des données mises en cache, donc la fonction Actualiser informe la table Commandes que l’application a modifié l’une de ses tables associées.
Appuyez sur F5 pour ouvrir le mode Aperçu, puis sélectionnez l’icône Corbeille à côté de chaque enregistrement Détails de la commande que vous souhaitez supprimer de la commande.
Essayez d’ajouter et de supprimer divers détails de commande de vos commandes :

En conclusion

En résumé, vous avez ajouté une autre galerie pour afficher les détails de la commande et les contrôles en ajoutant et supprimant un détail de commande dans l’application. Vous avez utilisé ces éléments :

Un deuxième contrôle Galerie, lié à la galerie de commandes via une relation un-à-plusieurs : Gallery2.Items = Gallery1.Selected.'Order Details'
Une relation plusieurs-à-un entre la table Détails de la commande et la table Produit de la commande : ThisItem.Product.'Product Name' et ThisItem.Product.Picture
La fonction Choices pour obtenir une liste des produits : Choices( 'Order Details'.Product' )
La propriété Selected d’une zone de liste déroulante en tant qu’enregistrement connexe plusieurs à un complet : ComboBox1.Selected.Picture et ComboBox1.Selected.'List Price'
La fonction Patch pour créer un enregistrement Détails de la commande : Patch( 'Order Details', Defaults( 'Order Details' ), ... )
La fonction Remove pour supprimer un enregistrement Détails de la commande : Remove( 'Order Details', ThisItem )

Cette série de sujets a été une présentation rapide de l’utilisation Relations Dataverse et choix dans une application canevas à des fins éducatives. Avant de lancer une application en production, vous devez prendre en compte la validation sur le terrain, la gestion des erreurs et de nombreux autres facteurs.

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).

Partage via