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: Quellobjekte und Listenobjekte. Um es kurz zusammenzufassen, haben wir gelernt, dass Quellobjekte 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-Panel auf Steuerelemente.

3. Hier sehen Sie eine Liste aller Steuerelemente, die derzeit in diesem Popup angezeigt werden. Als wir App Builder erlaubten, automatisch die Geschäftsobjektspalten auszuwählen, die es für diese Seite verwenden würde, 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 Fertigstellen.

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 Feld Lieferant hat. Wenn Sie auf die Schaltfläche Bearbeiten klicken, sehen Sie, dass es sich um ein Dropdown-Menü 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 Seite Produkt hinzuzufügen. Unsere Northwinds-Anwendung benötigt beide Listen.

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 dieser und der Mitarbeiter-Tabelle erstellen. So können wir nachverfolgen, wo jeder Mitarbeiter arbeitet.

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

1. In App Workbench > Tabellen finden 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 zu überprüfen, ob die Spalte RegionID hinzugefügt wurde.

6. Die neue Spalte RegionID 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, das in der FK-Spalte erscheint, durchzusetzen. Eine Bestätigungsnachricht wird angezeigt. Klicken Sie auf Fortfahren.

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

1. In App Workbench > Regeln finden 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 ein Listensteuerelement zur Mitarbeiter-Popup-Seite hinzufügen, um anzugeben, wo jeder Mitarbeiter arbeitet.

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

2. Klicken Sie im Seiten-Panel-Layout-Panel auf Steuerelemente.

3. Klicken Sie auf + Steuerelement.

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 Bezeichnung (Spalte) sollte Region sein.

6. Klicken Sie auf Weiter und dann auf Fertigstellen.

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

   

8. Um das neue Steuerelement 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 richtig anzuzeigen.

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

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

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

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

5. Im Tab Steuereigenschaften zeigt das Menü Steuerungstyp 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 Feld Notizen zeigt jetzt stilisierten und formatierten Text an:

   

Steuerelemente erstellen, aktualisieren und löschen

Die Panels im App Builder bieten die Möglichkeit, Datensätze zu erstellen, zu aktualisieren oder zu löschen. Sie möchten jedoch nicht immer allen Benutzern all diese Optionen geben. 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.

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, um dem Live-Designer Bearbeitungsoptionen dafür anzuzeigen.

4. Ändern Sie im Tab Aktualisierungsmethoden 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-Bearbeitungsbenutzeroberfläche. Wählen Sie die bereits erstellte Kunden-Popup-Seite aus:

   

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 Seiten Mitarbeiter, Lieferanten, Versender und Produkte, indem Sie deren jeweilige Popup-Seiten verwenden.

Deaktivieren Sie Löschen und Erstellen auf einer Seite

Lassen Sie uns die Lösch- und Erstellungsfunktionen 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 das Aktionsmenü zu öffnen, und klicken Sie auf Live-Designer.

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

4. Suchen Sie im Tab Aktualisierungsmethoden die Option Einfügemethode. Wählen Sie Nein, da wir keine neuen Parameter-Sätze hinzufügen möchten.

5. Suchen Sie im selben Tab die Option Löschen unterstützt. Wenn Ja hervorgehoben ist, wird eine Löschen-Schaltfläche im Popup angezeigt. Klicken Sie auf Nein, um sicherzustellen, dass die Schaltfläche nicht angezeigt wird.

   

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

Verwenden Sie eine Währungssteuerung

Werfen Sie einen Blick auf die Produkte-Seite. Die Spalte Einheitspreis zeigt Werte wie rohe Zahlen an, aber sie sollen monetäre Beträge darstellen. 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. In App Workbench > Regeln, finden Sie die Produkt (Quelle) Regel, da dies die Grundlage der Produkte-Seite ist, und klicken Sie auf Bearbeiten.

2. Im Tab Spalten suchen Sie die Zeile, die die Einheitspreis-Spalte anvisiert, und klicken Sie auf das Bearbeitungssymbol.

3. Im Abschnitt Cast-Optionen verwenden Sie das Feld Logischer Datentyp, um Währung auszuwählen. Klicken Sie auf Speichern:

   

   Hinweis

   Sie können das Feld auch ohne das Popup bearbeiten, indem Sie entweder auf das Bleistiftsymbol klicken oder das Feld direkt inline unter Logisch 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 diese.

Rasterpriorität

Rasterprioritä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 Rasterpriorität die manuelle Kontrolle darüber, welche spezifischen Datenpunkte sichtbar bleiben, wenn der Bildschirmplatz begrenzt ist.

Um die Rasterpriorität 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 navigieren Sie zur Kunden-Seite in der Anwendungsansicht.

2. Vom Bearbeitungsbildschirm der Kunden-Seite aus klicken Sie im Panel Seitenpanel-Layout auf Steuerelemente im Kunden-Panel. Die Liste der Steuerelemente im Panel erscheint, und die Priorität-Spalte ist der Ort, an dem Sie die Rasterpriorität konfigurieren. Alternativ, wenn Sie sich in der Vorschau der Kunden-Seite befinden, öffnen Sie die Aktionsschublade, 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 den Tab 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, die 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.

Von der UI aus können Endbenutzer auf den Titel einer beliebigen Spalte klicken, um die Liste basierend auf der angeklickten Spalte neu anzuordnen. Ein weiteres 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. Suchen Sie im Seitenpanel-Layout das Panel, das die Elemente enthält, 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 auf DESC für absteigende Reihenfolge.

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

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

  2. Öffnen Sie das Aktionsmenü und wählen Sie den Live Designer.

  3. Wählen Sie die Steuerung, die als Standardbestellspalte verwendet wird, und ihre Details erscheinen im Designer. Klicken Sie auf die Registerkarte Position & Breite und geben Sie im Feld Sortierreihenfolge entweder ASC für aufsteigende Reihenfolge oder DESC für absteigende Reihenfolge an.

Breite

Breite ist eine Ressource, die Entwicklern ermöglicht, zu bestimmen, wie groß eine bestimmte Steuerung in der Benutzeroberfläche der App erscheint. 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 Aktionsmenü und wählen Sie Diese Seite gestalten.

3. Wählen Sie das Panel mit den Steuerungen, die Sie anpassen möchten. Ihre Details werden im Aktionsmenü angezeigt.

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

   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 zu sehen.

Überprüfung und Abschluss

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