Erweitern Sie Ihre Qodly-Anwendung mit benutzerdefinierten Komponenten

März 28, 2025 6 Lesezeit

4D Qodly Pro bietet bereits eine breite Palette an nativen Komponenten, die Sie bei der Gestaltung Ihrer Anwendungen unterstützen. Aber wussten Sie, dass Sie sogar noch weiter gehen können? Dank der von der Community entwickelten Custom Components können Sie Ihre Projekte mit maßgeschneiderten Funktionen erweitern!

Mit diesen benutzerdefinierten Komponenten können Sie die Möglichkeiten von 4D Qodly Proerweitern, indem Sie individuelle Funktionen hinzufügen, ähnlich wie bei Plugins und Komponenten in 4D.

In diesem Artikel zeigen wir Ihnen, wie Sie diese Komponenten verwenden und integrieren können, und stellen Ihnen einige praktische Anwendungsfälle aus unserer Performance Review Anwendung vor.

Anwendung Leistungsüberprüfung

Was ist eine benutzerdefinierte Komponente?

Benutzerdefinierte Komponenten sind Bausteine, die von Anwendern erstellt werden, um spezielle Anforderungen zu erfüllen oder Funktionalitäten hinzuzufügen, die von den in 4D Qodly Pro integrierten Komponenten nicht abgedeckt werden. Entwickelt in React, bieten sie eine leistungsstarke und flexible Grundlage für Entwickler.

Die Integration von Custom Components in Qodly Studio bietet mehrere Vorteile:

Erweiterbarkeit: Passen Sie Ihre Seiten genau an die Anforderungen Ihres Projekts an.
Wiederverwendbarkeit: Teilen Sie Ihre Komponenten in verschiedenen Projekten oder mit der Qodly-Community.
Effizient: Sparen Sie Zeit, indem Sie vorgefertigte Komponenten verwenden, anstatt bei Null anzufangen.

Wie verwendet man eine benutzerdefinierte Komponente?

Wählen Sie die Komponente
- Durchsuchen Sie das GitHub-Repository der benutzerdefinierten Komponenten und wählen Sie die gewünschte Komponente aus.
Laden Sie die neueste Version herunter
- Klicken Sie auf die ausgewählte Komponente.
- Gehen Sie zum Abschnitt Releases.
- Laden Sie die neueste Version herunter (ZIP-Datei). Stellen Sie sicher, dass Sie sich im Bereich Releases befinden, um die vorkompilierte Version zu erhalten, nicht den Quellcode.
Installieren in Qodly Studio
- Klicken Sie im Bereich Komponenten auf Komponente hochladen.
- Ziehen Sie die heruntergeladene ZIP-Datei per Drag & Drop oder wählen Sie sie aus.
- Klicken Sie auf Komponente installieren, dann auf Neu laden.
- Die Komponente erscheint nun unter dem Abschnitt Benutzerdefiniert der verfügbaren Komponenten.
- Sie können sie nun direkt auf eine Seite ziehen und ablegen.

Weitere Informationen finden Sie in der offiziellen Dokumentation: Benutzerdefinierte Komponente hochladen.

Wie können Sie Ihre eigene benutzerdefinierte Komponente erstellen?

Wenn Sie keine Komponente finden können, die Ihren Anforderungen entspricht, können Sie Ihre eigene erstellen.

Die API von 4D Qodly Pro vereinfacht die Erstellung von Custom Components in React mit dem speziellen CLI-Tool @qodly/cli. Dieses Tool rationalisiert die Initialisierung eines React-Projekts und ermöglicht es Entwicklern, wiederverwendbare Komponenten zu entwerfen und gemeinsam zu nutzen. Sobald diese Komponenten integriert sind, können sie durch einfaches Drag-and-Drop zu Seiten hinzugefügt werden.

Weitere Einzelheiten finden Sie in der offiziellen Dokumentation.

Wie können benutzerdefinierte Komponenten Ihre Anwendung verbessern?

In die Anwendung Performance Review haben wir mehrere benutzerdefinierte Komponenten integriert, um die Benutzerfreundlichkeit zu verbessern. Hier sind einige konkrete Beispiele:

Anzeigen eines PDF-Dokuments mit der Komponente pdfViewer.
Herunterladen einer Datei mit der fileDownload-Komponente.
Erstellen Sie ein dynamisches Menü mit der Popover-Komponente.
Erstellen einer Jahresauswahl durch Kombination von Popover- und DatePicker-Komponenten.

Anzeige von Dokumenten: Integrieren Sie ein PDF mit pdfViewer

Wir verwenden die pdfViewer-Komponente.

Schritte zur Integration eines PDF-Viewers:

Laden Sie die pdfViewer-Komponente herunter und installieren Sie sie, wie im vorherigen Abschnitt beschrieben.
Ziehen Sie die Komponente auf Ihre Seite und verknüpfen Sie sie mit der Datenquelle „selectedReview.DocumentPDF“, die das PDF enthält.

Das Dokument wird dann dynamisch auf der Seite angezeigt.

Diese Komponente eignet sich besonders für die Anzeige von Dokumenten, die dynamisch aus einer 4D Write Pro Vorlage und Datenbankdaten erzeugt wurden.

Herunterladen einer PDF-Datei mit der fileDownload-Komponente

Mit der fileDownload-Komponente können Sie Dokumente herunterladen.

Schritte zum Erstellen einer Option zum Herunterladen von Dateien:

Installieren Sie die fileDownload-Komponente.
Ziehen Sie die Komponente auf Ihre Seite und verknüpfen Sie die Datenquelle, die die herunterzuladende PDF-Datei enthält. In diesem Fall ist die Datenquelle „selectedReview.DocumentPDF“.

Sobald die Komponente konfiguriert ist, können Benutzer die Datei mit einem einfachen Klick herunterladen.

Erstellen eines interaktiven Menüs mit Popover

In unserer Anwendung für die Leistungsüberprüfung haben wir oben auf der Seite ein Menü integriert, das sich über einem Page Loader-Widget befindet. Dieses Menü bestimmt dynamisch die zu ladende Seite innerhalb der Page Loader-Komponente. Wir haben das Menü mit der Popover-Komponente erstellt.

Schritte zur Erstellung des Menüs:

Installieren Sie die Popover-Komponente.
Ziehen Sie die Popover-Komponente per Drag & Drop auf Ihre Seite.
Fügen Sie im Menüabschnitt einen statischen Text mit dem Namen Human Resources ein.
Fügen Sie im Abschnitt over drei Schaltflächen mit den Namen Collaborator, Reviews und Trainings ein.

Mit ein paar stilistischen Anpassungen erhalten wir ein funktionelles und ergonomisches Menü:

Durch Feinabstimmung des Designs, Anpassung der Abstände, Farben und Hover-Effekte können Sie eine nahtlose und benutzerfreundliche Navigation in Ihrer Qodly-Anwendung erstellen.

Erstellen Sie einen eigenen DatePicker mit Popover und DatePicker

4D Qodly Pro bietet eine native Komponente für die Datumsauswahl. In der Anwendung Performance Review haben wir uns jedoch für die benutzerdefinierte DatePicker-Komponente entschieden, da ihr Design besser zu unseren Anforderungen passte. Dies ermöglichte uns auch, die Kombination von benutzerdefinierten Komponenten zu demonstrieren.

Schritte zum Erstellen einer benutzerdefinierten Jahreseingabe:

Ziehen Sie eine Style Box auf Ihre Seite und legen Sie sie dort ab.
Fügen Sie einen mit Zahlen formatierten Eingabetext in die Style Box ein.
Fügen Sie eine Popover-Komponente in die Style Box ein.
Fügen Sie in den Menüabschnitt des Popovers ein Symbol ein, um die Datumsauswahl zu öffnen.
Fügen Sie im Over-Bereich die DatePicker-Komponente ein.
Fügen Sie die Datenquelle zum Eingabetext und zum DatePicker hinzu.

Mit ein paar Stilanpassungen (Rahmen, Farben usw.) sehen Sie das Ergebnis:

Dieser Ansatz kombiniert Flexibilität und ein individuelles Design und verbessert die Benutzerfreundlichkeit.

Nächste Schritte

Benutzerdefinierte Komponenten sind eine leistungsstarke Lösung, um Ihre Qodly-Anwendungen zu verbessern und spezifische Anforderungen ohne komplexe Entwicklung zu erfüllen. Erforschen Sie das GitHub-Repository für Komponenten, um noch mehr Möglichkeiten zu entdecken.

Wenn Sie Ihre eigene Komponente erstellt haben, teilen Sie sie mit der Qodly-Community!

Wenn Sie noch weiter gehen möchten, schauen Sie sich dieses Tutorial-Video an: Wie Sie Ihrer Qodly-Anwendung benutzerdefinierte Komponenten hinzufügen.