Einführung in App Builder - Anhang C: Die UI-Schicht in App Builder (Fortgeschritten)

Dies ist der dritte Anhang der Einführung in App Builder-Tutorialserie. Diese Anhänge ergänzen die Lektionen der Serie und bieten tiefere Informationen zu den eingeführten Konzepten.

In dieser Lektion tauchen wir tiefer in die UI-Schicht von App Builder ein – den Bereich, in dem wir direkt kontrollieren, was Endbenutzer sehen und mit dem sie interagieren.

Kachel-Panels

Das Erstellen von Seiten mit Kachel-Panels ermöglicht es uns, Informationen aus einer bestimmten Geschäftsregel anzuzeigen, genau wie die Grid-Panels, die wir in den Tutorials verwendet haben. Die Wahl zwischen dem einen oder dem anderen hängt von der ästhetischen Vorliebe ab. Bei Kachel-Panels erfolgt der Zugriff auf Aktionen zum Erstellen, Bearbeiten oder Löschen über eine verknüpfte Seite.

Zur Demonstration konvertieren wir unsere vorhandene Seite Employees von Grid-Panels zu Kachel-Panels.

1. Rufen Sie die Vorschau der Seite Employees auf.

2. Klicken Sie auf das Hamburger-Symbol, um die Aktionsleiste zu öffnen, und wählen Sie dann Live Designer.

3. Klicken Sie auf das Panel Employees, damit der Live Designer Optionen dafür anzeigt.

4. Ändern Sie auf der Registerkarte Panel die Auswahl von Grid zu Tile.

5. Beachten Sie das Feld Tile Width, das angezeigt wird. Diese Einstellung, die nur für Kachel-Panels verfügbar ist, steuert die Breite jeder einzelnen Kachel. Die Höhe wird automatisch durch die Anzahl der auf der Kachel angezeigten Steuerelemente bestimmt. Lassen Sie sie vorerst auf dem Standardwert.

6. Klicken Sie auf Save.

Dies transformiert die Seite Employees, da die einzelnen Einträge im Geschäftsobjekt Employees nun in Kacheln statt in einer Liste angezeigt werden. Die Kacheln haben jedoch jetzt zu viele Steuerelemente. Kacheln sehen am besten aus, wenn sie zwischen drei und fünf Steuerelementen haben. Bearbeiten Sie daher die Liste der Steuerelemente entweder über den Live Designer oder über die App Workbench und wählen Sie die aus, die Sie für am wichtigsten halten. Wenn Sie fertig sind, sieht Ihre Seite Employees etwa so aus:

Chart-Panels

App Builder bietet mehrere Arten von Chart-Panels. Die Anzeige von Diagrammen auf Ihren Seiten kann ein leistungsstarkes visuelles Werkzeug sein. Um Chart-Panels auf Ihren Seiten zu verwenden, müssen die Geschäftsobjekte, die die Seiten speisen, Aggregatwerte haben. Wir demonstrieren dies, indem wir ein Geschäftsobjekt erstellen, das dazu dient, eine Seite zu erstellen, die die Mitarbeiter in einem Diagramm organisiert nach der Gesamtbestellung jedes Mitarbeiters anzeigt.

1. Gehen Sie zu App Workbench > Rules und klicken Sie auf + Rule.

2. Geben Sie der neuen Regel den Namen OrderDetail (Total by Employee), wählen Sie dann Chart im Feld Purpose und OrderDetail in Target. Klicken Sie auf Create.

3. Wenn App Builder die Regel erstellt, fügen Sie die Tabelle Order auf der Registerkarte Tables hinzu und wählen Sie die Spalte EmployeeID. Dies ist die einzige vorhandene Spalte, die wir benötigen. Wenn App Builder automatisch andere ausgewählt hat, heben Sie deren Auswahl auf.

4. Führen Sie auf der Registerkarte Joins einen inneren Join durch, wobei Sie Order als Left-Spalte und Order Detail als Right verwenden.

5. Stellen Sie auf der Registerkarte Joins sicher, dass das Panel Join Columns die Spalten OrderID beider Tabellen verbindet.

6. Klicken Sie auf der Registerkarte Columns auf + Column und geben Sie in das Feld Column or Expression diese Syntax ein:

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

   Geben Sie unter Alias SumLineTotal ein.

7. Klicken Sie auf Save.

8. Weisen Sie auf der Registerkarte Columns jeder der beiden Spalten einen Usage Type zu:

   • Wählen Sie für EmployeeID die Option Category. Dies definiert, wie die Daten gruppiert werden (z. B. die Beschriftungen auf der X-Achse eines Balkendiagramms).

   • Wählen Sie für die Spalte SumLineTotal, die wir erstellt haben, die Option Value. Dies stellt die numerischen Daten dar, die im Diagramm angezeigt werden sollen (z. B. die Höhe der Balken auf der Y-Achse).

9. Klicken Sie im Panel Rule auf Results, um sicherzustellen, dass die Regel die Gesamtsumme berechnet, die von jedem Mitarbeiter verkauft wurde, wie folgt:

   

Jetzt, da das Geschäftsobjekt, das wir benötigen, bereit ist, erstellen wir unsere Chart-Panels-Seite.

1. Gehen Sie zu App Workbench > Seiten und klicken Sie auf + Seite.

2. Geben Sie unter Seitennamen eingeben Bestellsumme nach Mitarbeiter ein. Klicken Sie auf Weiter.

3. Wählen Sie Berichte als Menü aus. Dies platziert die neue Seite unter einem neuen Menü namens Berichte, das zwischen Startseite und Konfiguration angezeigt wird. Klicken Sie auf Weiter.

4. Wählen Sie Vollständige Seite als Seitenlayout aus. Klicken Sie auf Weiter und Fertig.

5. Nachdem App Builder die Seite erstellt hat, klicken Sie auf + Paneltyp auswählen.

6. Wählen Sie Diagramm als Paneltyp aus. Klicken Sie auf Weiter.

7. Wählen Sie OrderDetail (Total by Employee) als Quellpanel aus. Klicken Sie auf Weiter und Fertig.

App Builder erstellt die Seite und Sie können deren Vorschau aufrufen:

Diagrammdaten sortieren

Sie können Sortierungen auf Ihre Diagramme anwenden, um diese leichter interpretierbar und analysierbar zu machen. Ein Diagramm lässt sich nach seiner Wertspalte oder nach völlig anderen Kriterien sortieren, die nicht in der Tabelle enthalten sind. Zur Veranschaulichung sortieren wir unser Diagramm nach dem Einstellungsdatum der Mitarbeiter.

1. Gehen Sie zu App Workbench > Regeln und suchen Sie die Seite OrderDetail (Total by Employee). Dies ist das Geschäftsobjekt, auf dem das Diagramm basiert.

2. Suchen Sie auf der Registerkarte Tabellen die Tabelle Employee und wählen Sie die Spalte HireDate aus.

3. Öffnen Sie anschließend unter App Workbench > Seiten die Seite Bestellsumme nach Mitarbeiter und gehen Sie zu deren Steuerelementseite.

4. Klicken Sie auf + Steuerelement, um ein neues Steuerelement hinzuzufügen. Wählen Sie im Dialogfeld Steuerelement hinzufügen die Spalte Hire Date aus. Wichtig: Wählen Sie im Feld Steuerelementtyp die Option Sortieren aus. Schließen Sie das Hinzufügen des neuen Steuerelements ab.

5. (Optional) Nachdem das neue Steuerelement hinzugefügt wurde, klicken Sie auf sein -Symbol am Ende der Zeile und besuchen Sie die Registerkarte Position & Breite. Im Feld Sortierrichtung können Sie zwischen ASC (aufsteigend) und DESC (absteigend) wechseln.

Wenn Sie die Seitenvorschau jetzt erneut aufrufen, sehen Sie, dass die Balken nach dem Einstellungsdatum der Mitarbeiter angeordnet sind.

Diagramm-Drilldown hinzufügen

Diagrammpanels können durch Hinzufügen von Navigation interaktiv gestaltet werden, sodass Benutzer in die Daten „einsteigen" können. In dem Beispiel, das wir verwenden, können Sie das Diagramm so konfigurieren, dass beim Klicken auf den Balken eines bestimmten Mitarbeiters der Benutzer zur Seite Bestellungen navigiert wird, gefiltert, um nur die Bestellungen dieses Mitarbeiters anzuzeigen.

1. Kehren Sie zur Liste Steuerelemente für die Seite Bestellsumme nach Mitarbeiter zurück.

2. Klicken Sie auf das -Symbol am Ende der Zeile, um das Steuerelement Sum Line Total (das Wertsteuerelement) zu bearbeiten.

3. Öffnen Sie die Registerkarte Edge Case.

4. Öffnen Sie den Abschnitt Rare Navigation Settings.

5. Wählen Sie im Feld Link To Page die Seite Orders aus.

6. Klicken Sie auf das -Bindungssymbol, um sicherzustellen, dass App Builder die beiden Seiten korrekt gebunden hat. Die Quellspalte sollte EmployeeID (PK) sein.

Wenn Sie das Diagramm anzeigen, können Sie auf einen beliebigen Balken klicken, um zur Seite Bestellungen zu gelangen, die automatisch gefiltert wird, um nur die Bestellungen anzuzeigen, die von den Kunden des angeklickten Mitarbeiters aufgegeben wurden.

Andere Diagrammformen

Diagramme können mit mehreren Kategorien oder Werten konfiguriert werden, um komplexere Datenbeziehungen anzuzeigen.

• Mehrere Kategorien: Sie können Daten nach mehr als einer Kategorie gruppieren. Wenn Sie beispielsweise Region als primäre Kategorie und Employee als sekundäre Kategorie hinzufügen, werden die Verkäufe zunächst nach Region und dann nach Mitarbeiter innerhalb jeder Region gruppiert. Dies wird häufig mit einem gestapelten oder gruppierten Balkendiagramm visualisiert.

• Mehrere Werte: Sie können mehrere numerische Werte für jede Kategorie anzeigen. Dies ist bei gemischten Diagrammtypen üblich, bei denen Sie Verkaufssummen als Balken (auf einer Y-Achse) und durchschnittlichen Rabatt als Linie (auf einer zweiten Y-Achse) für denselben Mitarbeiter anzeigen könnten.

Übungszeit: Fügen Sie eine zweite Kategorie hinzu

Ändern Sie das Business Object OrderDetail (Total by Employee), um eine zweite Kategorie einzubeziehen. Verbinden Sie sich mit der Tabelle Employee, fügen Sie die Spalte RegionID hinzu, und setzen Sie ihren Usage Type auf Category. Zeigen Sie dann das Diagramm erneut an, um zu sehen, wie es sich ändert. Möglicherweise müssen Sie den Diagrammtyp (z. B. in ein gestapeltes Säulendiagramm) in den Paneleinstellungen anpassen, um die neue Datenstruktur optimal zu visualisieren.

Erweiterte Datenvisualisierung

Über Standard-Diagramme hinaus bietet App Builder spezialisierte Panels zur geografischen, chronologischen oder linearen Visualisierung von Daten. In diesem Abschnitt zeigen wir die anderen Panel-Typen, die App Builder unterstützt.

Kalender-Panels

Kalender-Panels eignen sich hervorragend zur Visualisierung von Ereignissen im Zeitverlauf. Wir fügen der Seite Customers einen Kalender hinzu, der anzeigt, wann die Bestellungen eines bestimmten Kunden versandt wurden.

1. Erstellen Sie das Business Object:

   1. Gehen Sie zu App Workbench > Rules und klicken Sie auf + Rule.

   2. Nennen Sie es Order (Calendar).

   3. Setzen Sie Purpose auf Calendar und Target auf Order.

   4. Klicken Sie auf Create.

   5. Wählen Sie auf der Registerkarte Tables die Optionen OrderNumber, ShippedDate und CustomerID aus.

   6. Setzen Sie auf der Registerkarte Columns den Usage Type für OrderNumber auf Description und ShippedDate auf Start.

2. Fügen Sie das Panel hinzu:

   1. Gehen Sie zur Seite Customers.

   2. Fügen Sie ein neues Panel vom Typ Calendar hinzu und wählen Sie Order (Calendar) als Quelle aus.

   3. App Builder sollte dieses Panel automatisch an das Haupt-Panel Customers mit CustomerID binden.

   4. Nennen Sie das Panel Order Calendar.

Wenn Sie nun einen Kunden auswählen, zeigt dieser Kalender seine Lieferungen an.

Zusätzlich können Sie den Kalender auch mit der Seite Orders verknüpfen. Auf diese Weise können Benutzer, wenn sie einen Kunden auswählen und seine Bestellungen im Kalender angezeigt werden, auf jede einzelne klicken und werden zu den Details dieser Bestellung weitergeleitet. Führen Sie diese Schritte aus:

1. Navigieren Sie zur Vorschau der Seite Customers.

2. Öffnen Sie den Live Designer und wählen Sie das Kalender-Panel aus.

3. Wählen Sie auf der Registerkarte Update Methods die Option Orders unter Link To Page aus. App Builder sollte die beiden Seiten automatisch binden, aber Sie können überprüfen, ob das Bindungskriterium das Feld OrderID ist.

4. Klicken Sie auf Save.

Wenn Sie nun einen Kunden auf der Seite Customers auswählen und seine Bestellungen im Kalender angezeigt werden, können Sie auf jede einzelne klicken, um zur Seite Orders zu gelangen und Details anzuzeigen.

Karten-Panels

Karten-Panels ermöglichen die Visualisierung von Daten auf einer geografischen Karte. Wir erstellen eine Karte, die die Anzahl der Kunden pro Land anzeigt.

1. Erstellen Sie das Business Object:

   1. Erstellen Sie eine neue Regel namens Customer (Map).

   2. Setzen Sie Purpose auf Map und Target auf Customer.

   3. Fügen Sie auf der Registerkarte Columns einen Count-Ausdruck hinzu: Count(1) und geben Sie ihm den Alias CustomerCount. Setzen Sie seinen Usage Type auf Value.

   4. Fügen Sie eine Spalte für das Land hinzu. Um die Benennungsabweichung zu beheben, verwenden Sie diesen Ausdruck: REPLACE(REPLACE(Country, 'USA', 'United States of America'), 'UK', 'United Kingdom').

   5. Geben Sie dieser Spalte den Alias NormalizedCountry und setzen Sie ihren Usage Type auf Category.

2. Fügen Sie das Panel hinzu:

   1. Fügen Sie der Seite Customers ein neues Panel vom Typ Map hinzu.

   2. Wählen Sie Customer (Map) als Quelle aus.

   3. Wählen Sie im Feld Map Source (in den Panel-Einstellungen) die Option custom/world aus.

Die Seite Customers zeigt nun eine Wärmekarte, die anzeigt, wo sich Ihre Kunden weltweit befinden.

Gantt-Panels

Gantt-Diagramme werden für Planung und Zeitpläne verwendet. Wir verwenden eines, um die Dauer von Bestellungen (vom Bestelldatum bis zum Versanddatum) zu visualisieren.

1. Geschäftsobjekt erstellen:

   1. Erstelle eine neue Regel mit dem Namen Order (Gantt).

   2. Setze den Zweck auf Gantt und das Ziel auf Order.

   3. Klicke auf Erstellen.

   4. Wähle auf der Registerkarte Tabellen die Optionen OrderNumber, OrderDate, ShippedDate und CustomerID aus.

   5. Lege auf der Registerkarte Spalten die folgenden Verwendungstypen fest:

      • OrderNumber: Task

      • OrderDate: Start

      • ShippedDate: End

2. Panel hinzufügen:

   1. Füge ein neues Panel vom Typ Gantt zur Seite Customers hinzu.

   2. Wähle Order (Gantt) als Quelle aus.

   3. Stelle sicher, dass es nach CustomerID gebunden ist.

Mit Registerkarten organisieren

Du hast jetzt drei neue Panels auf deiner Seite Customers, was die Seite möglicherweise überladen wirken lässt. Um die Seite übersichtlich zu halten, platzieren wir alle diese neuen Panels in einer Registerkartenpanelgruppe (ein Konzept, das in Lektion 6 eingeführt wurde). Führe diese Schritte aus:

1. Erstelle auf dem Bearbeitungsbildschirm der Seite Customers eine neue Panelgruppe.

2. Setze das Layout auf Tabbed.

3. Füge deine Panels Order Calendar, Customer Map und Order Gantt zu dieser Gruppe hinzu.

Du hast jetzt ein ausgefeiltes Dashboard, mit dem du zwischen einer Zeitleiste, einer Karte und einem Zeitplan der Aktivitäten deiner Kunden wechseln kannst. So sieht die Seite Customers jetzt aus, mit dem hervorgehobenen Kalenderdiagramm (beachte aber auch die Registerkarten, mit denen du die anderen Diagramme sehen kannst):

Netzwerkdiagramme

Netzwerkdiagramme werden verwendet, um Beziehungen zwischen Entitäten zu visualisieren. Damit können wir die Berichtsstruktur unserer Mitarbeiter visualisieren.

1. Geschäftsobjekt erstellen:

   1. Erstelle eine neue Regel mit dem Namen Employee (Network).

   2. Setze den Zweck auf Network Graph und das Ziel auf Employee.

   3. Klicke auf Erstellen.

   4. Wähle EmployeeID, ReportsToEmployeeID und LastName aus.

   5. Setze den Verwendungstyp für EmployeeID auf Node und ReportsToEmployeeID auf From.

   6. Optional kannst du LastName als Node Label festlegen, damit Namen statt IDs im Diagramm angezeigt werden.

2. Panel hinzufügen:

   1. Füge ein neues Panel vom Typ Network Graph zur Seite Employees hinzu.

   2. Wähle Employee (Network) als Quelle aus.

   3. Füge es zur Panelgruppe hinzu, die die anderen drei Panels enthält, um die Seite übersichtlich zu halten.

Anfangs sieht das Panel auf der Seite so aus. In den Panel-Einstellungen kannst du das Layout und die Farben anpassen, um die Hierarchie besser zu visualisieren:

Pivot-Panels

Pivot-Panels ermöglichen es dir, große Datenmengen zusammenzufassen, indem du zwei verschiedene Kategorien miteinander vergleichst. Wir erstellen eine Pivot-Tabelle, die den Gesamtumsatz pro Kunde (Zeile) aufgeschlüsselt nach Produktkategorie (Spalte) anzeigt.

1. Geschäftsobjekt erstellen:

   1. Erstelle eine neue Regel mit dem Namen Order (Pivot).

   2. Setze den Zweck auf Pivot und das Ziel auf Order.

   3. Füge auf der Registerkarte Tabellen die Tabellen OrderDetail, Product, Category und Customer hinzu.

   4. Füge auf der Registerkarte Spalten die Optionen Customer und Category aus ihren jeweiligen Tabellen sowie den folgenden Ausdruck für den Gesamtpreis hinzu (denke daran, ihm einen aussagekräftigen Alias zu geben): Sum(OD.Quantity * OD.UnitPrice).

2. Erstelle eine Seite, um das neue Panel hinzuzufügen:

   1. Erstelle eine neue Seite mit dem Namen Sales Pivot. Platziere sie im Menü Reports und verwende ein Vollseiten-Layout.

   2. Füge ein Panel vom Typ Pivot hinzu und wähle Order (Pivot) als Quelle aus.

   3. In den Einstellungen Controls:

      1. Setze Customer als Row.

      2. Setze Category als Column.

      3. Setze den Ausdruck, den du erstellt hast (mit dem Alias, den du ihm gegeben hast), als Value.

Wenn du die Seitenvorschau besuchst, solltest du eine Pivot-Tabelle sehen, die die Gesamtbestellungen nach Kunde anzeigt, organisiert nach Kategorie.

Erweiterte Panel-Layouts

Neben Standard-Gittern und Formularen bietet App Builder Layouts für spezifische Navigations- und Anzeigeaufgaben.

Lane-Panels

Lane-Panels ermöglichen es, Datensätze in vertikalen oder horizontalen Spuren zu gruppieren, ähnlich wie ein Kanban-Board. Konvertieren wir unsere Products-Seite, um dieses Layout zu verwenden.

1. Panel konvertieren:

   1. Navigieren Sie zur Products-Seite.

   2. Öffnen Sie den Live Designer und wählen Sie das Products-Panel.

   3. Ändern Sie den Panel Type von Grid zu Lane.

   4. Klicken Sie auf Save.

2. Gruppierung konfigurieren:

   1. Gehen Sie zu den Controls-Einstellungen im Seiten-Bearbeitungsbildschirm.

   2. Klicken Sie auf + Control und fügen Sie CategoryID als Control mit dem Namen Category hinzu.

   3. Nachdem das Category-Control hinzugefügt wurde, klicken Sie darauf, um es zu bearbeiten. Aktivieren Sie im Tab Position & Width das Kontrollkästchen Group By. Dies teilt App Builder mit, für jede Produktkategorie eine separate Spur zu erstellen.

3. Panel-Einstellungen anpassen:

   1. Kehren Sie zum Seiten-Bearbeitungsbildschirm zurück.

   2. Öffnen Sie im Tab Edge Case den Bereich General und geben Sie 100 im Feld Rows Per Request ein. Da Lane-Panels visuell mehr Daten anzeigen als Gitter, stellt die Erhöhung dieses Limits sicher, dass Kategorien nicht leer aussehen.

Die Products-Seite sieht jetzt so aus:

Frame-Panels

Frame-Panels fungieren als Container, die andere Seiten in sich laden. Dies ist der Mechanismus hinter der Standard-Anwendungsseitenleiste.

• Funktionsweise: Ihre Home-Seite enthält normalerweise ein Menu-Panel (die Seitenleiste) und ein Frame-Panel (der Hauptinhaltsbereich). Wenn Sie auf einen Link in der Seitenleiste klicken, wird die Zielseite innerhalb des Frame-Panels geladen, anstatt das gesamte Fenster zu navigieren.

• Aus dem Frame ausbrechen: Manchmal möchten Sie, dass ein Link aus dem Frame ausbricht (z. B. eine Schaltfläche „Abmelden" oder ein großer Bericht). Konfigurieren Sie dazu das Target-Verhalten des Links auf Popup oder verwenden Sie eine Redirect-Aktion, die die Navigation auf der obersten Fensterebene erzwingt.

Erweiterte Formularlogik: Sichtbarkeitsregeln

In Lektion 4 haben wir mehr über Form-Panels gelernt. Mit Sichtbarkeitsregeln können wir steuern, welche Felder in einem Formular angezeigt werden.

Statische Sichtbarkeit

Eine statische Sichtbarkeitsregel legt eine Regel fest, die immer wahr ist. Stellen wir beispielsweise sicher, dass das Feld Country im Formular Employee immer erforderlich ist.

1. Gehen Sie zum Seiten-Bearbeitungsbildschirm Employees.

2. Wählen Sie das Employees-Panel, um seine Bearbeitungsoptionen anzuzeigen.

3. Klicken Sie auf More > Visibilities.

4. Klicken Sie auf Register, um eine neue Sichtbarkeitsregel zu erstellen.

   1. Setzen Sie Type auf Static.

   2. Setzen Sie Column auf Country.

   3. Setzen Sie Value auf Require.

   4. Klicken Sie auf Save.

Dynamische Sichtbarkeitsregeln

Die Sichtbarkeit kann sich auch basierend auf Daten ändern. Beispielsweise ist das Feld State für US-Adressen relevant, aber nicht für UK-Adressen (in unserem Datensatz). Blenden wir das Feld State aus, es sei denn, das Land ist „USA".

1. Logikregel erstellen:

   1. Gehen Sie zu App Workbench > Rules und klicken Sie auf + Rule.

   2. Nennen Sie es Employee (Visibility).

   3. Setzen Sie Purpose auf Visibility und Target auf Employee.

   4. Fügen Sie im Tab Columns einen neuen Spaltenausdruck hinzu, um die Logik zu definieren: IIF(Country = 'USA', 'Require', 'Hide').

   5. Wenden Sie diesen Ausdruck auf die Spalte State an.

2. Regel anwenden:

   1. Kehren Sie zu den Visibilities-Einstellungen des Employee-Panels zurück.

   2. Klicken Sie auf Register und setzen Sie Type auf Rule.

   3. Wählen Sie Employee (Visibility) als Regel.

Wenn Sie einen Mitarbeiter bearbeiten, wird das Feld State ausgeblendet, wenn das Land nicht „USA" ist, und wird erforderlich, wenn es „USA" ist.

Badges

Ein Badge ist ein kleiner Indikator auf einer Schaltfläche, der eine dynamisch aktualisierte Anzahl anzeigt. Badges sind nützlich, um Benutzern auf einen Blick Informationen anzuzeigen, z. B. die Anzahl der Bestellungen für einen Kunden oder Aufgaben in einer Warteschlange.

Zur Demonstration fügen wir der Seite Customers eine Schaltfläche hinzu, die zu einer Liste der Bestellungen dieses Kunden navigiert. Die Schaltfläche zeigt ein Badge mit der Gesamtzahl der Bestellungen dieses Kunden an.

Zunächst benötigen wir ein Business Object, das die Bestellungen für jeden Kunden zählen kann. Eine Subquery ist dafür perfekt.

1. In App Workbench > Rules auf + Rule klicken.

2. Die Rule mit den folgenden Einstellungen konfigurieren:

   • Im Feld Name Order (Count by Customer) eingeben.

   • Im Feld Purpose Subquery auswählen.

   • Im Feld Target Customer auswählen.

3. Auf Create klicken.

4. Im Tab Tables die Tabelle Order hinzufügen.

5. Im Tab Joins einen Left Outer Join von Customer (Left) zu Order (Right) auf CustomerID erstellen. Ein Left Outer Join stellt sicher, dass Kunden mit null Bestellungen trotzdem in den Ergebnissen enthalten sind.

6. Im Tab Columns zwei Spalten hinzufügen:

   1. Die Spalte CustomerID aus der Tabelle Customer auswählen.

   2. Auf + Column klicken, um einen Ausdruck zu erstellen:

      • Column or Expression: IsNull(Count(O.OrderID), 0)

      • Alias: OrderCount

      Dieser Ausdruck verwendet die Funktion IsNull(), um die Bestellungen für jeden Kunden zu zählen. Mit dieser Funktion wird sichergestellt, dass das Badge 0 anzeigt, wenn ein Kunde keine Bestellungen hat.

7. Auf Save klicken.

Anschließend müssen wir diese Anzahl zu unserem Haupt-Business Object Customer (Source) hinzufügen.

1. In App Workbench > Rules das Business Object Customer (Source) öffnen.

2. Im Tab Tables auf + Tables klicken und die gerade erstellte Subquery Order (Count by Customer) hinzufügen.

3. Im Tab Joins einen Inner Join zwischen Customer (Left) und der Subquery (Right) auf CustomerID erstellen.

4. Im Tab Columns auf + Column klicken. Die Spalte OrderCount aus der Subquery Rule auswählen, um sie für Seiten verfügbar zu machen, die dieses Business Object verwenden.

Abschließend konfigurieren wir die Schaltfläche und ihr Badge auf der Seite Customers.

1. Zur Seite Customers navigieren und den Live Designer öffnen.

2. Das Panel Customers anklicken und dann auf + Control klicken.

3. Die Schaltfläche konfigurieren:

   • Im Dropdown Control Type Button auswählen.

   • Im Feld Name Orders eingeben.

   Hinweis

   Das Feld Column leer lassen, da das Zuweisen einer Spalte hier dazu führen würde, dass der Wert dieser Spalte als Beschriftungstext der Schaltfläche verwendet wird. In unserem Fall möchten wir den statischen Text „Orders" verwenden.

4. Auf Next klicken, um zu den Einstellungen Navigation zu gelangen. Im Dropdown Link to Page Orders auswählen. App Builder erstellt die Bindung auf CustomerID automatisch.

5. Auf Next und Finish klicken.

6. Die neu erstellte Schaltfläche Orders auswählen, damit der Live Designer Optionen dafür anzeigt.

7. Im Tab Button den Bereich Miscellaneous (Button) öffnen.

8. Im Dropdown Badge Source (Column) OrderCount auswählen.

9. Auf Save klicken und den Live Designer beenden.

Jetzt sollte für jeden Kunden eine Schaltfläche Orders mit einem Badge angezeigt werden, das die Gesamtzahl seiner Bestellungen anzeigt. Durch Klicken auf die Schaltfläche gelangen Sie zur Seite Orders, auf der die Bestellungen dieses Kunden bereits ausgewählt sind.

Further learning

Dies schließt diese tiefgehende Betrachtung der Details der UI-Schicht von App Builder ab. Falls noch nicht geschehen, siehe Appendix A für einen genaueren Blick auf die Datenschicht, Appendix B für die Business-Schicht oder Appendix D für die Sicherheitsschicht.

Um mehr über App Builder zu erfahren, besuchen Sie Jitterbit University.