Erstellen eines Detailkatalogs in einer Canvas-App

Artikel
03/16/2023

Befolgen Sie die schrittweisen Anweisungen, um in einer Canvas-App einen Detailkatalog für die Verwaltung fiktiver Daten in der Northwind Traders-Datenbank zu erstellen. Dieses Thema ist Teil einer Reihe, in der erläutert wird, wie eine Geschäftsanwendung auf relationalen Daten in Microsoft Dataverse erstellt wird. Um die besten Ergebnisse zu erzielen, untersuchen Sie diese Themen in dieser Reihenfolge:

Erstellen eines Auftragskatalogs.
Erstellen eines Zusammenfassungsformulars.
Erstellen eines Detailkatalogs (dieses Thema).

Definition von Bildschirmbereichen

Anforderungen

Bevor Sie dieses Thema starten, müssen Sie die Datenbank wie zuvor in diesem Thema beschrieben installieren. Sie müssen dann entweder den Auftragskatalog und das Zusammenfassungsformular erstellen oder die Northwind Orders (Canvas) – Start Teil 3-App öffnen, die bereits diesen Katalog und dieses Formular enthält.

Erstellen einer weiteren Titelleiste

Wählen Sie oben auf dem Bildschirm das Beschriftung-Steuerelement aus, das als Titelleiste fungiert, kopieren Sie es durch Drücken von STRG+C und fügen Sie es dann durch Drücken von STRG+V ein:
Ändern Sie die Größe und verschieben Sie die Kopie so, dass sie direkt unter dem Zusammenfassungsformular angezeigt wird.
Entfernen Sie den Text auf eine der folgenden Arten aus der Kopie:
- Doppelklicken Sie auf den Text, um ihn auszuwählen, und drücken Sie dann auf Löschen.
- Legen Sie die Text-Eigenschaft der Beschriftung auf eine leere Zeichenfolge ("") fest.

Einen Katalog hinzufügen

Fügen Sie ein Katalog-Steuerelement mit einem Leer vertikal-Layout ein:

Der neue Katalog mit Auftragsdetails wird in der oberen linken Ecke angezeigt.
Schließen Sie das Flyout-Datenquellendialogfeld, ändern Sie die Größe und verschieben Sie den Detailkatalog in die untere rechte Ecke unterhalb der neuen Titelleiste:
Legen Sie die Items-Eigenschaft des Detailkatalogs auf diese Formel fest:
```
Gallery1.Selected.'Order Details'
```
Wenn ein Fehler auftritt, bestätigen Sie, dass der Auftragskatalog Gallery1 heißt (im Bereich der Strukturansicht in der Nähe des linken Randes). Wenn dieser Katalog einen anderen Namen hat, benennen Sie ihn in Gallery1 um.

Sie haben gerade die beiden Kataloge miteinander verbunden. Wenn der Benutzer eine Bestellung im Bestellkatalog auswählt, identifiziert diese Auswahl einen Datensatz in der Aufträge Tabelle. Wenn dieser Auftrag eine oder mehrere Werbebuchungen enthält, wird der Datensatz in der Tabelle Aufträge mit einem oder mehreren Datensätzen in der Bestelldetails Tabelle und Daten aus diesen Datensätzen in der Detailgalerie angezeigt. Dieses Verhalten spiegelt die Eins-zu-Viele-Beziehung wider, die für Sie zwischen den Aufträgen und Bestelldetails Tabellen erstellt wurde. Die von Ihnen angegebene Formel verarbeitet diese Beziehung mithilfe der Punktnotation:

Anzeigen der Produktnamen

Wählen Sie im Detailkatalog die Option Element aus der Einfügen-Registerkarte hinzufügen aus, um die Vorlage des Katalogs auszuwählen:

Stellen Sie sicher, dass Sie die Katalogvorlage anstelle des Katalogs selbst ausgewählt haben. Der Begrenzungsrahmen sollte sich leicht innerhalb der Katalogbegrenzung befinden und wahrscheinlich kürzer als die Höhe des Katalogs sein. Wenn Sie Steuerelemente in diese Vorlage einfügen, werden sie für jedes Element im Katalog wiederholt.
Fügen Sie auf der Einfügen-Registerkarte eine Beschriftung in den Detailkatalog ein.

Die Beschriftung sollte im Katalog erscheinen. Wenn dies nicht der Fall ist, versuchen Sie es erneut. Wählen Sie jedoch die Vorlage des Katalogs aus, bevor Sie die Beschriftung einfügen.
Legen Sie die Text-Eigenschaft der neuen Beschriftung auf diese Formel fest:
```
ThisItem.Product.'Product Name'
```
Wenn kein Text angezeigt wird, wählen Sie den Pfeil für Auftrag 0901 am unteren Rand des Auftragskatalogs.
Ändern Sie die Größe der Beschriftung so, dass der vollständige Text angezeigt wird:

Dieser Ausdruck geht von einem Datensatz in der Auftragsdetailtabelle aus. Der Datensatz wird gehalten in ThisItem über zu der Tabelle Produkte bestellen durch eine Viele-zu-Eins-Beziehung:

Die Spalte Produktname (und andere Spalten, die Sie verwenden möchten) werden extrahiert:

Anzeigen der Produktbilder

Fügen Sie auf der Einfügen-Registerkarte ein Bild-Steuerelement in den Detailkatalog ein:
Ändern Sie die Größe und verschieben Sie das Bild und die Beschriftung nebeneinander.

Tipp

Um die Größe und Position eines Steuerelements genau zu steuern, können Sie die Größe ändern oder verschieben, ohne die ALT-Taste zu drücken, und dann die Größe ändern bzw. das Steuerelement verschieben, während Sie die ALT-Taste gedrückt halten:
Legen Sie die Eigenschaft Image des Bildes auf diese Formel fest:
```
ThisItem.Product.Picture
```
Auch hier verweist der Ausdruck auf ein Produkt, das diesem Auftragsdetail zugeordnet ist, und extrahiert das Bild-Feld zur Anzeige.
Reduzieren Sie die Höhe der Katalogvorlage, sodass mehrere Auftragsdetail-Datensätze gleichzeitig angezeigt werden:

Anzeigen der Produktmenge und -kosten

Fügen Sie auf der Einfügen-Registerkarte eine weitere Beschriftung in den Detailkatalog ein, ändern Sie die Größe und verschieben Sie die neue Beschriftung rechts neben die Produktinformationen.
Legen Sie die Text-Eigenschaft der neuen Beschriftung auf diesen Ausdruck fest:
```
ThisItem.Quantity
```
Diese Formel holt Informationen direkt aus der Tabelle Bestelldetails (keine Beziehung erforderlich).
Ändern Sie auf der Registerkarte Start die Ausrichtung dieses Steuerelements in Rechts:
Fügen Sie auf der Einfügen-Registerkarte eine weitere Beschriftung in den Detailkatalog ein, ändern Sie die Größe und verschieben Sie die neue Beschriftung rechts neben der Mengenbeschriftung.
Legen Sie die Text-Eigenschaft der neuen Beschriftung auf diese Formel fest:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Wenn Sie das Sprach-Tag nicht angeben ([$-en-US]), wird es für Sie basierend auf Ihrer Sprache und Region hinzugefügt. Wenn Sie ein anderes Sprach-Tag verwenden möchten, entfernen Sie das $ nach der schließenden eckigen Klammer (]), und fügen Sie an dieser Stelle Ihr eigenes Währungssymbol hinzu.
Ändern Sie auf der Registerkarte Start die Ausrichtung dieses Steuerelements in Rechts:
Fügen Sie auf der Einfügen-Registerkarte ein weiteres Beschriftung-Steuerelement in den Detailkatalog ein, ändern Sie die Größe und verschieben Sie die neue Beschriftung rechts neben den Einzelpreis.
Legen Sie die Text-Eigenschaft der neuen Beschriftung auf diese Formel fest:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Und erneut, wenn Sie das Sprach-Tag nicht angeben ([$-en-US]), wird es für Sie basierend auf Ihrer Sprache und Region hinzugefügt. Wenn das Tag anders ist, verwenden Sie Ihr eigenes Währungssymbol anstelle des $ nach der schließenden eckigen Klammer (]).
Ändern Sie auf der Registerkarte Start die Ausrichtung dieses Steuerelements in Rechts:

Sie sind fertig damit, dem Detailkatalog Steuerelemente hinzuzufügen.
Wählen Sie im Bereich der Strukturansicht Screen1 aus, um sicherzustellen, dass der Detailkatalog nicht mehr ausgewählt ist.

Hinzufügen von Text zur neuen Titelleiste

Fügen Sie auf der Einfügen-Registerkarte eine weitere Beschriftung in den Bildschirm ein:
Ändern Sie die Größe und verschieben Sie die neue Beschriftung über die Bilder der Produkte in der zweiten Titelleiste. Ändern Sie dann auf der Start-Registerkarte die Textfarbe in Weiß.
Doppelklicken Sie auf den Text der Beschriftung und geben Sie Produkt ein:
Kopieren Sie die Produktbeschriftung und fügen Sie sie ein. Ändern Sie dann die Größe und verschieben Sie die Kopie über die Mengenspalte.
Doppelklicken Sie auf den Text der neuen Beschriftung und geben Sie Menge ein:
Kopieren Sie die Mengenbeschriftung und fügen Sie sie ein. Ändern Sie dann die Größe und verschieben Sie die Kopie über die Einzelpreisspalte.
Doppelklicken Sie auf den Text der neuen Beschriftung und geben Sie Einzelpreis ein:
Kopieren Sie die Einzelpreisbeschriftung und fügen Sie sie ein. Ändern Sie dann die Größe und verschieben Sie die Kopie über die Spalte des erweiterten Preises.
Doppelklicken Sie auf den Text der neuen Beschriftung und geben Sie Erweitert ein:

Anzeigen der Auftragssummen

Reduzieren Sie die Höhe des Detailkatalogs, um Platz für die Auftragssummen am unteren Bildschirmrand zu schaffen:
Kopieren Sie die Titelleiste in der Mitte des Bildschirms, fügen Sie sie ein und verschieben Sie die Kopie an den unteren Bildschirmrand:
Kopieren Sie die Produktbeschriftung aus der mittleren Titelleiste und fügen Sie sie ein. Verschieben Sie die Kopie dann in die untere Titelleiste links neben der Menge-Spalte.
Doppelklicken Sie auf den Text der neuen Beschriftung und geben Sie diesen Text ein:
Auftragssummen:
Kopieren Sie die Beschriftung für die Auftragssummen und fügen Sie sie ein. Ändern Sie dann die Größe und verschieben Sie die Kopie rechts neben die Beschriftung für die Auftragssummen.
Legen Sie die Text-Eigenschaft der neuen Beschriftung auf diese Formel fest:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Diese Formel zeigt eine Delegierungswarnung an, die Sie jedoch ignorieren können, da kein einzelner Auftrag mehr als 500 Produkte enthält.
Legen Sie auf der Start-Registerkarte die Textausrichtung der neuen Beschriftung auf Rechts fest:
Kopieren Sie dieses Beschriftung-Steuerelement und fügen Sie es ein. Ändern Sie dann die Größe und verschieben Sie die Kopie unter die Spalte Erweitert.
Legen Sie die Text-Eigenschaft der Kopie auf diese Formel fest:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Diese Formel zeigt eine Delegierungswarnung an, die Sie jedoch ignorieren können, da kein einzelner Auftrag mehr als 500 Produkte enthält.

Hinzufügen von Platz für neue Details

In jedem Katalog können Sie Daten anzeigen, aber nicht aktualisieren oder Datensätze hinzufügen. Unter dem Detailkatalog fügen Sie einen Bereich hinzu, in dem der Benutzer einen Datensatz in der Tabelle Bestelldetails konfigurieren und diesen Datensatz in einen Auftrag einfügen kann.

Reduzieren Sie die Höhe des Detailkatalogs so weit, dass Platz für einen Bearbeitungsbereich für einzelne Elemente unter diesem Katalog vorhanden ist.

In diesem Bereich fügen Sie Steuerelemente hinzu, damit der Benutzer ein Auftragsdetail hinzufügen kann:
Fügen Sie auf der Einfügen-Registerkarte eine Beschriftung hinzu, ändern Sie die Größe und verschieben Sie sie unter den Detailkatalog.
Doppelklicken Sie auf den Text der neuen Beschriftung und drücken Sie auf Löschen.
Legen Sie auf der Start-Registerkarte die Fill-Farbe der neuen Beschriftung auf LightBlue fest:

Auswählen eines Produkts

Wählen Sie auf der Einfügen-Registerkarte Steuerelemente > Kombinationsfeld aus:

Das Kombinationsfeld-Steuerelement wird in der oberen linken Ecke angezeigt.
Wählen Sie im Flyout-Dialogfeld die Auftragsprodukte-Datenquelle aus.
Wählen Sie auf der Eigenschaften-Registerkarte für das Kombinationsfeld die Option Bearbeiten (neben Felder) aus, um den Bereich Daten zu öffnen. Stellen Sie sicher, dass Primary text und SearchField auf nwind_productname festgelegt sind.

Sie geben den logischen Namen an, weil der Bereich Daten in diesem Fall noch keine Anzeigenamen unterstützt:
Schließen Sie den Bereich Daten.
Auf der Eigenschaften-Registerkarte in der Nähe des rechten Randes: Scrollen Sie nach unten, deaktivieren Sie Mehrfachauswahl zulassen und stellen Sie sicher, dass Suche zulassen aktiviert ist:
Ändern Sie die Größe und verschieben Sie das Kombinationsfeld in den hellblauen Bereich direkt unter der Spalte Produktname im Detailkatalog:

In diesem Kombinationsfeld gibt der Benutzer einen Datensatz in der Tabelle Produkt für den Datensatz Bestelldetails ein die die App erstellt.
Halten Sie die ALT-Taste gedrückt und wählen Sie den Abwärtspfeil des Kombinationsfelds aus.

Tipp

Wenn Sie die ALT-Taste gedrückt halten, können Sie mit Steuerelementen in Power Apps Studio interagieren, ohne den Vorschaumodus zu öffnen.
Wählen Sie in der Liste der angezeigten Produkte ein Produkt aus:

Hinzufügen eines Produktbildes

Wählen Sie auf der Einfügen-Registerkarte Medien > Bild aus:

Das Bild-Steuerelement wird in der oberen linken Ecke angezeigt:
Ändern Sie die Größe und verschieben Sie das Bild in den hellblauen Bereich unter den anderen Produktbildern und neben dem Kombinationsfeld.
Legen Sie die Image-Eigenschaft des Bildes wie folgt fest:
```
ComboBox1.Selected.Picture
```
Sie verwenden denselben Trick wie zuvor, um das Mitarbeiterbild in der Zusammenfassung anzuzeigen. Die Selected-Eigenschaft des Kombinationsfelds gibt den gesamten Datensatz des vom Benutzer ausgewählten Produkts zurück, einschließlich des Bild-Felds.

Hinzufügen eines Mengenfelds

Wählen Sie auf der Einfügen-Registerkarte Text > Texteingabe aus:

Das Texteingabe-Steuerelement wird in der oberen linken Ecke angezeigt:
Ändern Sie die Größe und verschieben Sie das Texteingabefeld rechts neben dem Kombinationsfeld unter der Mengenspalte im Detailkatalog:

Durch Verwendung dieses Texteingabefelds gibt der Benutzer das Menge-Feld des Auftragsdetails-Datensatzes an.
Legen Sie die Default-Eigenschaft dieses Steuerelements auf "" fest:
Ändern Sie auf der Registerkarte Start die Textausrichtung dieses Steuerelements in Rechts:

Anzeigen der Einzel- und erweiterten Preise

Fügen Sie auf der Einfügen-Registerkarte ein Beschriftung-Steuerelement hinzu.

Die Beschriftung wird in der oberen linken Ecke des Bildschirms angezeigt:
Ändern Sie die Größe der Beschriftung, verschieben Sie sie rechts neben das Texteingabesteuerelement und legen Sie die Text-Eigenschaft der Beschriftung auf diese Formel fest:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Dieses Steuerelement zeigt den Listenpreis von der Tabelle Produkte bestellen. Dieser Wert bestimmt das Einzelpreis-Feld im Auftragsdetails-Datensatz.

Hinweis

In diesem Szenario ist der Wert schreibgeschützt. In anderen Szenarien muss der App-Benutzer ihn möglicherweise ändern. Verwenden Sie in diesem Fall ein Texteingabe-Steuerelement und legen Sie dessen Default-Eigenschaft auf Listenpreis fest.
Ändern Sie auf der Registerkarte Start die Textausrichtung der Listenpreisbeschriftung in Rechts:
Kopieren Sie die Listenpreisbeschriftung und fügen Sie sie ein. Ändern Sie dann die Größe und verschieben Sie die Kopie rechts neben die Listenpreisbeschriftung.
Legen Sie die Text-Eigenschaft der neuen Beschriftung auf diese Formel fest:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Dieses Steuerelement zeigt den erweiterten Preis basierend auf der vom App-Benutzer angegebenen Menge und dem Listenpreis des vom App-Benutzer ausgewählten Produkts an. Es ist rein informativ für den App-Benutzer.
Doppelklicken Sie auf das Texteingabe-Steuerelement für die Menge und geben Sie eine Zahl ein.

Die Preisbeschriftung Erweitert wird neu berechnet, um den neuen Wert anzuzeigen:

Hinzufügen eines Hinzufügen-Symbols

Wählen Sie auf der Einfügen-Registerkarte Symbole > Hinzufügen aus:

Das Symbol wird in der oberen linken Ecke des Bildschirms angezeigt.
Ändern Sie die Größe und verschieben Sie dieses Symbol an den rechten Rand des hellblauen Bereichs. Legen Sie dann die OnSelect-Eigenschaft des Symbols auf diese Formel fest:
```
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 )
```
Im Allgemeinen erstellt und aktualisiert die Patch-Funktion Datensätze. Die spezifischen Argumente in dieser Formel bestimmen die genauen Änderungen, die die Funktion vornehmen wird.
- Das erste Argument gibt die Datenquelle an (in diesem Fall die Tabelle Bestelldetails), in der die Funktion einen Datensatz aktualisiert oder erstellt.
- Das zweite Argument gibt an, dass die Funktion einen Datensatz mit den Standardwerten für die Tabelle Bestelldetails erstellt, sofern im dritten Argument nicht anders angegeben ist.
- Das dritte Argument gibt an, dass vier Spalten im neuen Datensatz Werte vom Benutzer enthalten.
  - Die Spalte Auftrag enthält die Nummer des Auftrags, den der Benutzer im Auftragskatalog ausgewählt hat.
  - Die Spalte Produkt enthält den Namen des Produkts, das der Benutzer im Kombinationsfeld mit den Produkten ausgewählt hat.
  - Die Spalte Menge enthält den Wert, den der Benutzer im Texteingabefeld angegeben hat.
  - Die Spalte Einzelpreis enthält den Listenpreis des Produkts, das der Benutzer für dieses Auftragsdetail ausgewählt hat.
Hinweis

Sie können Formeln erstellen, die Daten aus einer beliebigen Spalte verwenden (in der Tabelle Produkte bestellen) für jedes Produkt, das der App-Benutzer im Kombinationsfeld auswählt, das Produkte anzeigt. Wenn der Benutzer einen Datensatz in der Tabelle Produkte bestellen auswählt, erscheint nicht nur der Produktname in diesem Kombinationsfeld, sondern auch der Stückpreis des Produkts in einem Etikett. Jeder Suchwert in einer Canvas-App verweist auf einen gesamten Datensatz, nicht nur auf einen Primärschlüssel.

Die Funktion Aktualisierung sorgt dafür, dass die Tabelle Aufträge den Datensatz widergibt, den Sie gerade der Tabelle Bestelldetails hinzugefügt haben. Mit der Reset-Funktion werden die Produkt-, Mengen- und Einzelpreisdaten gelöscht, sodass der Benutzer einfacher ein weiteres Auftragsdetail für denselben Auftrag erstellen kann.
Drücken Sie F5 und wählen Sie dann das Hinzufügen-Symbol aus.

Der Auftrag spiegelt die von Ihnen angegebenen Informationen wider:
(optional) Fügen Sie dem Auftrag eine weiteres Element hinzu.
Drücken Sie die ESC-Taste, um den Vorschaumodus zu verlassen.

Entfernen eines Auftragsdetails

Wählen Sie in der Mitte des Bildschirms die Vorlage des Detailkatalogs aus:
Wählen Sie auf der Einfügen-Registerkarte Symbole > Papierkorb aus:

Das Papierkorbsymbol wird in der oberen linken Ecke der Katalogvorlage angezeigt.
Ändern Sie die Größe und verschieben Sie das Papierkorbsymbol an den rechten Rand der Detailkatalogvorlage. Legen Sie dann die OnSelect-Eigenschaft des Symbols auf diese Formel fest:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Zum jetzigen Zeitpunkt können Sie einen Datensatz nicht direkt aus einer Beziehung entfernen, denn die Funktion Entfernen entfernt einen Datensatz direkt aus der verknüpften Tabelle. ThisItem gibt den zu entfernenden Datensatz an, der aus demselben Datensatz des Detailkatalogs stammt, in dem das Papierkorbsymbol angezeigt wird.

Auch hier verwendet die Operation zwischengespeicherte Daten, sodass die Funktion Aktualisierung die Tabelle Aufträge informiert, dass die App eine ihrer zugehörigen Tabellen geändert hat.
Drücken Sie F5, um den Vorschaumodus zu öffnen, und wählen Sie dann das Papierkorbsymbol jedes Auftragsdetails-Datensatzes aus, den Sie aus dem Auftrag entfernen möchten.
Versuchen Sie, verschiedene Auftragsdetails zu Ihren Aufträgen hinzuzufügen und daraus zu entfernen:

Fazit

Zusammenfassend haben Sie einen weiteren Katalog hinzugefügt, in dem Auftragsdetails und Steuerelemente zum Hinzufügen und Entfernen von Auftragsdetails in der App angezeigt werden. Sie haben diese Elemente verwendet:

Ein zweites Katalog-Steuerelement, das über eine 1:n-Beziehung mit dem Auftragskatalog verbunden ist: Gallery2.Items = Gallery1.Selected.'Order Details'
Eins-zu-viele-Beziehung zwischen der Auftragsdetailtabelle und der Auftragsprodukttabelle und ThisItem.Product.'Product Name' und ThisItem.Product.Picture
Die Choices-Funktion, um eine Liste der Produkte zu erhalten: Choices( 'Order Details'.Product' )
Die Selected-Eigenschaft eines Kombinationsfelds als vollständiger n:1-Datensatz: ComboBox1.Selected.Picture und ComboBox1.Selected.'List Price'
Die Patch-Funktion zum Erstellen eines Auftragsdetails-Datensatzes: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
Die Remove-Funktion zum Löschen eines Auftragsdetails-Datensatzes: Remove( 'Order Details', ThisItem )

Diese Themenreihe bietet eine kurze Einführung in die Verwendung von Dataverse Beziehungen und Auswahlmöglichkeiten in einer Canvas-App für Bildungszwecke. Bevor Sie eine App für die Produktion freigeben, sollten Sie die Feldvalidierung, die Fehlerbehandlung und viele andere Faktoren berücksichtigen.

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).

Share via