Aufbau einer dynamischen Datenverwaltung in der Qodly-Anwendung: Erstellen, Hinzufügen, Bearbeiten und Löschen

In unserer Serie über 4D Qodly Pro haben wir uns damit beschäftigt, wie man Daten mit einer Datentabelle anzeigt. Heute machen wir den nächsten Schritt: Wir lernen, wie man Datensätze hinzufügt, bearbeitet und löscht. Diese Operationen sind für die Erstellung dynamischer, interaktiver Anwendungen unerlässlich.

Um diese Funktionen zu demonstrieren, fahren wir mit unserer Anwendung zur Verwaltung von Leistungsbewertungen fort. Das Ziel ist es, einen Bildschirm zu entwerfen, der es den Benutzern ermöglicht, Mitarbeiterinformationen hinzuzufügen oder zu ändern. Dieses Projekt ist auf GitHub als Referenz verfügbar.

Anwendung zur Leistungsbeurteilung

Hinzufügen von Schaltflächen zum Erstellen und Bearbeiten

Neben der Datentabelle fügen wir zwei Schaltflächen hinzu: Erstellen und Bearbeiten.

Sie haben zwei Optionen für die Anzeige des Dateneingabeformulars:

• Inline-Formular anzeigen: Zeigt das Eingabeformular neben der Datentabelle an, wenn der Benutzer auf die Schaltflächen „Erstellen“ oder „Bearbeiten“ klickt. Das Formular kann mit Hilfe von Zuständen ein- oder ausgeschaltet werden. Bedingte oder nicht bedingte Zustände bieten Flexibilität, und wir werden diesem Thema einen zukünftigen Blog widmen. Wenn Sie mehr über Zustände erfahren möchten, lesen Sie bitte die Dokumentation Überblick über Zustände und den Blog Dynamische Benutzeroberflächen mit Seitenzuständen.
• Modale Dialoganzeige: Öffnen Sie das Formular in einem modalen Dialog, wenn der Benutzer auf die Schaltflächen „Erstellen“ oder „Bearbeiten“ klickt. Dies ist der Ansatz, den wir für dieses Lernprogramm gewählt haben.

Ein Dialogfeld erstellen

Um einen Dialog zu erstellen, klicken Sie auf die Schaltfläche „Dialog“ in der oberen Leiste.

Es stehen Ihnen mehrere Eigenschaften zur Verfügung, mit denen Sie Ihren Dialog anpassen können:

• Überlagern: Aktiviert ein Bildschirm-Overlay, wenn es auf true gesetzt ist.
• Verschiebbar: Ermöglicht die benutzergesteuerte Neupositionierung. Verfügt über ein anpassbares Verschiebesymbol.
• Schließbar: Integriert eine Schließfunktion, die über die Schaltfläche oder durch Klicken außerhalb des Dialogs bedient werden kann.
• Animiert: Implementiert einen Flackereffekt beim Öffnen zur visuellen Hervorhebung.

Weitere Details finden Sie in der Dokumentation des Dialogs.

Erstellen eines Dateneingabeformulars

Wir werden nun ein Dateneingabeformular erstellen, um Mitarbeiterinformationen zu erfassen. Mit diesem Formular können Benutzer Datenbankeinträge erstellen oder aktualisieren.

Verknüpfung des Formulars mit der Datenquelle

Zur Erinnerung: Im vorigen Blog haben wir eine Datentabelle erstellt, die mit der Datenquelle „employees“ verknüpft ist, und das ausgewählte Element mit der Datenquelle „theEmployee“ verbunden. Diese „theEmployee“-Datenquelle wird das Eingabeformular füllen.

Hinzufügen von Eingabefeldern

Für grundlegende Felder wie Vorname, Nachname, E-Mail und Job verwenden wir die Komponente Texteingabe.

Beispiel: Konfigurieren des Feldes Vorname

• Ziehen Sie eine Texteingabekomponente in das Formular.
• Setzen Sie die Qodly-Quelleneigenschaft auf „theEmployee.Firstname“.

Wiederholen Sie diesen Vorgang für die anderen Felder, indem Sie sie mit den entsprechenden Attributen von „theEmployee“ verknüpfen.

Lange Textfelder konfigurieren

Für längere Textfelder wie Beschreibung verwenden wir ebenfalls die Komponente Texteingabe, konfigurieren sie aber als Textbereich:

• Ziehen Sie eine Texteingabekomponente in das Formular.
• Ändern Sie die Eigenschaft Typ in Textbereich.
• Setzen Sie die Qodly-Quelle auf „theEmployee.Description“.

Dropdown-Menüs für Abteilungen und Manager

Für Felder wie Abteilungs- und Managerfelder verwenden wir die Komponente Select Box, die es dem Benutzer ermöglicht, vordefinierte Werte auszuwählen.

• Erstellen Sie die Datenquelle: „Abteilung“ vom Typ Entität,
• Ziehen Sie eine Select Box-Komponente,
• Legen Sie „theEmployee.Departement“ als Qodly-Quelle und „department“ als ausgewähltes Element fest.

• Definieren Sie die Eigenschaft Platzhalter mit dem Text „Abteilung“,
• Ziehen Sie eine Texteingabekomponente in das Auswahlfeld,
• Verknüpfen Sie die Texteingabe mit der Quelle „$This.Name“.

Kontrollkästchen mit Switch-Look

Für boolesche Felder wie „isActive“ verwenden wir die Checkbox-Komponente. Um ein modernes Aussehen zu erhalten, verwenden wir den Switch-Look.

• Ziehen Sie eine Checkbox-Komponente in das Formular,
• Ändern Sie die Eigenschaft Variant in Switch,
• Setzen Sie die Qodly-Quelle auf „theEmployee.isActive“.

Aktionen verwalten

4D Qodly Pro vereinfacht das Erstellen, Speichern und Löschen von Datensätzen durch eingebaute Standardaktionen, ähnlich denen in 4D.

Beispiel: Aktion Speichern

• Fügen Sie eine Schaltfläche hinzu und bezeichnen Sie sie als Speichern.
• Klicken Sie in der Ereignistafel unter der Aktion On Click auf Add Standard Action.
• Geben Sie die Datenquelle ein (in diesem Fall denMitarbeiter) und wählen Sie die Aktion Speichern.
• Aktivieren Sie das Kontrollkästchen Feedback geben, um die Behandlung unerwarteter Fehlermeldungen anzupassen und festzulegen, was den Endbenutzern angezeigt werden soll.

Benutzerdefinierte Funktionen für die Geschäftslogik

Zusätzlich zu den Standardaktionen können Sie benutzerdefinierte Funktionen für Vorgänge wie das Erstellen, Löschen oder Speichern von Datensätzen aufrufen. Zum Beispiel:

• Daten vor dem Speichern validieren.
• Berechnungen durchführen, um zusätzliche Felder auszufüllen.

In dieser Anwendung haben wir die Dinge einfach gehalten, indem wir uns auf Standardaktionen verlassen haben. Sie können alle Möglichkeiten von Standardaktionen in der Qodly-Dokumentation erkunden.

Aktualisieren der Datentabelle nach Aktualisierungen

Nach dem Hinzufügen oder Bearbeiten eines Datensatzes ist es wichtig, die Datentabelle zu aktualisieren, um die Änderungen zu berücksichtigen. Dies lässt sich leicht mit der Aktion Neu laden erreichen.

So aktualisieren Sie die Datentabelle nach dem Speichern:

• Fügen Sie die Aktion „Neu laden“ zu der mit der Tabelle verknüpften Datenquelle „Mitarbeiter“ hinzu.
• Weisen Sie diese Aktion der Schaltfläche Speichern zusammen mit der Aktion Speichern zu.

Öffnen und Schließen des modalen Dialogs

Um die Benutzerinteraktion zu verbessern, verknüpfen Sie die entsprechenden Dialogaktionen mit dem modalen Dialog:

• Fügen Sie den Schaltflächen Bearbeiten und Erstellen die Aktion Dialog öffnen hinzu.

• Fügen Sie innerhalb des Dialogs, auf den Schaltflächen Speichern und Abbrechen, die Aktion Dialog schließen hinzu.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben nun ein voll funktionsfähiges System zum Hinzufügen, Bearbeiten und Löschen von Daten. Um die große Auswahl an Komponenten, die für die Erstellung von Qodly-Seiten zur Verfügung stehen, weiter zu erforschen, lesen Sie die umfassende Dokumentation über Qodly-Komponenten.

Lassen Sie uns Ihre Meinung wissen und teilen Sie Ihre Fortschritte im 4D Forum mit. Bleiben Sie dran für unseren nächsten Blog, in dem wir Zustände zur dynamischen Steuerung Ihrer Benutzeroberfläche diskutieren werden.