Vorherige

Nächste

Übung – Mit relationalen Daten arbeiten

Abgeschlossen

In dieser Übung erfahren Sie, wie Sie auf Bezugsdaten zugreifen und Bezugsdatensätze in mehreren Tabellen erstellen. Für dieses Beispiel verwenden wir Sammlungen, die Ihre Daten nur vorübergehend speichern. Wenn Sie eine Lösung wünschen, die in Dataverse oder SharePoint spart, verwenden Sie die Funktion Patch.

Wir erstellen einen Shopping Cart. Wir verwenden eine übergeordnete Tabelle (den Belegkopf), eine untergeordnete Tabelle (die Belegpositionen) und eine Produkttabelle (Referenztabelle). Die Beziehungen sehen folgendermaßen aus:

Das obige Diagramm zeigt drei Tabellen mit Primärschlüsseln, die ReceiptLineItems-Tabelle (rechts) jedoch verfügt über zwei Fremdschlüssel, die sich auf die ReceiptHeader-ID bzw. die Produkt-ID beziehen. Die Diagrammsymbole der Zeilen, die von den Tabellen „ReceiptHeader“ und „Products“ zur Tabelle „ReceiptLineItems“ führen, stellen eine 1:n-Beziehung dar. So könnte für viele verschiedene Elemente in den ReceiptLineItems jeweils ein ID-Feld eingetragen werden.

Übung starten

1. Wechseln Sie zu make.powerapps.com.

2. Wählen Sie + Erstellen aus.

3. Wählen Sie Leere App und dann die Leere Canvas-App aus.

4. Nennen Sie die App Shopping Cart, stellen Sie sicher, dass das Format Tablet ist, und klicken Sie dann auf Erstellen.

   

5. Wählen Sie nun aus dem Menü oben Einfügen und dann Schaltfläche aus.

6. Geben Sie folgenden Code für die Eigenschaft OnSelect der Schaltfläche ein (Kopieren und Einfügen ist möglich):

   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. Halten Sie die ALT-Taste gedrückt, und wählen Sie die Schaltfläche aus. Sie haben jetzt eine Sammlung im Speicher mit dem Titel Products, das sind die Daten für unsere erste Sammlung. Sie können diese Schaltfläche aus dem Weg schieben.

8. Fügen Sie dem Bildschirm einen vertikalen Katalog hinzu, und wählen Sie die Sammlung Products als Datenquelle aus. Dadurch wird CustomGallerySample mit Produkte in der Eigenschaft Items ersetzt.

   

9. Ändern Sie das Layout in Titel und Untertitel.

   

10. Verschieben Sie Ihren neuen Katalog ganz nach links auf dem Bildschirm, und setzen Sie die Eigenschaft OnSelect des Katalogs auf gleich zu:

    Collect(colCart, ThisItem)
    

11. Fügen Sie nun einen zweiten vertikalen Katalog (Galerie2) hinzu, wobei die Datenquelle auf colCart und das Layout auf Titel und Untertitel eingestellt ist. Löschen Sie das nach rechts zeigende Chevron-Symbol aus dem Katalog.

12. Positionieren Sie diesen Katalog auf der rechten Seite des Bildschirms, sodass er wie der Bildschirm unten aussieht, mit Gallery1 links und Gallery2 rechts:

    

13. Drücken Sie Ihre Alt-Taste, und wählen Sie das nach rechts zeigende Symbol in der obersten Reihe von Gallery1 aus. Gallery2 sollte jetzt ein Element enthalten. Sie können weiterhin Ihre Taste Alt drücken, um Elemente aus Gallery1 auszuwählen, um Gallery2 auszufüllen.

14. Fügen Sie dem Bildschirm jetzt eine zweite Schaltfläche hinzu. Verändern Sie die Eigenschaft Text der Schaltfläche in „Auschecken“, und legen Sie die OnSelect Eigenschaft der Schaltfläche auf die folgende Formel fest (Sie können kopieren und einfügen):

    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. Dieser Code erstellt eine Sammlung ReceiptHeader für ein einzelnes Element, das Informationen zum aktuellen Benutzer und das aktuelle Datum enthält und eine ID für den Benutzer festlegt. Dann wird für jeden Artikel in colCart eine Position zu ReceiptLineItems hinzugefügt. Diese Position enthält ein automatisch nummeriertes ID-Feld, die ID des neu erstellten Datensatzes ReceiptHeader (das das Element an das Verkaufsereignis bindet) und die ID des Produkts in colCart. Dann löscht es colCart, da es eingereicht wird. Sie sollten also Ihren Shopping Cart vor der Auswahl füllen!

16. Drücken Sie Ihre Alt-Taste, und wählen Sie die Schaltfläche „Auschecken“ aus, um diese Sammlung zu laden.

17. Erstellen Sie einen neuen Bildschirm (Screen2), damit wir eine frische Canvas haben, um zu sehen, wie die neu erstellten Daten aussehen.

18. Gehen Sie zu Ihrem neuen Bildschirm und fügen Sie zwei vertikale Kataloge hinzu, genauso formatiert wie die beiden auf unserer letzten Seite. Legen Sie die Datenquelle oder die Eigenschaft Items für den linken Katalog (Gallery3) auf ReceiptHeader fest, und wählen Sie ReceiptLineItems als Quelle für den zweiten Katalog (Gallery4) aus.

19. Ändern Sie im linken Katalog (Gallery3) die Eigenschaft Text des Untertitels in ThisItem.Date.

20. Wechseln Sie zum rechten Katalog (Gallery4), und ändern Sie die Eigenschaft Items in Folgendes:

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

21. Ändern Sie (noch immer in Gallery4) die Eigenschaft Text des Titels in Folgendes:

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

22. Als Nächstes (noch immer in Gallery4) ändern Sie die Eigenschaft Text des Untertitels in Folgendes:

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

23. Sie haben jetzt eine funktionierende Bestellverlaufsseite mit den Bestellkopfinformationen links in Gallery3 und den gekauften Artikeln rechts in Gallery4. Sie können auf der linken Seite Ein Element Belegkopf auswählen, um rechts die Positionen dieses Belegs anzuzeigen.

    

Sie können zum ersten Bildschirm zurückkehren und neue Artikel aus Gallery1 auswählen, um den Einkaufskorb (dargestellt durch Gallery2) zu füllen. Dann können Sie die Schaltfläche Auschecken drücken, zu Screen2 wechseln und sich eine andere Bestellung unter Ihrem Namen ansehen. Wenn Sie auf eine Bestellung klicken, werden Ihnen die Artikel angezeigt, die für diese bestimmte Bestellung gekauft wurden.

Sie können weiterhin an Ihrer Lösung arbeiten und diese abschließen. Sie können weitere beschreibende Beschriftungen und Navigationselemente hinzufügen und festlegen, was der Benutzer mit einer solchen App tun würde.

Hoffentlich erkennen Sie die Möglichkeiten der Verwendung relationaler Daten. Obwohl dies noch weit von einer vollständigen Lösung entfernt ist, können Sie nach und nach die Möglichkeiten erkennen, Techniken wie diese in Ihren Apps zu verwenden.

Weiter