Einführung in den App Builder - Lektion 5: Steuerelemente

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

Listensteuerelemente

Als wir in Lektion 3 über Geschäftsobjekte oder Regeln gelernt haben, haben wir zwei Typen besprochen: Geschäftsobjekte und Listenobjekte. Um es kurz zusammenzufassen, haben wir gelernt, dass Geschäftsobjekte dazu dienen, den Inhalt einer bestimmten Tabelle in der Datenebene anzuzeigen. Listenobjekte hingegen werden verwendet, um Dropdown-Menüs in unseren Anwendungen zu erstellen. Jetzt, da wir mehrere Seiten erstellt haben, lassen Sie uns die Listenobjekte, die wir haben, verwenden, um Menüs hinzuzufügen.

1. Gehen Sie zu App Workbench > Seiten, und suchen Sie Produkt, eine der Popup-Seiten, die wir in der vorherigen Lektion erstellt haben. Klicken Sie auf das Stiftsymbol, um es zu bearbeiten.

2. Klicken Sie im Seitenpanel-Layout auf Steuerelemente.

3. Hier sehen Sie eine Liste aller Steuerelemente, die derzeit in diesem Popup angezeigt werden. Als wir App Builder erlaubten, die Spalten des Geschäftsobjekts automatisch auszuwählen, die für diese Seite verwendet werden sollten, wählte es alle Spalten aus, außer denen, die von Audit Lite erstellt wurden, und denen im UUID-Format, das nicht menschenlesbar ist. Wir werden ein weiteres Steuerelement hinzufügen. Klicken Sie auf + Steuerelement. Der Dialog Ein Steuerelement hinzufügen erscheint:

   

4. Wählen Sie im Menü Spalte SupplierID aus. Ein neues Feld, Name, erscheint automatisch darunter und enthält bereits den Namen Supplier. Das Feld Steuerelementtyp wählt automatisch Liste aus.

5. Klicken Sie auf Weiter.

6. Im nächsten Schritt des Assistenten verwenden Sie das Menü Quelle, um Supplier (Liste) auszuwählen, das Listenobjekt, das wir zuvor erstellt haben. Wenn die Felder Verwendungstyp des Listenobjekts korrekt ausgewählt wurden, werden die folgenden beiden Felder automatisch ausgefüllt, und Sie können die Schritte 7 und 8 überspringen.

7. Verwenden Sie das Menü Schlüssel (Spalte), um Supplier ID (PK) auszuwählen.

8. Verwenden Sie das Menü Titel (Spalte), um Lieferant auszuwählen.

9. Klicken Sie auf Weiter und dann auf Fertig.

10. Navigieren Sie zur Seite Produkte und klicken Sie auf Seite anzeigen. Wählen Sie einen der Einträge in der Liste aus und klicken Sie auf die Schaltfläche am Ende der Zeile. Beachten Sie, dass die Produkt-Popup-Seite jetzt ein neues Lieferant-Feld hat. Wenn Sie auf die Schaltfläche Bearbeiten klicken, sehen Sie, dass es sich um ein Dropdown handelt.

Übungszeit: Fügen Sie eine weitere Listensteuerung hinzu

Wiederholen Sie den gleichen Prozess, den wir oben durchgeführt haben, um eine Kategorie-Liste zur Produkt-Seite hinzuzufügen. Unsere Northwinds-Anwendung benötigt beide Listen.

Benutzer auswählbar

Der Benutzer auswählbar Verwendungszweck, der in Lektion 2 eingeführt wurde, bestimmt, welche Werte in Listensteuerungen zur Auswahl stehen. Als Sie die Tabellen in Lektion 2 verbessert haben, hat die Audit-lite-Funktion automatisch die IsActive-Spalte mit diesem Verwendungszweck erstellt. Das bedeutet, dass Listensteuerungen in Ihrer Anwendung nur Datensätze anzeigen, bei denen IsActive wahr ist, und inaktive Einträge aus den Optionen herausfiltern, die ein Benutzer beim Bearbeiten oder Erstellen von Datensätzen sieht.

Beziehungen zwischen Tabellen hinzufügen

In Lektion 2 haben wir eine Tabelle namens Region erstellt. Diese ist jedoch derzeit isoliert, was bedeutet, dass sie nicht mit unseren anderen Tabellen verbunden ist, sodass wir die enthaltenen Informationen nicht nutzen können. Lassen Sie uns das beheben, indem wir eine Beziehung zwischen ihr und der Mitarbeiter-Tabelle erstellen. So können wir verfolgen, wo jeder Mitarbeiter arbeitet.

Zuerst müssen wir eine neue Spalte zur Mitarbeiter-Tabelle hinzufügen.

1. Gehen Sie zu App Workbench > Tabellen, suchen Sie die Mitarbeiter-Tabelle und öffnen Sie sie.

2. Klicken Sie auf + Spalte.

3. Geben Sie der neuen Spalte den Namen RegionID. Stellen Sie im Panel Datentypen sicher, dass im Menü Logisch Eindeutige ID ausgewählt ist und das Menü Physisch automatisch auf UUID voreingestellt ist.

4. Klicken Sie auf Speichern.

5. Als gute Praxis klicken Sie auf Ergebnisse, um sicherzustellen, dass die RegionID-Spalte hinzugefügt wurde.

6. Die neue RegionID-Spalte erscheint jetzt in der Liste. Der App Builder hat sie basierend auf der Datenbankschema-Analyse als Fremdschlüssel identifiziert, und es ist eine gute Praxis, diese Einschränkung durch Klicken auf das +-Symbol in der FK-Spalte durchzusetzen. Eine Bestätigungsnachricht wird angezeigt. Klicken Sie auf Fortfahren.

Der nächste Schritt besteht darin, sicherzustellen, dass die neue Spalte auch in die Regel aufgenommen wird, die wir basierend auf dieser Tabelle erstellt haben.

1. In App Workbench > Regeln, suchen Sie die Regel Mitarbeiter (Quelle) und öffnen Sie sie.

2. Im Tabellen-Panel sehen Sie die Liste der Spalten aus der Mitarbeiter-Tabelle, die von der Regel verwendet wird. Suchen Sie die RegionID-Spalte, die Sie kürzlich erstellt haben, und wählen Sie das Kontrollkästchen aus, um sie einzuschließen.

Jetzt können wir eine Listensteuerung zur Mitarbeiter-Popup-Seite hinzufügen, um anzuzeigen, wo jeder Mitarbeiter arbeitet.

1. In App Workbench > Seiten, suchen Sie die Mitarbeiter-Seite und öffnen Sie sie.

2. Im Seiten-Panel-Layout-Panel klicken Sie auf Steuerungen.

3. Klicken Sie auf + Steuerung.

4. Wählen Sie im Spalten-Menü RegionID aus und klicken Sie auf Weiter.

5. Wählen Sie unter Quelle Region (Liste) aus. Die Auswahl Schlüssel (Spalte) sollte RegionID (PK) sein und die Auswahl Titel (Spalte) sollte Region sein.

6. Klicken Sie auf Weiter und dann auf Fertigstellen.

7. Wenn der App Builder die neue Steuerung erstellt hat, werden Sie zur Liste der Steuerungen zurückgebracht. Ändern Sie die Reihenfolge-Spalte, um die neue Steuerung vor den Standortinformationen des Mitarbeiters anzuzeigen:

   

8. Um die neue Steuerung zu verwenden, navigieren Sie zur Mitarbeiter-Seite, klicken Sie auf Seite anzeigen und öffnen Sie die Details eines beliebigen Mitarbeiters. Stellen Sie sicher, dass das Region-Feld an der erwarteten Stelle angezeigt wird. Die Felder sollten leer sein, also gehen Sie durch mehrere Mitarbeiter und weisen Sie ihnen eine Region zu, wobei Sie für einige die Ostküstenregion und für andere die Westküstenregion auswählen. Dies wird wichtig sein, wenn wir zu fortgeschrittenen Themen weitergehen.

HTML-Steuerelemente

Wenn Sie erneut zur Mitarbeiter-Seite navigieren und auf die Schaltfläche klicken, um Details über den Mitarbeiter namens Laura Callahan anzuzeigen, beachten Sie, dass das Notizen-Feld den Roh-HTML-Text anzeigt. Lassen Sie uns die Schritte durchgehen, um HTML korrekt anzuzeigen.

1. Navigieren Sie zur Mitarbeiter-Seite und klicken Sie auf Seite anzeigen.

2. Klicken Sie auf die Schaltfläche, die Details zu einem Mitarbeiter anzeigt, und warten Sie, bis das Mitarbeiter-Popup erscheint.

3. Klicken Sie auf das Hamburger-Symbol oben rechts auf der Seite, um das Aktionsmenü zu öffnen, und klicken Sie auf Live Designer.

4. Wenn das Seitenmenü des Live Designers geöffnet wird, klicken Sie auf das Notizen-Feld, um es hervorzuheben. Dadurch werden im Live Designer Bearbeitungsoptionen für dieses Feld angezeigt.

5. Im Tab Steuerelementeigenschaften zeigt das Menü Steuerelementtyp derzeit Text an. Das bedeutet, dass der App Builder einfach anzeigt, was in der Spalte steht, ohne Änderungen vorzunehmen. Wählen Sie stattdessen HTML aus. Dadurch wird der App Builder den Inhalt korrekt behandeln und den HTML-Code interpretieren.

6. Klicken Sie auf Speichern. Das Notizen-Feld zeigt jetzt stilisierten und formatierten Text an:

   

Erstellen, Aktualisieren und Löschen von Steuerelementen

Die Panels im App Builder bieten die Möglichkeit, Datensätze zu erstellen, zu aktualisieren oder zu löschen. Sie möchten den Benutzern jedoch nicht immer alle diese Optionen anbieten. Manchmal gibt es Platzbeschränkungen, und Sie möchten einige der Optionen entfernen, da deren Symbole Platz auf den Bildschirmen Ihrer Anwendung einnehmen. Lassen Sie uns lernen, wie man Änderungen an diesen Funktionen vornimmt.

Bearbeiten der Optionen zum Erstellen und Aktualisieren

Der App Builder ermöglicht es Ihnen, die Funktionsweise der Symbole zum Erstellen und Aktualisieren zu ändern, insbesondere welche Bereiche beim Klicken auf eines der Symbole zum Bearbeiten verfügbar werden. Lassen Sie uns lernen, wie wir die Funktionsweise der Optionen auf unserer Kunden-Seite ändern können.

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

2. Klicken Sie auf das Hamburger-Symbol oben rechts auf der Seite, um die Aktionsleiste zu öffnen, und klicken Sie auf Live Designer.

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

4. Wechseln Sie zum Tab Update-Methoden und ändern Sie sowohl die Optionen Bearbeitungsmethode als auch Einfügemethode in Link zur Seite. Das bedeutet, dass, wenn ein Benutzer versucht, einen Eintrag zu bearbeiten oder einen neuen hinzuzufügen, er mit einer von Ihnen gewählten Seite verlinkt wird, anstatt mit der standardmäßig angezeigten Inline-Bearbeitungsoberfläche. Wählen Sie die Kunden-Popup-Seite, die wir bereits erstellt haben:

   

5. Klicken Sie auf Speichern. Sobald der App Builder gespeichert hat, verlassen Sie den Live-Designer und testen Sie Ihre Änderungen. Versuchen Sie, auf Erstellen oder das Bearbeitungssymbol zu klicken und überprüfen Sie, ob die Kunden-Popup-Seite angezeigt wird.

Übungszeit: Bearbeiten Sie die Erstellungs- und Aktualisierungsoptionen für andere Seiten

Wiederholen Sie den oben beschriebenen Prozess auf der Kunden-Seite für die Mitarbeiter- und Produkte-Seiten, indem Sie deren jeweilige Popup-Seiten verwenden. Die Seiten Lieferanten und Versender wurden vom Accelerator in Lektion 4 erstellt, die bereits die Bearbeitungsmethode und Einfügemethode auf Link zur Seite konfiguriert.

Deaktivieren von Löschen und Erstellen auf einer Seite

Lassen Sie uns die Funktionen Löschen und Erstellen auf der Parameter-Seite deaktivieren, die Sie am Ende von Lektion 4 erstellt haben. Dies ist ein gutes Beispiel, da die Parameter, die die gesamte Anwendung steuern, niemals gelöscht werden sollten und es niemals mehr als einen Satz geben sollte.

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

2. Klicken Sie auf das Hamburger-Symbol oben rechts auf der Seite, um die Aktionsleiste zu öffnen, und klicken Sie auf Live Designer.

3. Klicken Sie auf das Parameter-Panel, um dem Live-Designer Bearbeitungsoptionen dafür anzuzeigen.

4. Gehen Sie zum Tab Update Methods und suchen Sie die Option Insert Method. Wählen Sie No, da wir keine neuen Parameter-Sets hinzufügen möchten.

5. Suchen Sie im selben Tab die Option Delete Supported. Wenn Yes hervorgehoben ist, wird eine Delete-Schaltfläche im Popup sichtbar. Klicken Sie auf No, um sicherzustellen, dass die Schaltfläche nicht angezeigt wird.

   

6. Wenn der App Builder die Änderungen speichert, beachten Sie, dass die Delete-Schaltfläche verschwindet.

Verwenden Sie eine Währungssteuerung

Werfen Sie einen Blick auf die Produkte-Seite. Die Spalte Unit Price zeigt Werte wie rohe Zahlen an, die jedoch als monetäre Beträge gedacht sind. Wir werden diese Steuerung bearbeiten, um die Werte so zu formatieren, wie wir es erwarten. Es gibt mehrere Möglichkeiten, dies zu tun, aber wir werden es aus der Geschäftsschicht heraus tun.

1. Gehen Sie zu App Workbench > Rules, suchen Sie die Regel Product (Source), da dies die Grundlage der Produkte-Seite ist, und klicken Sie auf Bearbeiten.

2. Gehen Sie zum Tab Columns, suchen Sie die Zeile, die die Spalte UnitPrice anvisiert, und klicken Sie auf das -Bearbeitungssymbol.

3. Wählen Sie im Abschnitt Cast Options im Feld Logical Data Type die Option Currency aus. Klicken Sie auf Save:

   

   Hinweis

   Sie können das Feld auch ohne das Popup bearbeiten, indem Sie entweder auf das -Bleistiftsymbol klicken oder das Feld direkt unter Logical inline anklicken.

4. Kehren Sie zur Vorschau der Produkte-Seite zurück. Die Preise sollten jetzt korrekt angezeigt werden.

Zusätzliche Steuereinstellungen

Es gibt zusätzliche Einstellungen, die Sie verwenden können, um das Aussehen und die Funktionsweise Ihrer Steuerelemente anzupassen. Die folgenden Abschnitte beschreiben sie.

Grid-Priorität

Grid-Priorität ist eine Funktion im App Builder, die Entwicklern ermöglicht, das standardmäßige responsive Verhalten einer Seite zu überschreiben. Während der App Builder Inhalte automatisch an verschiedene Geräte anpasst, gibt Ihnen die Grid-Priorität die manuelle Kontrolle darüber, welche spezifischen Datenpunkte sichtbar bleiben, wenn der Bildschirmplatz begrenzt ist.

Um die Priorität des Rasters zu demonstrieren, zeigen wir Ihnen, wie Sie die wichtigsten Steuerelemente in einem der Panels auf der Kunden-Seite auswählen.

1. Gehen Sie zu App Workbench > Seiten und öffnen Sie den Bearbeitungsbildschirm der Kunden-Seite. Alternativ können Sie zur Kunden-Seite in der Anwendungsansicht navigieren.

2. Klicken Sie im Bearbeitungsbildschirm der Kunden-Seite im Panel Seitenpanel-Layout auf Steuerelemente im Kunden-Panel. Die Liste der Steuerelemente im Panel wird angezeigt, und in der Spalte Priorität konfigurieren Sie die Rasterpriorität. Alternativ, wenn Sie sich in der Vorschau der Kunden-Seite befinden, öffnen Sie die Aktionsleiste, wählen Sie den Live Designer und klicken Sie auf eine der Spalten (zum Beispiel Kunde) im Kunden-Panel. Sobald der Live-Designer die Einstellungen für dieses Steuerelement anzeigt, klicken Sie auf die Registerkarte Position & Breite und suchen Sie das Feld Rasterpriorität (siehe Screenshot).

   

Jetzt klicken Sie für jedes der Steuerelemente, um einen Prioritätswert zwischen 1 und 4 auszuwählen. Je kleiner die Zahl, desto höher die Priorität. Typischerweise kann ein Telefon im Hochformat drei Felder anzeigen, während ein Telefon im Querformat oder ein Tablet fünf Felder anzeigen kann. Entscheiden Sie daher, welche drei Felder am wichtigsten sind, und weisen Sie ihnen die Priorität 1 zu. Wählen Sie als Nächstes zwei weitere Felder aus und weisen Sie ihnen die Priorität 2 zu.

Es wird empfohlen, in jedem Panel, das mehrere Steuerelemente hat, Rasterprioritäten zuzuweisen.

Spalten sortieren

Spalten sortieren ist, wie der App Builder die Einträge in den in der UI-Schicht angezeigten Listen sortiert. Typischerweise sortiert der App Builder eine Liste in aufsteigender Reihenfolge des Steuerelements mit der höchsten Reihenfolge, das heißt, dem niedrigsten numerischen Wert. Im folgenden Beispiel hat das Kunden-Steuerelement die höchste Reihenfolge (erstes Screenshot), daher verwendet die UI (zweites Screenshot) dies, um die Einträge in der Tabelle aufzulisten.

Über die Benutzeroberfläche können Endbenutzer auf den Titel einer beliebigen Spalte klicken, um die Liste basierend auf der angeklickten Spalte neu anzuordnen. Ein erneutes Klicken auf den Titel kehrt die Sortierreihenfolge um.

Entwickler können das Standardverhalten überschreiben oder anpassen. Um die standardmäßige Sortierspalte zu ändern, geben Sie einem anderen Steuerelement die höchste Reihenfolge. Um die standardmäßige Sortierreihenfolge umzukehren, befolgen Sie diese Schritte:

• Um die Änderung von App Workbench > Seiten vorzunehmen:

  1. Suchen Sie die Bearbeitungsansicht der Seite mit dem Panel, das Sie neu anordnen möchten, und öffnen Sie sie.

  2. In Seitenpanel-Layout suchen Sie das Panel mit den Elementen, die Sie neu anordnen möchten, und klicken Sie auf Steuerelemente.

  3. Finden Sie das Steuerelement mit der höchsten Reihenfolge und klicken Sie auf das -Symbol.

  4. Gehen Sie zum Tab Position & Breite und klicken Sie im Feld Sortierreihenfolge entweder auf ASC für aufsteigende Reihenfolge oder DESC für absteigende Reihenfolge.

• Um die Änderung aus der App-Vorschau vorzunehmen:

  1. Öffnen Sie die Seite mit den Panels, die Sie neu anordnen möchten.

  2. Öffnen Sie die Aktionsleiste und wählen Sie den Live Designer.

  3. Wählen Sie das Steuerelement aus, das als standardmäßige Sortierspalte verwendet wird, und die Details erscheinen im Designer. Klicken Sie auf den Tab Position & Breite und klicken Sie im Feld Sortierreihenfolge entweder auf ASC für aufsteigende Reihenfolge oder DESC für absteigende Reihenfolge.

Sie können auch eine Mehrspaltensortierung anwenden, indem Sie einen Sortierindex auf zwei oder mehr Steuerelemente festlegen. Der App Builder sortiert zuerst nach dem Steuerelement mit dem niedrigsten Sortierindexwert, dann nach dem nächstniedrigeren und so weiter. Es ist eine gute Praxis, Indexwerte in Schritten von 10 (zum Beispiel 10, 20, 30) zu verwenden, da dies Platz lässt, um später zusätzliche Sortierkriterien einzufügen, ohne bestehende Steuerelemente neu nummerieren zu müssen.

Um dies zu demonstrieren, konfigurieren wir die Kunden-Seite so, dass zuerst nach Bundesland sortiert wird, und dann können Sie üben, eine zweite Sortierspalte hinzuzufügen.

1. Gehen Sie zu App Workbench > Seiten, öffnen Sie die Bearbeitungsansicht der Kunden-Seite und klicken Sie auf Steuerelemente im Kunden-Panel.

2. Finden Sie die State-Steuerung und klicken Sie auf das -Symbol.

3. Gehen Sie zum Tab Position & Width.

4. Geben Sie im Feld Sort Index 10 ein.

5. Klicken Sie im Feld Sort Direction auf ASC.

6. Klicken Sie auf Save.

Wenn Sie die Vorschau der Customers-Seite besuchen, wird die Liste jetzt alphabetisch nach Bundesstaat in aufsteigender Reihenfolge sortiert.

Übungszeit: Fügen Sie eine zweite Sortierspalte hinzu

Befolgen Sie die gleichen Schritte, um die City-Steuerung als sekundäre Sortierung zu konfigurieren:

• Setzen Sie den Sort Index auf 20.

• Setzen Sie die Sort Direction auf DESC.

Nach dem Speichern wird die Kundenliste primär nach Bundesstaat (aufsteigend) und innerhalb jedes Bundesstaates nach Stadt in absteigender Reihenfolge sortiert.

Breite

Breite ist eine Ressource, die Entwicklern ermöglicht, zu bestimmen, wie groß eine bestimmte Steuerung in der Benutzeroberfläche der App erscheinen wird. Das Feld Breite erlaubt es Ihnen, einen numerischen Wert einzugeben. Diese Werte werden jedoch von App Builder als relativ und nicht als absolut behandelt. Wenn beispielsweise eine Steuerung eine Breite von 10 hat und eine andere 20, wird die zweite immer doppelt so breit sein wie die erste, aber die spezifische Größe variiert je nach Gerät und verfügbarem Bildschirmplatz. App Builder berechnet die Summe aller Zahlen in der Breiten-Spalte und teilt den Bildschirmplatz entsprechend auf.

1. Navigieren Sie zur Vorschau der Seite, die Sie konfigurieren möchten.

2. Öffnen Sie das Action Drawer und wählen Sie Design this page.

3. Wählen Sie das Panel mit den Steuerungen aus, die Sie anpassen möchten. Die Details werden im Action Drawer angezeigt.

4. Suchen Sie die Breite-Spalte im Abschnitt Controls.

   Geben Sie numerische Werte ein:

   • Weisen Sie höheren Zahlen Spalten zu, die mehr Platz benötigen.

   • Weisen Sie niedrigeren Zahlen Spalten zu, die weniger Platz benötigen (z. B. ID-Nummern oder Abkürzungen für Bundesstaaten).

5. Speichern Sie und aktualisieren Sie den Browser, um die Änderungen in der Benutzeroberfläche anzuzeigen.

Überprüfung und Abschluss

In dieser Lektion haben wir verschiedene Arten von Steuerungen kennengelernt. Wir haben mit Listen-, HTML-, Erstell-, Aktualisierungs-, Lösch- und Währungssteuerungen gearbeitet. Wir haben auch Beziehungen zwischen Tabellen erstellt. Wir werden in den nächsten Lektionen weiterhin die Funktionen von App Builder erkunden, um unsere Anwendung zu verbessern. Gehen Sie zu Lektion 6: Binding.