Erstellen Sie eine interaktive Datenliste mit 4D Qodly Pro

Im Blog dieser Woche befassen wir uns mit der Erstellung einer dynamischen Seite zur Anzeige von Daten. Wir werden uns auf eine praktische Anwendung konzentrieren: den Aufbau eines Systems zur Erstellung von jährlichen Leistungsberichten für Mitarbeiter. Dieses Projekt ist als Referenz auf GitHub verfügbar.

Unser Ziel ist es, eine benutzerfreundliche Oberfläche zu entwerfen, die eine Liste von Mitarbeitern mit Optionen zum Filtern der Ergebnisse nach Abteilung und Beschäftigungsstatus anzeigt.

Anwendung zur Leistungsbeurteilung

Hier ist das Endergebnis:

Einrichten von Qodly-Quellen

Im Abschnitt Qodly-Quellen werden wir die verschiedenen Quellen definieren, die von unseren Komponenten verwendet werden.

In diesem Beispiel erstellen wir eine Quelle mit dem Namen „Employees“, vom Typ Entity Selection, basierend auf der Datenklasse „Employee“. Der Anfangswert wird auf alle Mitarbeiter gesetzt.

Anmerkung:

• Quellen, die unter „Diese.Seite“ gruppiert sind, haben einen begrenzten Geltungsbereich auf die aktuelle Seite. Verwenden Sie diese für temporäre oder seitenbezogene Datenverarbeitung.
• Quellen, die unter „Namespaces“ gruppiert sind, haben einen globalen Geltungsbereich und eignen sich daher für Daten oder Einstellungen, die auf mehreren Seiten gemeinsam genutzt werden.

Erstellen einer Datenquelle

Mit 4D Qodly Pro können Sie Datentabellen oder Matrixkomponenten verwenden, um eine Liste von Daten effektiv darzustellen. In diesem Beispiel verwenden wir die datatable Komponente, ähnlich wie die Listbox vom Typ Collection oder Entity Selection in 4D.

Das Feld „Qodly-Quelle“ ermöglicht es Ihnen, eine Entitätsauswahl zuzuweisen, um die Datentabelle zu füllen. Das Feld „Ausgewähltes Element“ ruft die ausgewählte Entität ab, was dem „aktuellen Element“ in der Listbox entspricht.

Im Abschnitt „Spalten“ können wir dann Spalten hinzufügen und ihre Ausdrücke definieren. Zum Beispiel definieren wir eine Spalte für „Vorname“, die ein direktes Attribut der Datenklasse „Mitarbeiter“ ist, und „Abteilung.Name“, die ein verwandtes Attribut ist.

Daten filtern

In dieser Implementierung kann die Liste der Mitarbeiter auf der Grundlage ihrer Abteilung oder ihres aktiven Mitarbeiterstatus gefiltert werden.

Funktion loadEmployees()

Auf der 4D Seite fügen wir eine Funktion in der „Employee“-Klasse hinzu, um eine Entity-Auswahl gemäß den Filterkriterien zurückzugeben.

Hier ist ein Code-Schnipsel:

exposed Function loadEmployees($departement: Object; $isActive: Boolean) : cs.EmployeeSelection
If ($departement#Null)
return This .query("ID_Departement = :1 AND isActive = :2"; $departement.ID; $isActive)
Else
return This .query("isActive = :1"; $isActive)
End if

 

Filter nach Aktivitätsstatus

Um die Filterung nach dem Beschäftigungsstatus zu implementieren, erstellen wir eine Qodly-Quelle vom Typ boolean mit dem Namen „isActive“ und setzen dann den Anfangswert auf true. Als nächstes fügen wir eine Checkbox hinzu, die mit dieser Quelle verknüpft ist.

Um ein schalterähnliches Aussehen zu erreichen, setzen wir die Eigenschaft „Variant“ auf Switch.

Anschließend wird die Funktion „loadEmployees“ mit dem Ereignis „On Change“ des Kontrollkästchens verknüpft.

Weitere Details zu Ereignissen finden Sie in der Qodly Events Dokumentation.

Filtern nach Abteilung

Um nach Abteilungen zu filtern, verwenden wir eine SelectBox, ähnlich einem Dropdown in 4D.

Wir erstellen zwei Datenquellen:

• „Abteilungen“ vom Typ Entität Auswahl
• „Abteilung“ vom Typ Entität

 

Dann fügen wir eine selectBox-Komponente hinzu, indem wir „departments“ als Qodly-Quelle und „department“ als ausgewähltes Element festlegen.

Dann fügen wir innerhalb der selectBox eine Textkomponente ein, die mit der Quelle „$This.Name“ verknüpft ist.

Schließlich rufen wir im Ereignis „On Change“ der SelectBox-Komponente die Funktion „loadEmployees“ mit den Parametern „department“ und „year“ auf.

Na also!

Design der Datentabelle

Der letzte Schritt besteht darin, die Datentabelle an die Designrichtlinien Ihres Unternehmens oder an die visuelle Identität Ihrer Anwendung anzupassen. Sie können es entweder anpassen:

• durch Anpassung der Eigenschaften des Widgets, wie Farben, Rahmen und andere Stile,
• oder eine CSS-Klasse anwenden.

Die Verwendung einer CSS-Klasse bietet den Vorteil, dass ein einheitlicher Stil für alle Datentabellen in Ihrer Anwendung beibehalten wird, was eine einheitliche Benutzererfahrung gewährleistet.

In einem der nächsten Blogbeiträge werden wir die verschiedenen Möglichkeiten der Verwendung von CSS in Qodly Studio untersuchen. Falls Sie es nicht abwarten können: Die CSS-Klasse, die in der Anwendung Performance Review verwendet wird, heißt „DataTable“.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben nun eine funktionale Seite, die Mitarbeiterdaten anzeigen und filtern kann. Dieses interaktive System bietet eine solide Grundlage für die dynamische Datenverarbeitung in Qodly-Anwendungen.

Um Ihr Verständnis von Datentabellen und ihren Aktionen weiter zu vertiefen, sollten Sie die folgenden Ressourcen nutzen:

• Dokumentation über die Datentabellenkomponente,
• Dokumentation der Aktion,
• Sehen Sie sich unser Video über Datentabellen an.

 

Viel Spaß beim Programmieren, und bis zum nächsten Blog!