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 wir sie mithilfe von Binding zusammenarbeiten lassen.

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 Sie Bestellung (Quelle) als Panelquelle verwenden. 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 einfach alle Bestellungen aufgelistet sind, die in der Datenbank vorhanden sind.

Jetzt fügen wir der Seite Bestellungen ein zweites Panel 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 dann auf Fertigstellen.

Da die Bestellung-Tabelle einen Fremdschlüssel hat, der mit der BestellDetail-Tabelle verbunden ist, und die beiden Panels Daten aus Regeln abrufen, 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 Benutzerauswahl 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 jetzt mit zwei Panels in der Vorschau anzuzeigen. Testen Sie, indem Sie verschiedene Zeilen im Elternpanel auswä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 Preissummen berechnet und anzeigt.

1. Gehen Sie zu App Workbench > Regeln, greifen Sie auf die Regel OrderDetail (Quelle) zu und klicken Sie auf 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 jetzt 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 Einzelpreis-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 erlaubt, die Einzelpreis-Spalte zu bearbeiten.

Verbesserungen der Bestellseite

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.

Steuergruppen

Steuergruppen sind eine Möglichkeit, Steuerelemente innerhalb eines Panels zu organisieren. Es gibt drei Typen:

• Accordion: Klappt eine Gruppe von Steuerelementen unter einem beschrifteten Header zusammen und wieder auf, nützlich zum Gruppieren verwandter Felder, die Benutzer möglicherweise nicht immer sehen müssen.

• Tab: Teilt Steuerelemente über benannte Tabs auf, sodass Benutzer zwischen verschiedenen Ansichten im selben Panel wechseln können.

• Feldgruppe: Gruppiert mehrere Steuerelemente und ordnet sie entweder horizontal oder vertikal an. Nützlich für kompakte Felder, die logisch zusammengehören (zum Beispiel Stadt, Bundesland und Postleitzahl).

Die folgenden Abschnitte zeigen jeden dieser Typen in der Praxis.

Accordion

Das Bestellungen-Panel hat zu viele Steuerelemente. Werfen Sie einen Blick darauf in der Vorschau der Bestellungen-Seite. Es gibt so viele Steuerelemente, 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 das Hauptpanel Bestellungen. Diesmal wählen Sie jedoch die Steuerelemente des neuen Panels manuell aus. Wenn der Bildschirm Spalten auswählen erscheint, wählen Sie nur die folgenden Spalten aus: Versender, Versandname, Versandadresse, Versandstadt, Versandbundesland, Versandpostleitzahl, Versandland, Erforderliches 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 bindet dieses neue Panel automatisch an das Bestellungen-Panel über die OrderID-Spalte. Da wir nun ein neues Panel zur Anzeige der Versanddetails haben, benötigt das Hauptpanel Bestellungen nicht mehr all diese Steuerelemente. Besuchen Sie den Bearbeitungsbildschirm des Bestellungen-Panels und reduzieren Sie die Anzahl der Steuerelemente dort, sodass nur Bestellnummer und Bestelldatum übrig bleiben, die beiden, die auch nicht im Panel Versandinformationen vorhanden sind.

Das neue Panel Versandinformationen hat jedoch immer noch viele Steuerelemente, also werden wir sie etwas besser organisieren:

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

2. Wenn Sie sich alle verfügbaren Steuerelemente ansehen, können wir sie in zwei Gruppen unterteilen, also werden wir das tun. Klicken Sie auf + Steuerelement.

3. Lassen Sie das Feld Spalte weg, da wir keine neuen Steuerelemente benötigen, wir werden nur die vorhandenen organisieren. Wählen Sie im Feld Steuerelementtyp Akkordeon aus. Geben Sie im Feld Name Versandinfo ein.

4. Klicken Sie auf Weiter und 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 Steuerelemente zurückbringt, sehen Sie, dass die beiden Gruppen jetzt aufgelistet sind. Gehen Sie alle Steuerelemente durch und entscheiden Sie, welches davon in jede Gruppe gehört, indem Sie deren Elternteil auf eine der beiden ändern. Wenn Sie fertig sind und zur Vorschau der Bestellungen-Seite zurückkehren, sollte das Panel Versandinformationen viel organisierter aussehen:

Tab

Lassen Sie uns ein weiteres Panel zur Bestellungen-Seite hinzufügen, denn derzeit zeigt es uns keine Informationen darüber, 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 Form sein. Die Panelquelle sollte Kunde (Quelle) sein, da wir Informationen darüber benötigen, wer die Bestellung aufgibt. Sie können App Builder alle Steuerelemente automatisch auswählen lassen, da wir sie in den nächsten Schritten selbst organisieren werden.

4. Klicken Sie auf Weiter und Veröffentlichen. App Builder wird dieses neue Panel automatisch mit dem Hauptpanel Bestellungen verbinden, wobei CustomerID als Bindungskriterium verwendet wird.

5. Wenn 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. Gehen Sie zu seinem Bearbeitungsbildschirm und klicken Sie auf + Steuerelement.

7. Diesmal wählen wir jedoch einen anderen Typ von Organizer. Wählen Sie im Feld Steuerungstyp Tab aus. Geben Sie diesem ersten Tab den Namen Kunden-Tab. Öffnen Sie dann die Tab-Steuerung und setzen Sie ihr Label auf Kunde.

8. Wiederholen Sie die Schritte 6 und 7, um einen weiteren Tab mit dem Namen Kontakt zu erstellen.

9. Wenn die neuen Tabs bereit sind, gehen Sie die Steuerelemente durch und verteilen Sie sie auf die beiden Tabs. Welche Steuerelemente passen Ihrer Meinung nach am besten unter jeden? Wenn Sie fertig sind, besuchen Sie die Vorschau der Bestellungen-Seite, und das Panel Kundeninformationen wird die beiden von Ihnen erstellten Tabs haben:

   

Feldgruppen

Eine Feldgruppe organisiert mehrere Steuerelemente innerhalb eines Panels. Die Steuerelemente können entweder horizontal (nebeneinander) oder vertikal (gestapelt) angeordnet werden. Dies ist nützlich für kompakte Felder, die logisch miteinander verbunden sind, wie Stadt, Bundesland und Postleitzahl. Lassen Sie uns eine Feldgruppe zum Panel Versandinformationen hinzufügen, und zwar mit einem horizontalen Layout.

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

2. Klicken Sie auf + Steuerelement.

3. Überspringen Sie das Feld Spalte. Wählen Sie im Feld Steuerungstyp Feldgruppe aus. Geben Sie im Feld Name Stadt Bundesland Postleitzahl ein.

4. Klicken Sie auf Weiter und Fertigstellen.

5. Klicken Sie auf das -Symbol am Ende der neuen City State PostalCode-Zeile, um die Einstellungen zu öffnen.

6. Im Tab Control Properties:

   • Setzen Sie Layout Type auf Side by Side.

   • Setzen Sie Sizing Method auf Compress.

   • Setzen Sie Group Borders auf Hidden.

7. Im Tab Label setzen Sie Label Visibility auf Hidden.

8. Klicken Sie auf Save.

9. Kehren Sie zur Steuerungsliste zurück und setzen Sie den Parent der Ship City, Ship State und Ship Postal Code-Steuerelemente auf City State PostalCode.

10. Bleiben Sie in der Steuerungsliste und aktualisieren Sie die Bezeichnungen dieser drei Steuerelemente, um das Präfix "Ship" zu entfernen: benennen Sie Ship City in City, Ship State in State und Ship Postal Code in Postal Code um.

11. Klicken Sie für jedes der drei Steuerelemente auf das -Symbol, gehen Sie zum Tab Control Properties und setzen Sie den Label Type auf Stacked.

Wenn Sie die Orders-Seitenvorschau erneut besuchen, werden Sie sehen, dass das Shipping Information-Panel die Stadt, den Staat und die Postleitzahl in derselben Zeile anzeigt.

Übungszeit: Fügen Sie eine Feldgruppe zum Kundeninformationspanel hinzu

Das Customer Information-Panel hat ebenfalls die Felder City, State und Postal Code. Fügen Sie gemäß den oben genannten Schritten eine Feldgruppe zu diesem Panel hinzu und organisieren Sie diese drei Steuerelemente darin.

Verwenden Sie Panelgruppen, um Ihre 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 lesbar ist. Wir werden dieses Problem mit Panelgruppen beheben, mit denen wir Panels auf unseren Seiten organisieren können, um ihr Aussehen zu verbessern.

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

2. Klicken Sie auf + Group.

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

4. Wählen Sie im Layout-Feld Nebeneinander aus.

5. Klicken Sie auf das -Symbol, um zu speichern.

Schließen Sie nun den Dialog zur Gruppenerstellung und wählen Sie das Bestellungen-Panel aus. Wir möchten es in der obersten Reihe haben, also suchen Sie im Panel-Tab die Position-Eigenschaft und wählen Sie im Eltern-Feld Obere Reihe aus. Klicken Sie auf Speichern. Wir möchten auch die Panels Versandinformationen und Kundeninformationen in der oberen Reihe haben, also wiederholen Sie den Vorgang für diese. Verwenden Sie die Zahlen im Reihenfolge-Feld, um zu bestimmen, welches Panel zuerst kommt.

Erstellen Sie nun eine zweite Gruppe, geben Sie ihr jedoch diesmal den Namen Untere Reihe. Sie wird das Bestelldetails-Panel enthalten, das den gesamten unteren Bereich des Bildschirms einnehmen soll. Stellen Sie daher sicher, dass die Zahl im Reihenfolge-Feld größer ist als das entsprechende Feld in der ersten Gruppe. Nachdem Sie die neue Gruppe erstellt haben, stellen Sie sicher, dass Sie sie als Eltern des Bestelldetails-Panels zuweisen.

Ändern Sie schließlich im Bearbeitungsbildschirm der Bestellung das Layout in Gestapelt. Der App Builder wird dann die beiden Gruppen gemäß 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 beim Aufgeben seiner 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?

• Ziehen Sie in Betracht, die Bearbeitungs- und Löschoptionen für die Panels Versandinformationen und Kundeninformationen zu deaktivieren. Da die Versandinformationen ihre Daten aus der Bestellung-Tabelle beziehen, hätte das Aktivieren von Einfügungen dort keine Auswirkungen (es wäre nicht möglich, einen Bestellposten über dieses Panel zu erstellen). Bei Kundeninformationen wäre es unerwartet, den Benutzern zu erlauben, Kundenposten von der Bestellungen-Seite aus zu bearbeiten oder zu löschen. Verwenden Sie die Einstellungen der Aktualisierungsmethoden in jedem Panel, um diese Operationen zu deaktivieren.

• Wie könnten Sie es Benutzern ermöglichen, neue Bestellungen zu erstellen, während Sie alle erforderlichen Felder erfassen? Erwägen Sie, eine Popup-Seite basierend auf der Bestell (Quelle)-Regel hinzuzufügen und sie mit dem Bestellungen-Panel als Einfügemethode zu verknüpfen.

Ü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.