Erstellen eines Zusammenfassungsformulars in einer Canvas-App

Befolgen Sie die schrittweisen Anweisungen, um in einer Canvas-App ein Zusammenfassungsformular 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:

1. Erstellen eines Auftragskatalogs.
2. Erstellen eines Zusammenfassungsformulars (dieses Thema).
3. Erstellen eines Detailkatalogs.

Anforderungen

1. Installieren der Northwind Traders-Datenbank und -Apps.
2. Überprüfen Sie die Übersicht über die Canvas-App für Northwind Traders.
3. Erstellen Sie den Auftragskatalog selbst oder öffnen Sie die Northwind Orders (Canvas) – Start Teil 2-App, die dieser Katalog bereits enthält.

Hinzufügen einer Titelleiste

Erstellen Sie oben in der App eine Titelleiste, in der am Ende dieses Thema Aktionsschaltflächen angezeigt werden.

1. Wählen Sie im Bereich der Strukturansicht Screen1 aus, um sicherzustellen, dass Sie dem Auftragskatalog nicht versehentlich ein Steuerelement hinzufügen:

   

2. Wählen Sie auf der Einfügen-Registerkarte Beschriftung aus, um ein Beschriftung-Steuerelement hinzuzufügen:

   

   Die neue Beschriftung sollte nur einmal über dem Katalog erscheinen. Wenn sie in jedem Element des Katalogs angezeigt wird, löschen Sie die erste Instanz der Beschriftung, stellen Sie sicher, dass der Bildschirm ausgewählt ist (wie im vorherigen Schritt beschrieben), und fügen Sie die Beschriftung erneut ein.

3. Verschieben und ändern Sie die Größe der neuen Beschriftung, um den oberen Bildschirmrand zu überspannen:

   

4. Doppelklicken Sie auf den Text der Beschriftung und geben Sie Northwind Orders ein.

   Ändern Sie alternativ die Text-Eigenschaft in der Formelleiste, um das gleiche Ergebnis zu erzielen:

   

5. Formatieren Sie auf der Start-Registerkarte die Beschriftung:

   • Vergrößern Sie den Schriftgrad auf 24 Punkte.
   • Versehen Sie den Text mit einer Fettformatierung.
   • Ändern Sie den Text in Weiß.
   • Zentrieren Sie den Text.
   • Fügen Sie dem Hintergrund eine dunkelblaue Füllung hinzu.

   

Hinzufügen eines Formular bearbeiten-Steuerelements

In diesem Abschnitt fügen Sie Steuerelemente hinzu, um eine Zusammenfassung des vom Benutzer im Katalog ausgewählten Auftrags anzuzeigen.

1. Fügen Sie auf der Einfügen-Registerkarte ein Formular bearbeiten-Steuerelement hinzu:

   

   Standardmäßig wird das Formular in der oberen linken Ecke angezeigt, wo andere Steuerelemente möglicherweise das Auffinden erschweren:

   

2. Verschieben und ändern Sie die Größe des Formulars, um die obere rechte Ecke des Bildschirms unter der Titelleiste abzudecken:

   

3. Wählen Sie im Bereich Eigenschaften die Datenquelle-Dropdownliste aus.

   

4. Wählen Sie die Aufträge-Datenquelle aus.

Hinzufügen und Ordnen von Feldern

1. Wählen Sie auf der Registerkarte Eigenschaften am rechten Rand die Option Felder bearbeiten aus, um den Bereich Felder zu öffnen.

   

2. Wenn der Bereich Felder nicht leer ist, entfernen Sie die bereits eingefügten Felder.

   

3. Nachdem die Feldliste leer ist, wählen Sie Feld hinzufügen aus und aktivieren Sie dann die Kontrollkästchen für die Kunde- und Mitarbeiter-Felder.

   

4. Scrollen Sie nach unten, bis diese Felder angezeigt werden, und aktivieren Sie die entsprechenden Kontrollkästchen:

   • Hinweise
   • Auftragsdatum
   • Auftragsnummer
   • Auftragsstatus
   • Zahlungsdatum

   

   

5. Wählen Sie am Ende des Bereichs Felder Hinzufügen aus und schließen Sie dann den Bereich Felder.

   Das Formular zeigt sieben Felder, die in einer anderen Reihenfolge vorliegen können:

   

   Hinweis

   Wenn in einem Feld ein rotes Fehlersymbol angezeigt wird, ist möglicherweise ein Problem aufgetreten, als Daten aus der Quelle abgerufen wurden. Aktualisieren Sie die Daten, um den Fehler zu beheben:

   1. Klicken Sie auf der Registerkarte Ansicht auf Datenquellen.
   2. Wählen Sie im Bereich Daten die Option Datenquellen aus.
   3. Klicken Sie neben Aufträge auf die Auslassungspunkte (...), wählen Sie Aktualisieren aus, und schließen Sie dann den Bereich Daten.

   Wenn im Kombinationsfeld für den Kunden- oder Mitarbeiternamen weiterhin ein Fehler angezeigt wird, aktivieren Sie das Kontrollkästchen für Primary text und SearchField, indem Sie sie auswählen und dann den Bereich Daten öffnen. Für das Kundenfeld sollten beide Felder auf nwind_company gesetzt sein. Für das Mitarbeiterfeld sollten beide Felder auf nwind_lastname gesetzt sein.

6. Ändern Sie bei ausgewähltem Formular die Anzahl der Spalten im Formular von 3 auf 12 in der Eigenschaften-Registerkarte in der Nähe des rechten Randes.

   Dieser Schritt erhöht die Flexibilität beim Anordnen der Felder:

   

   Viele UI-Designs basieren auf 12-Spalten-Layouts, da sie Zeilen mit 1, 2, 3, 4, 6 und 12 Steuerelementen gleichmäßig aufnehmen können. In diesem Thema erstellen Sie Zeilen, die 1, 2 oder 4 Steuerelemente enthalten.

7. Verschieben und ändern Sie die Größe der Felder, indem Sie ihre Ziehpunkte wie bei jedem anderen Steuerelement ziehen, sodass jede Zeile diese Datenkarten in der angegebenen Reihenfolge enthält:

   • Erste Reihe: Auftragsnummer, Auftragsstatus, Auftragsdatum und Zahlungsdatum
   • Zweite Reihe: Kunde und Mitarbeiter
   • Dritte Reihe: Anmerkungen

   Hinweis

   Möglicherweise fällt es Ihnen leichter, die Datenkarten Anmerkungen, Kunde und Mitarbeiter zu erweitern, bevor Sie sie anordnen.

   

   Weitere Informationen zum Anordnen von Feldern in einem Formular: Grundlegendes zum Datenformularlayout für Canvas-Apps.

Ausblenden der Zeit-Steuerelemente

In diesem Beispiel benötigen Sie die Zeitabschnitte der Datumsfelder nicht, da diese Granularität den Benutzer ablenken kann. Wenn Sie sie löschen, können Probleme in Formeln auftreten, die sich auf diese Steuerelemente stützen, um Datumswerte zu aktualisieren oder die Position eines anderen Steuerelements auf der Datenkarte zu bestimmen. Stattdessen blenden Sie die Zeit-Steuerelemente aus, indem Sie deren Visible-Eigenschaft festlegen.

1. Wählen Sie im Bereich der Strukturansicht die Datenkarte Auftragsdatum aus.

   Die Karte hat möglicherweise einen anderen Namen, enthält jedoch Auftragsdatum.

2. Wählen Sie bei gedrückter Umschalttaste die Steuerelemente für Stunde, Minute und Doppelpunkttrennzeichen in der Auftragsdatum-Datenkarte aus.

   

3. Legen Sie die Eigenschaft Visible des Steuerelements auf false fest.

   Alle ausgewählten Steuerelemente verschwinden aus dem Formular:

   

4. Ändern Sie die Größe des Datumsauswahl-Steuerelements, um das vollständige Datum anzuzeigen:

   

   Als Nächstes wiederholen Sie die letzten Schritte für das Feld Zahlungsdatum.

5. Wählen Sie im Bereich der Strukturansicht die Zeit-Steuerelemente in der Datenkarte Zahlungsdatum aus:

   

6. Legen Sie die Eigenschaft Visible des ausgewählten Steuerelements auf false fest.

   

7. Ändern Sie die Größe der Datumsauswahl in der Zahlungsdatum-Karte:

   

Verbinden des Auftragskatalogs

1. Reduzieren Sie im Bereich der Strukturansicht das Formular, um den Namen des Auftragskatalogs leichter zu finden, und benennen Sie ihn gegebenenfalls in Gallery1 um.

2. Legen Sie die Eigenschaft Item des Zusammenfassungsformulars auf diesen Ausdruck fest:

   Gallery1.Selected
   

   

   Das Formular zeigt eine Zusammenfassung des Auftrags an, den der App-Benutzer in der Liste auswählt.

   

Ersetzen einer Datenkarte

Auftragsnummer ist ein Bezeichner, den Dataverse automatisch zuweist, wenn Sie einen Datensatz erstellen. Dieses Feld hat standardmäßig ein Texteingabe-Steuerelement, aber Sie werden es durch eine Beschriftung ersetzen, damit der Benutzer dieses Feld nicht bearbeiten kann.

1. Wählen Sie das Formular aus, wählen Sie Felder bearbeiten in der Eigenschaften-Registerkarte am rechten Rand und dann das Feld Auftragsnummer aus:

   

2. Öffnen Sie die Liste Steuerelementtyp:

   

3. Wählen Sie die Text anzeigen-Datenkarte aus:

   

4. Schließen Sie den Felder-Bereich.

   Der Benutzer kann die Auftragsnummer nicht mehr ändern:

   

5. Ändern Sie auf der Registerkarte Start die Schriftgröße der Auftragsnummer auf 20 Punkte, damit das Feld leichter zu finden ist:

   

Verwenden einer n:1-Beziehung

Die Tabelle Aufträge hat eine Viele-zu-Eins-Beziehung mit der Tabelle Mitarbeiter: Jeder Mitarbeiter kann viele Aufträge anlegen, aber jeder Auftrag kann nur einem Mitarbeiter zugeordnet werden. Wenn der Benutzer einen Mitarbeiter im Kombinationsfeld-Steuerelement auswählt, stellt seine Selected-Eigenschaft den gesamten Datensatz des Mitarbeiters aus der Employees-Tabelle bereit. Als Ergebnis können Sie ein Bild-Steuerelement konfigurieren, um das Bild des Mitarbeiters anzuzeigen, den der Benutzer im Kombinationsfeld auswählt.

1. Wählen Sie die Mitarbeiter-Datenkarte aus:

   

2. Entsperren Sie in der Erweitert-Registerkarte am rechten Rand die Datenkarte, damit Sie zuvor schreibgeschützte Formeln bearbeiten können:

   

3. Reduzieren Sie auf der Datenkarte die Breite des Kombinationsfelds, um Platz für das Mitarbeiterbild zu schaffen:

   

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

   

   Auf der Datenkarte wird ein Bild angezeigt, das erweitert wird, um es aufzunehmen:

   

5. Ändern Sie die Größe des Bildes und verschieben Sie es nach rechts vom Kombinationsfeld:

   

6. Legen Sie die Image-Eigenschaft des Bildes auf diese Formel fest, wobei bei Bedarf die Zahl am Ende von DataCardValue ersetzt wird:

   DataCardValue7.Selected.Picture
   

   

   Das Bild des ausgewählten Mitarbeiters wird angezeigt.

7. Wählen Sie bei gedrückter ALT-Taste einen anderen Mitarbeiter im Kombinationsfeld aus, um zu bestätigen, dass sich auch das Bild ändert.

   

Hinzufügen eines Speichern-Symbols

1. Wählen Sie im Bereich der Strukturansicht Screen1 und dann Einfügen > Symbole > Prüfen aus:

   

   Standardmäßig wird das Häkchensymbol in der oberen linken Ecke angezeigt, wo andere Steuerelemente möglicherweise das Auffinden des Symbols erschweren:

   

2. Ändern Sie auf der Start-Registerkarte die Color-Eigenschaft des Symbols auf Weiß, ändern Sie die Größe des Symbols und verschieben Sie es in die Nähe des rechten Randes der Titelleiste:

   

3. Bestätigen Sie im Bereich der Strukturansicht, dass der Name des Formulars Form1 lautet und legen Sie dann die OnSelect-Eigenschaft des Symbols auf diese Formel fest:

   SubmitForm( Form1 )
   

   

   Wenn der Benutzer das Symbol auswählt, erfasst die SubmitForm-Funktion alle geänderten Werte im Formular und sendet sie an die Datenquelle. Punkte marschieren über den oberen Bildschirmrand, wenn die Daten übermittelt werden, und der Auftragskatalog spiegelt die Änderungen nach Abschluss des Vorgangs wider.

4. Legen Sie die Eigenschaft DisplayMode des Symbols auf die folgende Formel fest:

   If( Form1.Unsaved, DisplayMode.Edit, DisplayMode.Disabled )
   

   

   Wenn alle Änderungen im Formular gespeichert wurden, ist das Symbol deaktiviert und wird in DisabledColor angezeigt, das Sie als Nächstes einstellen werden.

5. Legen Sie die Eigenschaft DisabledColor des Symbols auf diesen Wert fest:

   Gray
   

   

   Der Benutzer kann Änderungen an einem Auftrag speichern, indem er das Häkchensymbol auswählt, das dann deaktiviert und abgeblendet wird, bis der Benutzer eine weitere Änderung vornimmt:

   

Hinzufügen eines Abbrechen-Symbols

1. Wählen Sie auf der Einfügen-Registerkarte Symbole > Abbrechen aus:

   

   Standardmäßig wird das Symbol in der oberen linken Ecke angezeigt, wo andere Steuerelemente möglicherweise das Auffinden des Symbols erschweren:

   

2. Ändern Sie auf der Start-Registerkarte die Color-Eigenschaft des Symbols auf Weiß, ändern Sie die Größe des Symbols und verschieben Sie es links neben das Häkchensymbol:

   

3. Legen Sie die OnSelect-Eigenschaft des Abbrechen-Symbols auf die folgende Formel fest:

   ResetForm( Form1 )
   

   

   Die ResetForm-Funktion verwirft alle Änderungen im Formular, wodurch der ursprüngliche Zustand wiederhergestellt wird.

4. Legen Sie die DisplayMode-Eigenschaft des Abbrechen-Symbols auf die folgende Formel fest:

   If( Form1.Unsaved Or Form1.Mode = FormMode.New, DisplayMode.Edit, DisplayMode.Disabled )
   

   

   Diese Formel unterscheidet sich geringfügig von der für das Häkchensymbol. Das Abbrechen-Symbol ist deaktiviert, wenn alle Änderungen gespeichert wurden oder sich das Formular im Modus Neu befindet, den Sie als Nächstes aktivieren. In diesem Fall verwirft ResetForm den neuen Datensatz.

5. Legen Sie die Eigenschaft DisabledColor des Abbrechen-Symbols auf diesen Wert fest:

   Gray
   

   

   Der Benutzer kann Änderungen an einem Auftrag abbrechen und die Häkchen- und Abbrechen-Symbole werden deaktiviert und abgeblendet, wenn alle Änderungen gespeichert wurden:

   

Hinzufügen eines Hinzufügen-Symbols

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

   

   Standardmäßig wird das Hinzufügen-Symbol in der oberen linken Ecke angezeigt, wo andere Steuerelemente möglicherweise das Auffinden erschweren:

   

2. Ändern Sie auf der Start-Registerkarte die Color-Eigenschaft des Hinzufügen-Symbol-Symbols auf Weiß, ändern Sie die Größe des Symbols und verschieben Sie es links neben das Abbrechen-Symbol:

   

3. Legen Sie die Eigenschaft OnSelect des Hinzufügen-Symbols auf die folgende Formel fest:

   NewForm( Form1 )
   

   

   Die NewForm-Funktion zeigt einen leeren Datensatz im Formular.

4. Legen Sie die Eigenschaft DisplayMode des Hinzufügen-Symbols auf die folgende Formel fest:

   If( Form1.Unsaved Or Form1.Mode = FormMode.New, DisplayMode.Disabled, DisplayMode.Edit )
   

   

   Die Formel deaktiviert das Hinzufügen-Symbol unter folgenden Bedingungen:

   • Der Benutzer nimmt Änderungen vor, speichert oder bricht sie jedoch nicht ab. Dies ist das entgegengesetzte Verhalten der Häkchen- und Abbrechen-Symbole.
   • Der Benutzer wählt das Hinzufügen-Symbol aus, nimmt jedoch keine Änderungen vor.

5. Legen Sie die Eigenschaft DisabledColor des Hinzufügen-Symbols auf diesen Wert fest:

   Gray
   

   

   Der Benutzer kann einen Auftrag erstellen, wenn er keine Änderungen vornimmt oder von ihm vorgenommene Änderungen speichert oder abbricht. (Wenn der Benutzer dieses Symbol auswählt, kann er es erst wieder auswählen, wenn er eine oder mehrere Änderungen vorgenommen und diese Änderungen dann gespeichert oder abgebrochen hat.)

   

Hinzufügen eines Papierkorbsymbols

1. Wählen Sie auf der Einfügen-Registerkarte Symbole > Papierkorb aus.

   

   Standardmäßig wird das Papierkorb-Symbol in der oberen linken Ecke angezeigt, wo andere Steuerelemente möglicherweise das Auffinden erschweren:

   

2. Ändern Sie auf der Start-Registerkarte die Color-Eigenschaft des Papierkorbsymbols auf Weiß, ändern Sie die Größe des Symbols und verschieben Sie es links neben das Hinzufügen-Symbol:

   

3. Legen Sie die Eigenschaft OnSelect des Papierkorbsymbols auf die folgende Formel fest:

   Remove( Orders, Gallery1.Selected )
   

   

   Die Remove-Funktion entfernt einen Datensatz aus einer Datenquelle. In dieser Formel entfernt die Funktion den Datensatz, der im Auftragskatalog ausgewählt wurde. Das Papierkorbsymbol wird in der Nähe des Zusammenfassungsformulars (nicht des Auftragskatalogs) angezeigt, da das Formular mehr Details zum Datensatz enthält, sodass der Benutzer den Datensatz, den die Formel löschen wird, leichter identifizieren kann.

4. Legen Sie die Eigenschaft DisplayMode des Papierkorbsymbols auf die folgende Formel fest:

   If( Form1.Mode = FormMode.New, DisplayMode.Disabled, DisplayMode.Edit )
   

   

   Diese Formel deaktiviert das Papierkorbsymbol, wenn der Benutzer einen Datensatz erstellt. Bis der Benutzer den Datensatz speichert, hat die Remove-Funktion keinen Datensatz zum Löschen.

5. Legen Sie die Eigenschaft DisabledColor des Papierkorbsymbols auf diesen Wert fest:

   Gray
   

   

   Der Benutzer kann einen Auftrag löschen.

   

Übersicht

Zusammenfassend haben Sie ein Formular hinzugefügt, in dem der Benutzer eine Zusammenfassung jedes Auftrags anzeigen und bearbeiten kann, und Sie haben die folgenden Elemente verwendet:

• Ein Formular, das Daten aus der Tabelle Aufträge anzeigt: Form1.DataSource = Orders
• Eine Verbindung zwischen dem Formular und dem Auftragskatalog: Form1.Item = Gallery1.Selected
• Ein alternatives Steuerelement für das Auftragsnummer-Feld: Text anzeigen
• Eine n:1-Beziehung, um das Bild des Mitarbeiters in der Mitarbeiter-Datenkarte zu zeigen: DataCardValue1.Selected.Picture
• Ein Symbol zum Speichern von Änderungen an einem Auftrag: SubmitForm( Form1 )
• Ein Symbol zum Abbrechen von Änderungen an einem Auftrag: ResetForm( Form1 )
• Ein Symbol zum Erstellen eines Auftrags: NewForm( Form1 )
• Ein Symbol zum Löschen eines Auftrags: Remove( Orders, Gallery1.Selected )

Nächster Schritt

Im nächsten Thema fügen Sie einen weiteren Katalog hinzu, um die Produkte in jedem Auftrag anzuzeigen, und Sie ändern diese Details mithilfe der Patch-Funktion.