Exercice : utiliser des données relationnelles

  • 10 minutes

Dans cet exercice, vous allez découvrir comment accéder aux données associées et créer des enregistrements associés dans plusieurs tables. Pour cet exemple, nous allons utiliser des collections, qui ne stockent que temporairement vos données. Si vous souhaitez une solution qui enregistre dans Dataverse ou SharePoint, utilisez la fonction Patch.

Nous allons créer un panier d’achat. Nous allons utiliser une table parente (en-tête de reçu), une table enfant (éléments de ligne de reçu) et une table de produits (table de référence). Les relations ressemblent à ce qui suit :

Schéma des relations entre les trois tables.

Le schéma ci-dessus illustre trois tables avec des clés primaires, mais la table ReceiptLineItems (à droite) a deux clés étrangères faisant référence à l’ID ReceiptHeader et à l’ID Products, respectivement. Sur le schéma, les symboles des lignes allant des tables ReceiptHeader et Products à la table ReceiptLineItems signifient une relation un-à-plusieurs. Ainsi, un champ d’identification (de chacune) peut être saisi pour de nombreux éléments différents dans ReceiptLineItems.

Commencer l’exercice

  1. Accédez à make.powerapps.com.

  2. Cliquez sur + Créer.

  3. Sélectionnez Application vide, puis Application canevas vide.

  4. Nommez l’application Shopping Cart, vérifiez que le format est Tablette, puis cliquez sur Créer.

    Capture d’écran du menu contextuel de création d’une application canevas.

  5. À présent, cliquez sur Insérer dans le menu supérieur, puis sélectionnez Bouton.

  6. Dans la propriété OnSelect de ce bouton, saisissez le code suivant (vous pouvez le copier-coller) :

    ClearCollect(Products,
 {ID:1, Name:"T-Shirt", Category: "Clothing"},
 {ID:2, Name:"Sweatshirt", Category: "Clothing"},
 {ID:3, Name:"Socks", Category: "Clothing"},
 {ID:4, Name:"Necklace", Category: "Jewelry"},
 {ID:5, Name:"Ring", Category: "Jewelry"},
 {ID:6, Name:"Coffee Mug", Category: "Misc."},
 {ID:7, Name:"Keychain", Category: "Misc."}
)

  7. Maintenez la touche Alt enfoncée et cliquez sur le bouton. Vous avez maintenant une collection en mémoire intitulée Products, à savoir les données de notre première galerie. Vous pouvez déplacer ce bouton à l’écart.

  8. Ajoutez une Galerie verticale à l’écran et sélectionnez la collection Produits comme source de données. Cette opération entraîne le remplacement de CustomGallerySample par Produits dans la propriété Items.

    Capture d’écran de l’insertion de la galerie et de la sélection de Produits.

  9. Définissez la propriété Layout sur Titre et sous-titre.

    Capture d’écran de la configuration de la propriété Layout de la galerie.

  10. Déplacez votre nouvelle galerie à l’extrême gauche de l’écran et définissez la propriété OnSelect sur la formule suivante :

    Collect(colCart, ThisItem)

  11. Ajoutez maintenant une deuxième Galerie verticale (Gallery2), avec la propriété Data source définie sur colCart et la propriété Layout sur Titre et sous-titre. Supprimez l’icône en forme de chevron pointant vers la droite dans la galerie.

  12. Positionnez cette galerie sur le côté droit de l’écran afin qu’elle ressemble à l’écran ci-dessous, avec Gallery1 à gauche et Gallery2 à droite :

    Capture d’écran des deux galeries avec le bouton.

  13. Appuyez sur votre touche Alt et cliquez sur l’icône pointant vers la droite dans la ligne supérieure de Gallery1. Gallery2 devrait maintenant contenir un élément. Vous pouvez continuer à appuyer sur votre touche Alt pour sélectionner des éléments de Gallery1 pour renseigner Gallery2.

  14. Ajoutez maintenant un second Bouton à l’écran. Définissez la propriété Text du bouton « Paiement » et la propriété OnSelect du bouton sur la formule suivante (sachant que vous pouvez la copier-coller) :

    Collect(
  ReceiptHeader,
   {
        ID: If(
            IsEmpty(ReceiptHeader),
            1,
            Last(ReceiptHeader).ID + 1
        ),
        Name: User().FullName,
        Date: Today()
    }
);
ForAll(
    colCart,
    Collect(
        ReceiptLineItems,
        {
            ID: If(
                IsEmpty(ReceiptLineItems),
                1,
                Last(ReceiptLineItems).ID + 1
            ),
            ProductID: ThisRecord.ID,
            ReceiptHeaderID: Last(ReceiptHeader).ID
        }
    )
);
Clear(colCart)

  15. Ce code entraîne la création d’une collection ReceiptHeader à élément unique qui comprend des informations sur l’utilisateur actuel, la date actuelle et définit un ID pour l’utilisateur. Ensuite, pour chaque élément de colCart, un élément de ligne est ajouté à ReceiptLineItems. Cet élément de ligne comprend un champ ID numéroté automatiquement, l’ID de l’enregistrement ReceiptHeader venant d’être créé (qui associe l’élément à l’événement d’achat) et l’ID du produit dans colCart. colCart est ensuite effacé puisqu’il est envoyé. Veillez donc à remplir votre panier avant d’effectuer la sélection.

  16. Appuyez sur votre touche Alt et cliquez sur le bouton « Paiement » pour charger cette collection.

  17. Créez un Écran (Screen2), afin que nous puissions avoir un nouveau canevas pour voir à quoi ressemblent les données nouvellement créées.

  18. Accédez à votre nouvel écran et ajoutez deux Galeries verticales, mises en forme de la même manière que les deux galeries sur notre dernière page. Définissez la source de données ou la propriété Items pour la Galerie de gauche (Gallery3) sur ReceiptHeader et sélectionnez ReceiptLineItems comme source pour la seconde Galerie (Gallery4).

  19. Dans la Galerie de gauche (Gallery3), définissez la propriété Text du Sous-titre sur ThisItem.Date.

  20. Accédez à la Galerie de droite (Gallery4) et définissez la propriété Items sur la formule suivante :

    Filter(ReceiptLineItems, ReceiptHeaderID=Gallery3.Selected.ID)

  21. À présent (toujours dans Gallery4), définissez la propriété Text du Titre sur la formule suivante :

    LookUp(Products, ID=ThisItem.ProductID).Name

  22. Ensuite (toujours dans Gallery4), définissez la propriété Text du Sous-titre sur la formule suivante :

    LookUp(ReceiptHeader, ID=ThisItem.ReceiptHeaderID).Name

  23. Vous disposez maintenant d’une page d’historique des commandes fonctionnelle, avec les informations d’en-tête de commande à gauche dans Gallery3 et les articles achetés à droite dans Gallery4. Vous pouvez sélectionner un élément En-tête de reçu sur le côté gauche pour voir les éléments de ligne de ce reçu sur la droite.

    Capture d’écran des deux galeries d’historique des commandes.

Vous pouvez revenir au premier écran et sélectionner de nouveaux éléments de Gallery1 pour remplir le panier (représenté par Gallery2). Ensuite, vous pouvez appuyer sur le bouton Paiement, accéder à Screen2 et voir une autre commande sous votre nom. La sélection de l’une ou l’autre commande entraîne l’affichage des articles achetés pour la commande concernée.

Vous pouvez continuer à travailler et terminer votre solution. Vous pouvez ajouter des libellés plus descriptifs, des éléments de navigation et définir ce que l’utilisateur ferait avec une telle application.

J’espère que vous voyez les possibilités d’utilisation des données relationnelles. Bien que cette solution soit loin d’être complète, vous pouvez commencer à voir les possibilités d’utilisation de telles techniques dans vos applications.