Einführung in den App Builder - Lektion 6: Binding

Dies ist die sechste Lektion der Einführung in den App Builder Tutorialreihe.

In dieser Lektion lernen wir ein grundlegendes Konzept im App Builder kennen: Binding. Wir werden es kennenlernen, während wir eine wichtige Seite in unserer Northwinds-Anwendung erstellen.

Seiten mit mehreren Panels: Die Bestellseite

Alle Seiten, die wir bisher erstellt haben, hatten nur ein Panel. Wir werden sehen, wie wir Seiten mit mehreren Panels erstellen können und wie diese mithilfe von Binding zusammenarbeiten.

Um zu beginnen, erstellen wir eine Seite namens Bestellungen.

1. Verwenden Sie die gleichen Schritte, die wir in den vorherigen Lektionen befolgt haben, um die neue Seite Bestellungen zu erstellen. Sie sollte vorerst ein Vollseiten-Panel haben, wir fügen später mehr hinzu.

2. Sobald der App Builder die Seite erstellt hat, fügen Sie ein Panel vom Typ Grid hinzu, wobei Bestellung (Quelle) als Panelquelle verwendet wird. Sie können den App Builder das Panel automatisch erstellen lassen, wir werden die Steuerelemente später bearbeiten. Wenn Sie die Vorschau der Seite besuchen, sehen Sie, dass sie einfach alle Bestellungen auflistet, die in der Datenbank vorhanden sind.

Jetzt fügen wir ein zweites Panel zur Seite Bestellungen hinzu. Unser Ziel ist es, ein anfängliches Panel zu haben, das alle Bestellungen auflistet, während die Details jeder Bestellung in anderen Panels auf derselben Seite angezeigt werden. Auf diese Weise wird beim Klicken des Endbenutzers auf eine Bestellung die anderen Panels automatisch geändert, um Details zur ausgewählten Bestellung anzuzeigen.

1. Navigieren Sie zur Seite Bestellungen und klicken Sie auf Seite anzeigen, um eine Vorschau anzuzeigen.

2. Greifen Sie auf den Live-Designer zu.

3. Wenn der Live-Designer geöffnet wird, klicken Sie auf die Schaltfläche + Panel. Der Dialog Panel erstellen öffnet sich.

4. Wählen Sie Grid als Paneltyp und klicken Sie auf Weiter.

5. Wählen Sie BestellDetail (Quelle) als Panelquelle und klicken Sie auf Weiter.

6. Sie können den App Builder das Panel automatisch erstellen lassen, wir werden die Steuerelemente später bearbeiten. Klicken Sie auf Weiter und Fertigstellen.

Da die Bestellung-Tabelle einen Fremdschlüssel hat, der mit der BestellDetail-Tabelle verbunden ist, und die beiden Panels Daten aus Regeln ziehen, die auf diesen beiden Tabellen basieren, bindet der App Builder sie automatisch. Das bedeutet, dass jetzt, wenn Sie die Vorschau der Seite Bestellungen besuchen, das Klicken auf eine Zeile einer Bestellung im Bestellungen-Panel das Bestelldetails-Panel automatisch mit den Details der ausgewählten Bestellung füllt.

Fügen Sie eine Bindung manuell hinzu

Wenn zwei Panels auf derselben Seite Daten aus Regeln abrufen, die verbindende Fremdschlüssel haben, bindet der App Builder sie automatisch. Wenn Sie jedoch zwei Panels manuell binden müssen, gehen Sie wie folgt vor:

1. Navigieren Sie zu der Seite mit den Panels, die Sie binden möchten.

2. Klicken Sie auf das Panel, das automatisch mit den Details der Benutzerselektionen in einem anderen Panel gefüllt werden soll.

3. Im Tab Panel finden Sie das Feld Elternpanel & Bindung.

   1. Verwenden Sie das Menü, um das Elternpanel auszuwählen.

   2. Klicken Sie auf die Schaltfläche mit dem Bindungssymbol. Der Dialog Bindungsspalten öffnet sich.

   3. Klicken Sie auf + Bindung und verwenden Sie die Menüs, um auszuwählen:

      1. Typ: Der Typ der Bindung.

      2. Kindspalte: Wählen Sie aus, welche Spalte aus der Basisregel des Kindpanels das Kind sein soll.

      3. Elternspalte: Wählen Sie aus, welche Spalte aus der Basisregel des Elternpanels das Elternteil sein soll.

   4. Klicken Sie auf das Häkchen-Symbol, um zu bestätigen und das Fenster zu schließen.

Klicken Sie auf Seite anzeigen, um die Bestellungen-Seite anzuzeigen, da sie jetzt zwei Panels hat. Um zu testen, versuchen Sie, verschiedene Zeilen im Elternpanel auszuwählen und sehen Sie, wie sich die Informationen im Kindpanel entsprechend ändern:

Anzeigewerte bearbeiten

Beachten Sie, dass das Panel Bestelldetails nur die Stückpreise jedes Artikels anzeigt. Allerdings wurden mehrere Artikel in großen Mengen gekauft. Darüber hinaus wurden mehrere von ihnen mit Rabatten gekauft. Lassen Sie uns das Panel so ändern, dass es die Preisgesamtsummen berechnet und anzeigt.

1. Gehen Sie zu App Workbench > Regeln, greifen Sie auf die Regel OrderDetail (Quelle) zu und klicken Sie, um sie zu bearbeiten. Klicken Sie im Tab Spalten auf + Spalte.

2. Um den Stückpreis mit der Menge zu multiplizieren und den Rabatt abzuziehen, benötigen wir den folgenden Ausdruck:

   OD.UnitPrice*OD.Quantity*(1-OD.Discount)

3. Geben Sie im Feld Alias Zeilenbetrag ein. Klicken Sie auf Speichern.

4. Verwenden Sie in der aktualisierten Tabelle der Spalten die Logische Spalte, um das neue Feld Zeilenbetrag als Währung zu formatieren. Nutzen Sie diese Gelegenheit auch, um die Spalte Stückpreis als Währung und die Spalte Rabatt als Prozent zu formatieren.

5. Klicken Sie auf Ergebnisse, um die angezeigten Werte zu sehen. Gehen Sie nun zurück zum Bearbeitungsbildschirm der Bestellungen-Seite und fügen Sie die neue Gesamtbetrag-Steuerung zum Bestelldetails-Panel hinzu, und geben Sie ihr den Namen Total. Nachdem Sie das getan haben, besuchen Sie die Vorschau der Bestellungen-Seite erneut. Das Bestelldetails-Panel zeigt jetzt die Summen am Ende jeder Zeile an:

   

Jetzt, da wir einen Gesamtbetrag für jeden einzelnen Artikel haben, fügen wir auch eine weitere Steuerung hinzu, um den Gesamtpreis einer gesamten Bestellung anzuzeigen:

1. Gehen Sie zur Vorschau der Bestellungen-Seite und greifen Sie auf den Live-Designer zu.

2. Wählen Sie die Total-Steuerung im Bestelldetails-Panel aus, damit der Live-Designer Bearbeitungsoptionen dafür anzeigt.

3. Gehen Sie zum Tab Steuereigenschaften, suchen Sie das Feld Aggregatfunktion und klicken Sie auf Summe.

4. Klicken Sie auf Speichern.

Jetzt zeigt das Bestelldetails-Panel den Gesamtpreis für eine gesamte Bestellung am Ende der Total-Spalte an:

Eine Steuerung schreibgeschützt machen

Wir möchten nicht, dass Endbenutzer alle Steuerungen auf einer Seite bearbeiten können. Zum Beispiel können wir auf der Bestellungen-Seite, die wir erstellen, nicht zulassen, dass Benutzer den Preis eines Artikels bearbeiten. Befolgen Sie diese Schritte:

1. Navigieren Sie zur Vorschau der Bestellungen-Seite und greifen Sie auf den Live-Designer zu.

2. Klicken Sie auf die Einheitspreis-Steuerung im Bestelldetails-Panel, damit der Live-Designer Bearbeitungsoptionen dafür anzeigt.

3. Gehen Sie zum Tab Position & Breite, suchen Sie das Feld Bearbeitungsoptionen und klicken Sie auf Schreibgeschützt.

4. Klicken Sie auf Speichern.

Wenn Sie zur Seitenvorschau zurückkehren, beachten Sie, dass das Klicken auf das Bearbeitungssymbol in einer der Zeilen des Bestelldetails-Panels nicht mehr zulässt, dass Sie die Einheitspreis-Spalte bearbeiten.

Verbesserungen der Bestellungen-Seite

Trotz der Verbesserungen, die wir bereits vorgenommen haben, ist die Bestellungen-Seite immer noch nicht sehr benutzerfreundlich. Das Bestellungen-Panel hat mehr Steuerungen, als bequem auf dem Bildschirm gelesen werden können, und einige wichtige Informationen, die Endbenutzer gerne wissen würden, sind auf der Seite nicht zu finden. Lassen Sie uns weiter an dieser Seite arbeiten.

Versandinformationen-Panel

Das Bestellungen-Panel hat zu viele Steuerungen. Werfen Sie einen Blick darauf in der Vorschau der Bestellungen-Seite. Es gibt so viele Steuerungen, dass sie nicht auf den Bildschirm passen und es nicht möglich ist, alles bequem zu lesen.

Um unsere Anwendung benutzerfreundlicher zu gestalten, fügen wir der Seite weitere Panels hinzu, um die Informationen besser zu verteilen.

1. Navigieren Sie zum Bearbeitungsbildschirm der Bestellungen-Seite und klicken Sie auf + Panel hinzufügen.

2. Sobald es erscheint, klicken Sie auf + Paneltyp wählen.

3. Diesmal sollte der Paneltyp Formular sein. Die Panelquelle sollte Bestellung (Quelle) sein, genau wie beim Haupt-Bestellungen-Panel. Diesmal wählen Sie jedoch Manuell wählen für die Steuerungen des neuen Panels. Wenn der Bildschirm Spalten wählen erscheint, wählen Sie nur die folgenden Spalten aus: Versender, Versandname, Versandadresse, Versandstadt, Versandstaat, Versandpostleitzahl, Versandland, Benötigtes Datum, Versanddatum und Fracht.

4. Klicken Sie auf Weiter und Veröffentlichen.

5. Wenn der App Builder die Seite aktualisiert, ändern Sie den Namen des neuen Panels in Versandinformationen und klicken Sie auf Speichern.

Der App Builder wird dieses neue Panel automatisch mit dem Bestellungen-Panel über die Spalte Bestell-ID verknüpfen. Jetzt, da wir ein neues Panel zur Anzeige der Versanddetails haben, muss das Haupt-Bestellungen-Panel nicht mehr all diese Steuerungen enthalten. Besuchen Sie den Bearbeitungsbildschirm des Bestellungen-Panels und reduzieren Sie die Anzahl der Steuerungen dort, sodass nur Bestellnummer und Bestelldatum übrig bleiben, die beiden, die auch nicht im Versandinformationen-Panel vorhanden sind.

Allerdings hat das neue Versandinformationen-Panel immer noch viele Steuerungen, daher werden wir sie etwas besser organisieren:

1. Wählen Sie im Bearbeitungsbildschirm der Bestellungen-Seite das Versandinformationen-Panel aus und klicken Sie auf Steuerungen.

2. Wenn wir uns alle verfügbaren Steuerungen ansehen, können wir sie in zwei Gruppen unterteilen, also machen wir das. Klicken Sie auf + Steuerung.

3. Überspringen Sie das Feld Spalte, da wir keine neuen Steuerungen benötigen, wir werden nur die vorhandenen organisieren. Wählen Sie im Feld Steuerungstyp Accordion aus. Geben Sie im Feld Name Versandinfo ein.

4. Klicken Sie auf Weiter und dann auf Fertigstellen.

5. Wiederholen Sie die Schritte 2 bis 4 und erstellen Sie eine weitere Gruppe mit dem Namen Daten & Kosten.

Wenn der App Builder Sie zur Liste der Steuerungen zurückbringt, sehen Sie, dass die beiden Gruppen jetzt aufgelistet sind. Gehen Sie alle Steuerungen durch und entscheiden Sie, welche unter jede Gruppe fallen sollte, indem Sie deren Eltern auf eine der beiden ändern. Wenn Sie fertig sind und zur Vorschau der Bestellungen-Seite zurückkehren, sollte das Versandinformationen-Panel viel organisierter aussehen:

Kundeninformations-Panel

Lassen Sie uns ein weiteres Panel zur Bestellungen-Seite hinzufügen, da es derzeit keine Informationen darüber anzeigt, wer die Bestellungen aufgegeben hat. Es zeigt uns, was gekauft wurde, aber nicht, wer es gekauft hat.

1. Navigieren Sie zum Bearbeitungsbildschirm der Bestellungen-Seite und klicken Sie auf + Panel hinzufügen.

2. Sobald es erscheint, klicken Sie auf + Paneltyp wählen.

3. Der Paneltyp sollte wieder Formular sein. Die Panelquelle sollte Kunde (Quelle) sein, da wir Informationen darüber möchten, wer die Bestellung aufgibt. Sie können den App Builder alle Steuerungen automatisch auswählen lassen, da wir sie in den nächsten Schritten selbst organisieren werden.

4. Klicken Sie auf Weiter und dann auf Veröffentlichen. Der App Builder wird dieses neue Panel automatisch mit dem Haupt-Bestellungen-Panel unter Verwendung von CustomerID als Bindungskriterium verknüpfen.

5. Wenn der App Builder die Seite aktualisiert, ändern Sie den Namen des neuen Panels in Kundeninformationen und klicken Sie auf Speichern.

6. Jetzt organisieren wir die Steuerelemente im neuen Panel. Gehe zu seinem Bearbeitungsbildschirm und klicke auf + Control.

7. Diesmal wählen wir jedoch einen anderen Typ von Organizer. Wähle im Feld Control Type Tab aus. Gib diesem ersten Tab den Namen Customer Tab. Öffne dann das Tab-Steuerelement und setze sein Label auf Customer.

8. Wiederhole die Schritte 6 und 7, um einen weiteren Tab mit dem Namen Contact zu erstellen.

9. Wenn die neuen Tabs bereit sind, gehe die Steuerelemente durch und verteile sie auf die beiden Tabs. Welche Steuerelemente denkst du, passen am besten unter jeden? Wenn du fertig bist, schaue dir die Vorschau der Orders-Seite an, und das Customer Information-Panel wird die beiden von dir erstellten Tabs haben:

   

Verwende Panelgruppen, um deine Seite zu organisieren

Obwohl wir gebundene Panels verwenden konnten, um die Informationen auf unserer Orders-Seite zu unterteilen, haben wir jetzt ein neues Problem, da die vier Panels um Platz auf dem Bildschirm kämpfen und es momentan nicht sehr leserlich ist. Wir werden dieses Problem mit Panelgruppen beheben, mit denen wir Panels auf unseren Seiten organisieren können, um ihr Aussehen zu verbessern.

1. Klicke im Bearbeitungsbildschirm der Orders-Seite auf die Schaltfläche Groups unter dem Panel Page Panel Layout.

2. Klicke auf + Group.

3. Wähle im Feld Parent Orders (Page), die Seite, die wir erstellen. Gib der Gruppe den Namen Top row.

4. Wähle im Feld Layout Side by side aus.

5. Klicke auf das -Symbol, um zu speichern.

Als Nächstes verlasse den Dialog zur Gruppenerstellung und wähle das Orders-Panel aus. Wir möchten es in der oberen Reihe haben, also finde im Tab Panel die Eigenschaft Position und wähle im Feld Parent Top row aus. Klicke auf Save. Wir möchten auch die Panels Shipping Information und Customer Information in der oberen Reihe, also wiederhole den Prozess für sie. Verwende die Zahlen im Feld Order, um zu bestimmen, welches Panel zuerst kommt.

Jetzt erstelle eine zweite Gruppe, aber gib ihr diesmal den Namen Bottom row. Sie wird das Panel Order Details enthalten, das wir so gestalten möchten, dass es den gesamten unteren Bereich des Bildschirms einnimmt. Stelle daher sicher, dass die Zahl im Feld Order größer ist als das entsprechende Feld in der ersten Gruppe. Sobald du die neue Gruppe erstellt hast, stelle sicher, dass du sie als Parent des Panels Order Details zuweist.

Schließlich ändern Sie im Bearbeitungsbildschirm der Bestellung die Layout-Einstellung auf Gestapelt. Der App Builder wird dann die beiden Gruppen entsprechend der numerischen Reihenfolge der beiden Gruppen stapeln. Wenn Sie die Seite aktualisieren, sollte das Seitenpanel-Layout so aussehen:

Und die Vorschau der Bestellungen-Seite sollte so aussehen:

Welche weiteren Verbesserungen können Sie an der Bestellungen-Seite vornehmen? Zum Beispiel haben wir im obigen Screenshot eine Mitarbeiter-Steuerung zum Bestellungen-Panel hinzugefügt, damit die Benutzer sehen können, mit welchem Mitarbeiter ein Kunde bei der Bestellung gesprochen hat. Wie würden Sie diese Steuerung zu Ihrem Bestellungen-Panel hinzufügen? Hier sind einige weitere Ideen für Verbesserungen:

• Werden alle Preise korrekt als Währungen angezeigt?

• Werden alle Rabatte als Prozentsätze angezeigt?

• Wie können Sie eine Kategorie-Steuerung zum Bestelldetails-Panel hinzufügen, wie im obigen Screenshot?

• Sollten Sie Endbenutzern erlauben, die Einträge in den Panels Versandinformationen und Kundeninformationen zu löschen? Wie können Sie verhindern, dass sie dies tun?

Überprüfung und Zusammenfassung

In dieser Lektion haben wir das Konzept des Bindens verwendet, um unsere Seiten reaktionsfähiger und vollständiger zu gestalten. In den nächsten Lektionen werden wir unser Verständnis der Entwicklungskonzepte im App Builder weiter verbessern. Fahren Sie fort mit Lektion 7: Mehr über Regeln.