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 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 auf Steuerelemente.

3. Hier sehen Sie eine Liste aller Steuerelemente, die derzeit in diesem Popup angezeigt werden. Als wir App Builder automatisch die Geschäftsobjektspalten auswählen ließen, 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 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 Lieferant-Feld 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 Produkt-Seite 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 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 zu der 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 korrekt 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 die Aktionsleiste 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, damit der Live-Designer Bearbeitungsoptionen dafür anzeigt.

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 Prozess, den wir oben auf der Kunden-Seite durchgeführt haben, 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. Im Tab Aktualisierungsmethoden finden Sie die Option Einfügemethode. Wählen Sie Nein, da wir keine neuen Parameter-Sätze hinzufügen möchten.

5. Im selben Tab finden Sie 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. Gehe in App Workbench > Regeln und finde die Produkt (Quelle) Regel, da dies die Grundlage der Produkte-Seite ist, und klicke, um sie zu bearbeiten.

2. Gehe zum Tab Spalten, suche die Zeile, die die Einheitspreis-Spalte anvisiert, und klicke auf das Bearbeitungssymbol.

3. Wähle im Abschnitt Cast-Optionen im Feld Logischer Datentyp Währung aus. Klicke auf Speichern:

   

   Hinweis

   Du kannst das Feld auch ohne das Popup bearbeiten, indem du entweder auf das Bleistiftsymbol klickst oder direkt inline auf das Feld unter Logisch klickst.

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

Überprüfung und Abschluss

In dieser Lektion haben wir verschiedene Arten von Steuerelementen kennengelernt. Wir haben mit Listen-, Datei-, HTML-, Erstell-, Aktualisier-, Lösch- und Währungssteuerelementen gearbeitet. Außerdem haben wir Beziehungen zwischen Tabellen erstellt. Wir werden in den nächsten Lektionen weiterhin die Funktionen des App Builders erkunden, um unsere Anwendung zu verbessern. Gehe weiter zu Lektion 6: Bindung.