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

Dies ist der dritte und letzte Anhang der Einführung in den App Builder Tutorialreihe. Diese Anhänge ergänzen die Lektionen der Reihe und bieten detailliertere Informationen zu den eingeführten Konzepten.

In dieser Lektion werden wir tiefer in die UI-Schicht des App Builders eintauchen, den Bereich, in dem wir direkt steuern, was die 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 Raster-Panels, die wir in den Tutorials verwendet haben. Die Wahl zwischen dem einen oder dem anderen hängt von ästhetischen Vorlieben ab. Bei Kachel-Panels erfolgt der Zugriff auf Erstellungs-, Bearbeitungs- oder Löschaktionen über eine verlinkte Seite.

Um dies zu demonstrieren, lassen Sie uns unsere bestehende Mitarbeiter-Seite von Raster-Panels auf Kachel-Panels umstellen.

1. Greifen Sie auf die Vorschau der Mitarbeiter-Seite zu.

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

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

4. Ändern Sie im Tab Panel die Auswahl von Raster auf Kachel.

5. Beachten Sie das erscheinende Feld Kachelbreite. Diese Einstellung, die einzigartig für Kachel-Panels ist, steuert die Breite jeder einzelnen Kachel. Die Höhe wird automatisch durch die Anzahl der auf der Kachel angezeigten Steuerelemente bestimmt. Lassen Sie es vorerst auf dem Standardwert.

6. Klicken Sie auf Speichern.

Dies verwandelt die Mitarbeiter-Seite, da nun die einzelnen Einträge im Mitarbeiter-Geschäftsobjekt in Kacheln anstelle einer Liste angezeigt werden. Allerdings haben die Kacheln jetzt zu viele Steuerelemente. Kacheln sehen am besten aus, wenn sie zwischen drei und fünf Steuerelemente haben, also bearbeiten Sie die Liste der Steuerelemente, entweder im Live-Designer oder im App-Arbeitsbereich, und wählen Sie die aus, die Sie für am wichtigsten halten. Wenn Sie fertig sind, wird Ihre Mitarbeiter-Seite ähnlich wie folgt aussehen:

Chart panels

Der App Builder bietet mehrere Arten von Diagrammpanels. Das Anzeigen von Diagrammen auf Ihren Seiten kann ein leistungsstarkes visuelles Werkzeug sein. Um Diagrammpanels auf Ihren Seiten zu verwenden, benötigen die Geschäftsobjekte, die die Seiten speisen, aggregierte Werte. Wir demonstrieren dies, indem wir ein Geschäftsobjekt erstellen, das dazu dient, eine Seite zu erstellen, die die Mitarbeiter in einem Diagramm anzeigt, das nach dem Bestellwert jedes Mitarbeiters organisiert ist.

1. Gehen Sie zu App Workbench > Regeln und klicken Sie auf + Regel.

2. Geben Sie der neuen Regel den Namen OrderDetail (Total nach Mitarbeiter), wählen Sie dann Diagramm im Feld Zweck und OrderDetail im Feld Ziel. Klicken Sie auf Erstellen.

3. Wenn der App Builder die Regel erstellt, fügen Sie die Order-Tabelle im Tab Tabellen hinzu und wählen Sie die Spalte EmployeeID aus. Dies ist die einzige vorhandene Spalte, die wir benötigen, also deaktivieren Sie alle anderen, die der App Builder möglicherweise automatisch ausgewählt hat.

4. Gehen Sie zum Tab Joins und erstellen Sie einen inneren Join, wobei Order die Linke Spalte und Order Detail die Rechte Spalte ist.

5. Stellen Sie im Tab Joins sicher, dass das Panel Join Columns die OrderID-Spalten beider Tabellen verbindet.

6. Gehen Sie zum Tab Spalten, klicken Sie auf + Spalte und geben Sie im Feld Spalte oder Ausdruck diese Syntax ein:

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

   Geben Sie in Alias SumLineTotal ein.

7. Klicken Sie auf Speichern.

8. Gehen Sie weiterhin im Tab Spalten vor und weisen Sie jeder der beiden Spalten einen Verwendungstyp zu:

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

   • Für die von uns erstellte Spalte SumLineTotal wählen Sie Wert. 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 Regel auf Ergebnisse, um sicherzustellen, dass die Regel den Gesamtverkauf jedes Mitarbeiters berechnet, wie folgt:

   

Jetzt, da das Geschäftsobjekt, das wir benötigen, bereit ist, lassen Sie uns unsere Seite mit den Diagrammpanels erstellen.

1. Gehe zu App Workbench > Seiten und klicke auf + Seite.

2. Gib im Feld Seitenname eingeben Order Total by Employee ein. Klicke auf Weiter.

3. Wähle Berichte als Menü aus. Dadurch wird die neue Seite unter einem neuen Menü namens Berichte platziert, das zwischen Start und Konfiguration erscheint. Klicke auf Weiter.

4. Wähle Vollseite als Seitenlayout. Klicke auf Weiter und dann auf Fertigstellen.

5. Sobald der App Builder die Seite erstellt hat, klicke auf + Paneltyp wählen.

6. Wähle Diagramm als Paneltyp aus. Klicke auf Weiter.

7. Wähle OrderDetail (Total by Employee) als Quellpanel aus. Klicke auf Weiter und dann auf Fertigstellen.

Der App Builder erstellt die Seite und du kannst die Vorschau besuchen:

Diagrammdaten sortieren

Du kannst die Sortierung deiner Diagramme anwenden, um sie leichter zu interpretieren und zu analysieren. Du kannst ein Diagramm nach seiner Wertespalte oder nach einem völlig anderen Kriterium sortieren, das nicht in der Tabelle enthalten ist. Um dies zu demonstrieren, lass uns unser Diagramm nach dem Einstellungsdatum der Mitarbeiter sortieren.

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

2. Gehe zum Tab Tabellen, suche die Tabelle Mitarbeiter und wähle die Spalte Einstellungsdatum aus.

3. Gehe nun zu App Workbench > Seiten, öffne die Seite Order Total by Employee und gehe zu ihrer Steuerungsseite.

4. Klicke auf + Steuerung, um eine neue Steuerung hinzuzufügen. Wähle im Dialogfeld Steuerung hinzufügen die Spalte Einstellungsdatum aus. Wähle im Feld Steuerungstyp unbedingt Sortieren aus. Schließe die Hinzufügung der neuen Steuerung ab.

5. (Optional) Sobald die neue Steuerung hinzugefügt wurde, klicke auf das -Symbol am Ende der Zeile und besuche den Tab Position & Breite. Im Feld Sortierreihenfolge kannst du zwischen ASC (aufsteigend) und DESC (absteigend) wechseln.

Wenn du die Seitenvorschau jetzt erneut besuchst, wirst du sehen, dass die Balken nach dem Einstellungsdatum der Mitarbeiter organisiert sind.

Add chart drill-down

Diagrammpanels können interaktiv gestaltet werden, indem Navigation hinzugefügt wird, die es den Benutzern ermöglicht, in die Daten "hinein zu zoomen". Im verwendeten Beispiel können wir das Diagramm so konfigurieren, dass ein Klick auf die Balken eines bestimmten Mitarbeiters den Benutzer zur Bestellungen-Seite navigiert, gefiltert, um nur die Bestellungen dieses Mitarbeiters anzuzeigen.

1. Kehren Sie zur Steuerung-Liste der Bestellsumme nach Mitarbeiter-Seite zurück.

2. Klicken Sie auf das -Symbol am Ende der Zeile, um die Summe der Liniengesamt-Steuerung (die Wertsteuerung) zu bearbeiten.

3. Öffnen Sie die Edge Case-Registerkarte.

4. Öffnen Sie den Abschnitt Seltene Navigationseinstellungen.

5. Wählen Sie im Feld Link zur Seite die Bestellungen-Seite aus.

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

Jetzt können Sie beim Anzeigen des Diagramms auf jeden Balken klicken, um zur Bestellungen-Seite zu gelangen, die ihre Daten automatisch filtert, um nur die Bestellungen anzuzeigen, die von den Kunden des Mitarbeiters, auf den Sie geklickt haben, aufgegeben wurden.

Other charting forms

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

• Mehrere Kategorien: Sie können Daten nach mehr als einer Kategorie gruppieren. Zum Beispiel würde das Hinzufügen von Region als primäre Kategorie und Mitarbeiter als sekundäre Kategorie die Verkäufe zunächst nach Region und dann nach Mitarbeiter innerhalb jeder Region gruppieren. 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 üblich für gemischte Diagrammtypen, bei denen Sie die Verkaufssummen als Balken (auf einer Y-Achse) und den 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 OrderDetail (Total nach Mitarbeiter) Geschäftsobjekt, um eine zweite Kategorie hinzuzufügen. Verbinden Sie es mit der Employee-Tabelle, fügen Sie die RegionID-Spalte hinzu und setzen Sie ihren Verwendungstyp auf Kategorie. Sehen Sie sich dann das Diagramm erneut an, um zu sehen, wie es sich ändert. Möglicherweise müssen Sie den Diagrammtyp (zum Beispiel auf ein gestapeltes Säulendiagramm) in den Panel-Einstellungen anpassen, um die neue Datenstruktur am besten zu visualisieren.

Erweiterte Datenvisualisierung

Über Standarddiagramme hinaus bietet der App Builder spezialisierte Panels, um Daten geografisch, chronologisch oder linear zu visualisieren. In diesem Abschnitt werden wir die anderen Paneltypen demonstrieren, die der App Builder unterstützt.

Kalender-Panels

Kalender-Panels sind hervorragend geeignet, um Ereignisse über die Zeit zu visualisieren. Wir werden einen Kalender zur Kunden-Seite hinzufügen, der zeigt, wann die Bestellungen eines bestimmten Kunden versandt wurden.

1. Erstellen Sie das Geschäftsobjekt:

   1. Gehen Sie zu App Workbench > Regeln und klicken Sie auf + Regel.

   2. Benennen Sie es Bestellung (Kalender).

   3. Setzen Sie den Zweck auf Kalender und das Ziel auf Bestellung.

   4. Klicken Sie auf Erstellen.

   5. Wählen Sie im Tab Tabellen OrderNumber, ShippedDate und CustomerID aus.

   6. Setzen Sie im Tab Spalten den Verwendungstyp für OrderNumber auf Beschreibung und ShippedDate auf Start.

2. Fügen Sie das Panel hinzu:

   1. Gehen Sie zur Kunden-Seite.

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

   3. Der App Builder sollte dieses Panel automatisch mit dem Hauptpanel Kunden über CustomerID verbinden.

   4. Benennen Sie das Panel Bestellkalender.

Jetzt zeigt dieser Kalender die Sendungen an, wenn Sie einen Kunden auswählen.

Zusätzlich können Sie den Kalender auch mit der Bestellungen-Seite verknüpfen. Auf diese Weise kann der Benutzer, wenn er einen Kunden auswählt und dessen Bestellungen im Kalender angezeigt werden, auf jede einzelne klicken, um zu den Details dieser Bestellung zu gelangen. Befolgen Sie diese Schritte:

1. Navigieren Sie zur Kunden-Seitenvorschau.

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

3. Wählen Sie im Tab Update-Methoden Bestellungen im Link zur Seite aus. Der App Builder sollte die beiden Seiten automatisch verbinden, aber Sie können dies überprüfen, um sicherzustellen, dass das Bindungskriterium das Feld OrderID ist.

4. Klicken Sie auf Speichern.

Jetzt, wenn Sie einen Kunden auf der Kunden-Seite auswählen und deren Bestellungen im Kalender erscheinen, können Sie auf jede einzelne klicken, um zur Bestellungen-Seite zu gelangen und die Details zu sehen.

Karten-Panels

Karten-Panels ermöglichen es Ihnen, Daten auf einer geografischen Karte zu visualisieren. Wir werden eine Karte erstellen, die die Anzahl der Kunden pro Land anzeigt.

1. Erstellen Sie das Geschäftsobjekt:

   1. Erstellen Sie eine neue Regel mit dem Namen Kunde (Karte).

   2. Setzen Sie den Zweck auf Karte und Ziel auf Kunde.

   3. Fügen Sie im Tab Spalten einen Zähl-Ausdruck hinzu: Count(1) und benennen Sie ihn als Kundenanzahl. Setzen Sie den Verwendungstyp auf Wert.

   4. Fügen Sie eine Spalte für das Land hinzu. Um die Namensabweichung zu beheben, verwenden Sie diesen Ausdruck: REPLACE(REPLACE(Country, 'USA', 'Vereinigte Staaten von Amerika'), 'UK', 'Vereinigtes Königreich').

   5. Benennen Sie diese Spalte als NormalisiertesLand und setzen Sie den Verwendungstyp auf Kategorie.

2. Fügen Sie das Panel hinzu:

   1. Fügen Sie ein neues Panel zur Kunden-Seite vom Typ Karte hinzu.

   2. Wählen Sie Kunde (Karte) als Quelle aus.

   3. Wählen Sie im Feld Kartenquelle (zu finden in den Panel-Einstellungen) custom/world aus.

Die Kunden-Seite zeigt jetzt eine Heatmap, wo sich Ihre Kunden weltweit befinden.

Gantt-Panels

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

1. Erstellen Sie das Geschäftsobjekt:

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

   2. Setzen Sie den Zweck auf Gantt und Ziel auf Order.

   3. Klicken Sie auf Erstellen.

   4. Wählen Sie im Tab Tabellen OrderNumber, OrderDate, ShippedDate und CustomerID aus.

   5. Setzen Sie im Tab Spalten die folgenden Verwendungstypen:

      • OrderNumber: Aufgabe

      • OrderDate: Start

      • ShippedDate: Ende

2. Fügen Sie das Panel hinzu:

   1. Fügen Sie ein neues Panel zur Seite Kunden vom Typ Gantt hinzu.

   2. Wählen Sie Order (Gantt) als Quelle aus.

   3. Stellen Sie sicher, dass es über CustomerID gebunden ist.

Organisieren mit Tabs

Sie haben jetzt drei neue Panels auf Ihrer Seite Kunden, was sie überladen wirken lassen könnte. Um die Seite organisiert zu halten, werden wir alle diese neuen Panels in einer Tab-Panel-Gruppe platzieren (ein Konzept, das in Lektion 6 eingeführt wurde). Befolgen Sie diese Schritte:

1. Erstellen Sie im Bearbeitungsbildschirm der Seite Kunden eine neue Panel-Gruppe.

2. Setzen Sie das Layout auf Tabbed.

3. Fügen Sie Ihre Panels Order Calendar, Customer Map und Order Gantt zu dieser Gruppe hinzu.

Sie haben jetzt ein anspruchsvolles Dashboard, das es Ihnen ermöglicht, zwischen einem Zeitstrahl, einer Karte und einem Zeitplan der Aktivitäten Ihrer Kunden zu wechseln. So sieht die Seite Kunden jetzt aus, mit dem hervorgehobenen Kalenderdiagramm (aber beachten Sie die Tabs, die es Ihnen ermöglichen, auch die anderen Diagramme zu sehen):

Netzwerkdiagramme

Netzwerkdiagramme werden verwendet, um Beziehungen zwischen Entitäten zu visualisieren. Wir können dies nutzen, um die Berichtstruktur unserer Mitarbeiter zu visualisieren.

1. Erstellen Sie das Geschäftsobjekt:

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

   2. Setzen Sie den Zweck auf Netzwerkdiagramm und Ziel auf Employee.

   3. Klicken Sie auf Erstellen.

   4. Wählen Sie 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 die Namen anstelle der IDs im Diagramm angezeigt werden.

2. Füge das Panel hinzu:

   1. Füge ein neues Panel zur Mitarbeiter-Seite vom Typ Netzwerkdiagramm hinzu.

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

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

Anfänglich sieht das Panel so auf der Seite 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 Datensätze zusammenzufassen, indem zwei verschiedene Kategorien miteinander verglichen werden. Wir werden eine Pivot-Tabelle erstellen, die den Gesamtverkaufsbetrag pro Kunde (Zeile) nach Produktkategorie (Spalte) anzeigt.

1. Erstelle das Geschäftsobjekt:

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

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

   3. Füge im Tab Tabellen die Tabellen OrderDetail, Product, Category und Customer hinzu.

   4. Füge im Tab Spalten die Customer und Category aus ihren jeweiligen Tabellen hinzu und die folgende Ausdruck für den Gesamtpreis (denk daran, ihm einen beschreibenden 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 Berichte-Menü und verwende ein Vollseitenlayout.

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

   3. In den Steuerelemente-Einstellungen:

      1. Setze Customer als Zeile.

      2. Setze Category als Spalte.

      3. Setze den Ausdruck, den du erstellt hast (unter Verwendung des Alias, den du ihm gegeben hast), als Wert.

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

Erweiterte Panel-Layouts

Über Standardgitter und -formulare hinaus bietet der App Builder Layouts, die für spezifische Navigations- und Anzeigeanforderungen entwickelt wurden.

Lane-Panels

Lane-Panels ermöglichen es, Datensätze in vertikale oder horizontale Bahnen zu gruppieren, ähnlich wie bei einem Kanban-Board. Lassen Sie uns unsere Produkte-Seite so umgestalten, dass sie dieses Layout verwendet.

1. Panel umwandeln:

   1. Navigieren Sie zur Produkte-Seite.

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

   3. Ändern Sie den Paneltyp von Gitter zu Lane.

   4. Klicken Sie auf Speichern.

2. Gruppierung konfigurieren:

   1. Gehen Sie zu den Steuerelemente-Einstellungen im Seitenbearbeitungsbildschirm.

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

   3. Sobald das Kategorie-Steuerelement hinzugefügt ist, klicken Sie, um es zu bearbeiten. Im Tab Position & Breite aktivieren Sie das Kontrollkästchen Gruppieren nach. Dies weist den App Builder an, für jede Produktkategorie eine separate Bahn zu erstellen.

3. Panel-Einstellungen anpassen:

   1. Kehren Sie zum Seitenbearbeitungsbildschirm zurück.

   2. Öffnen Sie im Tab Edge Case den Abschnitt Allgemein und geben Sie 100 im Feld Zeilen pro Anfrage ein. Da Lane-Panels visuell mehr Daten anzeigen als Gitter, stellt die Erhöhung dieses Limits sicher, dass Kategorien nicht leer erscheinen.

Die Produkte-Seite sieht jetzt so aus:

Frame-Panels

Frame-Panels fungieren als Container, die andere Seiten innerhalb von ihnen laden. Dies ist der Mechanismus hinter der standardmäßigen Anwendungs-Seitenleiste.

• So funktioniert es: Ihre Startseite enthält typischerweise ein Menü-Panel (die Seitenleiste) und ein Frame-Panel (den Hauptinhaltbereich). 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 entkommen: Manchmal möchten Sie, dass ein Link aus dem Frame ausbricht (z. B. ein "Abmelden"-Button oder ein großer Bericht). Um dies zu tun, konfigurieren Sie das Verhalten des Links auf Popup oder verwenden Sie eine Weiterleitungs-Aktion, die die Navigation auf der obersten Fenster-Ebene erzwingt.

Erweiterte Formularlogik: Sichtbarkeitsregeln

In Lektion 4 haben wir über Formularpanels gelernt. Wir können steuern, welche Felder in einem Formular angezeigt werden, indem wir Sichtbarkeitsregeln verwenden.

Statische Sichtbarkeit

Eine statische Sichtbarkeitsansicht legt eine Regel fest, die immer wahr ist. Zum Beispiel stellen wir sicher, dass das Feld Land im Formular Mitarbeiter immer erforderlich ist.

1. Gehe zum Bearbeitungsbildschirm der Seite Mitarbeiter.

2. Wähle das Panel Mitarbeiter aus, um die Bearbeitungsoptionen anzuzeigen.

3. Klicke auf Mehr > Sichtbarkeiten.

4. Klicke auf Registrieren, um eine neue Sichtbarkeitsregel zu erstellen.

   1. Setze den Typ auf Statisch.

   2. Setze die Spalte auf Land.

   3. Setze den Wert auf Erforderlich.

   4. Klicke auf Speichern.

Dynamische Sichtbarkeitsregeln

Die Sichtbarkeit kann auch basierend auf Daten geändert werden. Zum Beispiel ist das Feld Bundesstaat für US-Adressen relevant, jedoch nicht für UK-Adressen (in unserem Datensatz). Lassen Sie uns das Feld Bundesstaat ausblenden, es sei denn, das Land ist "USA".

1. Erstelle die Logikregel:

   1. Gehe zu App-Arbeitsbereich > Regeln und klicke auf + Regel.

   2. Nenne sie Mitarbeiter (Sichtbarkeit).

   3. Setze den Zweck auf Sichtbarkeit und das Ziel auf Mitarbeiter.

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

   5. Richte diesen Ausdruck auf die Bundesstaat-Spalte aus.

2. Wende die Regel an:

   1. Kehre zu den Sichtbarkeitseinstellungen des Panels Mitarbeiter zurück.

   2. Klicke auf Registrieren und setze den Typ auf Regel.

   3. Wähle Mitarbeiter (Sichtbarkeit) als Regel aus.

Jetzt wird das Feld Bundesstaat beim Bearbeiten eines Mitarbeiters verschwinden, wenn das Land nicht "USA" ist, und erforderlich werden, wenn es das ist.

Abzeichen

Ein Abzeichen ist ein kleines Indikatorfeld, das auf einem Button platziert ist und eine dynamisch aktualisierte Anzahl anzeigt. Abzeichen sind nützlich, um den Benutzern auf einen Blick Informationen zu zeigen, wie die Anzahl der Bestellungen für einen Kunden oder Aufgaben in einer Warteschlange.

Um zu demonstrieren, fügen wir der Kunden-Seite einen Button hinzu, der zu einer Liste der Bestellungen dieses Kunden navigiert. Der Button wird ein Badge anzeigen, das die Gesamtzahl der von diesem Kunden aufgegebenen Bestellungen zeigt.

Zuerst benötigen wir ein Geschäftsobjekt, das die Bestellungen für jeden Kunden zählen kann. Eine Unterabfrage ist dafür perfekt geeignet.

1. In App Workbench > Regeln, klicken Sie auf + Regel.

2. Konfigurieren Sie die Regel mit den folgenden Einstellungen:

   • Geben Sie im Feld Name Bestellung (Anzahl nach Kunde) ein.

   • Wählen Sie im Feld Zweck Unterabfrage aus.

   • Wählen Sie im Feld Ziel Kunde aus.

3. Klicken Sie auf Erstellen.

4. Fügen Sie im Tab Tabellen die Bestellung-Tabelle hinzu.

5. Erstellen Sie im Tab Verknüpfungen eine Linke äußere Verknüpfung von Kunde (Links) zu Bestellung (Rechts) über CustomerID. Die Verwendung einer linken äußeren Verknüpfung stellt sicher, dass Kunden ohne Bestellungen dennoch in unseren Ergebnissen enthalten sind.

6. Fügen Sie im Tab Spalten zwei Spalten hinzu:

   1. Wählen Sie die Spalte CustomerID aus der Kunde-Tabelle.

   2. Klicken Sie auf + Spalte, um einen Ausdruck zu erstellen:

      • Spalte oder Ausdruck: IsNull(Count(O.OrderID), 0)

      • Alias: Bestellanzahl

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

7. Klicken Sie auf Speichern.

Als Nächstes müssen wir diese Anzahl zu unserem Hauptgeschäftsobjekt Kunde (Quelle) hinzufügen.

1. In App Workbench > Regeln, öffnen Sie das Geschäftsobjekt Kunde (Quelle).

2. Klicken Sie im Tab Tabellen auf + Tabellen und fügen Sie die gerade erstellte Unterabfrage Bestellung (Anzahl nach Kunde) hinzu.

3. Erstellen Sie im Tab Verknüpfungen eine Innere Verknüpfung zwischen Kunde (Links) und unserer Unterabfrage (Rechts) über CustomerID.

4. Klicken Sie im Tab Spalten auf + Spalte. Wählen Sie die Spalte Bestellanzahl aus der Unterabfrage-Regel aus, um sie Seiten, die dieses Geschäftsobjekt verwenden, verfügbar zu machen.

Schließlich konfigurieren wir den Button und sein Badge auf der Kunden-Seite.

1. Navigieren Sie zur Kunden-Seite und öffnen Sie den Live-Designer.

2. Klicken Sie auf das Kunden-Panel und dann auf + Steuerung.

3. Konfigurieren Sie die Schaltfläche:

   • Wählen Sie im Dropdown-Menü Steuerungstyp Schaltfläche aus.

   • Geben Sie im Feld Name Bestellungen ein.

   Hinweis

   Lassen Sie das Feld Spalte leer, da die Zuweisung 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 "Bestellungen" verwenden.

4. Klicken Sie auf Weiter, um zu den Navigations-Einstellungen zu gelangen. Wählen Sie im Dropdown-Menü Link zur Seite Bestellungen aus. Der App Builder erstellt automatisch die Bindung auf CustomerID.

5. Klicken Sie auf Weiter und dann auf Fertig.

6. Wählen Sie die neu erstellte Bestellungen-Schaltfläche aus, damit der Live-Designer Optionen dafür anzeigt.

7. Öffnen Sie im Tab Schaltfläche den Abschnitt Sonstiges (Schaltfläche).

8. Wählen Sie im Dropdown-Menü Badge-Quelle (Spalte) OrderCount aus.

9. Klicken Sie auf Speichern und verlassen Sie den Live-Designer.

Sie sollten jetzt eine Bestellungen-Schaltfläche für jeden Kunden sehen, mit einem Badge, das die Gesamtanzahl der Bestellungen anzeigt. Ein Klick auf die Schaltfläche führt Sie zur Bestellungen-Seite, auf der die von diesem Kunden aufgegebenen Bestellungen bereits ausgewählt sind.

Weiterführendes Lernen

Dies schließt diesen tiefen Einblick in die Details der UI-Schicht des App Builders ab. Wenn Sie es noch nicht getan haben, sehen Sie sich Anhang A für einen genaueren Blick auf die Datenschicht oder Anhang B für die Geschäftsschicht an.

Um weiterhin über den App Builder zu lernen, besuchen Sie Jitterbit University.