Entwurf einer interaktiven und dynamischen Menüleiste in der Qodly-Anwendung

Im Blog dieser Woche werfen wir einen Blick auf die Navigation. Die Navigation ist ein Schlüsselelement einer jeden Webanwendung. Ein gut strukturiertes Navigationssystem ermöglicht es den Nutzern, schnell zu finden, was sie brauchen, und verbessert das Gesamterlebnis.

Mit 4D Qodly Pro ist die Verwaltung der Navigation einfach und flexibel. Mit der Komponente Page Loader können Sie Seiten dynamisch auf Basis von Benutzeraktionen laden.

In diesem Artikel erfahren Sie, wie Sie eine effiziente Navigationsleiste mit 4D Qodly Pro einrichten. Als Beispiel verwenden wir unsere Anwendung Performance Review, die Sie von GitHub herunterladen können (Link wird noch hinzugefügt). Wir werden das Design, die Interaktionen und das Berechtigungsmanagement behandeln, um ein nahtloses, auf die jeweilige Benutzerrolle zugeschnittenes Erlebnis zu schaffen.

Anwendung zur Leistungsüberprüfung

Laden von Seiten mit dem Page Loader

Das Laden einer Seite mit 4D Qodly Pro ist intuitiv. Ziehen Sie die Komponente Page Loader einfach per Drag & Drop auf Ihre Oberfläche und verknüpfen Sie sie mit einer textbasierten Datenquelle.

Der Page Loader lädt automatisch die Seite, die dem in der Datenquelle gespeicherten Wert entspricht. Durch die Aktualisierung dieses Wertes können die Benutzer nahtlos zwischen verschiedenen Seiten in der Anwendung navigieren.

Die Wahl des richtigen Navigationstyps

Da wir nun wissen, wie man mit dem Page Loader Seiten lädt, müssen wir festlegen, wie diese Datenquelle dynamisch verändert werden kann, um eine reibungslose und intuitive Navigation zu ermöglichen.

Es gibt drei Haupttypen der Navigation:

• Menüleiste: Eine traditionelle, immer sichtbare Navigationsleiste, ideal für den schnellen Zugriff.
• Hamburger-Menü: Ein zusammenklappbares Menü, auf das über ein Symbol zugegriffen werden kann, ideal für mobile Anwendungen.
• Seitenleisten-Menü: An der Seite positioniert, geeignet für komplexe Anwendungen mit mehreren Abschnitten.

Die Art der Navigation sollte auf der Grundlage der spezifischen Bedürfnisse Ihrer Anwendung und der Zielnutzer ausgewählt werden. Ein gut durchdachtes Navigationssystem verbessert die Benutzerfreundlichkeit und gewährleistet einen einfachen Zugang zu den wichtigsten Funktionalitäten.

Für die Anwendung Performance Review haben wir uns für eine klassische Menüleiste entschieden. Dieser Ansatz ermöglicht einen schnellen Zugriff auf verschiedene Abschnitte und gewährleistet eine reibungslose Nutzung sowohl auf Desktop- als auch auf Tablet-Geräten.

Erstellen einer Navigationsleiste

Unsere Navigationsleiste wurde so gestaltet, dass sie einfach, effizient und benutzerfreundlich ist. Hier sind ihre Hauptmerkmale:

• Eine Navigationsleiste mit fester Höhe und einer Sticky-Option, die oben sichtbar bleibt.
• Das Symbol und der Name der Anwendung.
• Ein Dropdown-Menü „Human Resources“, das Folgendes enthält:
  • Mitarbeiter
  • Überprüfung
  • Ausbildung
• Eine Schaltfläche Manager.
• Eine Schaltfläche Mitarbeiter.
• Der Name des eingeloggten Benutzers.
• Eine Schaltfläche Abmelden.

Erstellen der oberen Leiste

Die Navigationsleiste wird immer am oberen Rand des Bildschirms angezeigt. Um dies zu erreichen, erstellen wir eine Style-Box mit einer Sticky-Eigenschaft:

• position: sticky sorgt dafür, dass die Leiste beim Scrollen sichtbar bleibt.
  
• top: 0 und left: 0 positionieren die Leiste am linken oberen Rand der Seite.

Hinzufügen des Anwendungssymbols und des Titels

Wir verwenden eine Stylebox mit Flexbox, um Elemente auszurichten und die Reaktionsfähigkeit bei verschiedenen Bildschirmgrößen zu erhalten.

Innerhalb dieser Box:

• Eine Bildkomponente für das Symbol.
• Eine Textkomponente zur Anzeige des Anwendungsnamens.

Erstellen der Menüs

Eine zweite Stylebox (mit Flexbox) wird hinzugefügt, um sowohl das Dropdown-Menü als auch die beiden Navigationsschaltflächen zu enthalten.

Erstellen des Dropdown-Menüs „Human Resources

Um das Dropdown-Menü zu erstellen, verwenden wir eine benutzerdefinierte Komponente namens Popover. Sie können diese Komponente von GitHub herunterladen.

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

Weitere Einzelheiten zu benutzerdefinierten Komponenten finden Sie in unserem früheren Blogbeitrag: „Erweitern Sie unsere Qodly-Anwendung mit benutzerdefinierten Komponenten“

Hinzufügen der Schaltflächen Manager und Mitwirkender

Fügen Sie einfach zwei separate Schaltflächen mit den Bezeichnungen „Manager“ und „Mitwirkender“ hinzu .

Erstellen des Bereichs für protokollierte Informationen

Eine dritte Stylebox (mit Flexbox) wird verwendet, um den Namen des angemeldeten Benutzers anzuzeigen und eine Abmeldeaktion bereitzustellen.

• Eine Textkomponente, die an die Datasource Benutzername gebunden ist, zeigt den Namen des angemeldeten Benutzers auf der rechten Seite der Navigationsleiste an.

• Mit der Schaltfläche Abmelden können sich Benutzer schnell abmelden. Weisen Sie dem onClick-Ereignis der Schaltfläche die Standard-Authentifizierungsabmeldeaktion zu.

Weitere Einzelheiten zur Authentifizierung finden Sie in diesem früheren Blogbeitrag: Integration der Benutzerauthentifizierung in Ihre Qodly-Anwendungen.

Implementieren von Navigationsinteraktionen

Die Navigation wird über eine Variable namens pageName verwaltet, die als Datenquelle für den Page Loader dient.

• Jedes Menüelement ist mit einer Aktion verbunden, die den Wert pageName aktualisiert.
• Wenn der Benutzer auf eine Schaltfläche klickt, wird die entsprechende Seite dynamisch geladen.
• Für jede Schaltfläche wird die Aktion „Datenquelle festlegen“ auf das Ereignis „onClick“ angewendet:
  • pageName = „CollaboratorPage“, um die Seite „Collaborator“ anzuzeigen.
  • pageName = „ManagerPage“, um die Managerseite anzuzeigen.
  • Und so weiter…

Dieser Ansatz gewährleistet eine reibungslose und schnelle Navigation, ohne dass die Anwendung neu geladen werden muss.

Verwaltung von Berechtigungen

Nicht alle Menüschaltflächen sind für jeden Benutzer sichtbar. Ihre Sichtbarkeit hängt von den Benutzerrollen ab:

• Kollaborateur: Zugriff nur auf die Seite „Mitarbeiter“.
• Manager: Zugriff auf die Seiten Manager und Mitarbeiter.
• HR: Zugriff auf alle Seiten.

Wir verwenden die Statusverwaltung, um dynamisch zu steuern, welche Optionen je nach der Rolle des angemeldeten Benutzers sichtbar sind.

Handhabung mehrerer Rollen

Ein Manager hat eine Doppelrolle:

• Als Mitarbeiter führt er seine eigene Leistungsbeurteilung durch.
• Als Manager überprüft und bestätigt er die Leistungsbeurteilungen seiner Teammitglieder.

Um dies zu handhaben, definieren wir zwei Datenquellen:

• userInfo.maxRole: Stellt die höchste dem Benutzer zugewiesene Rolle dar.
• userInfo.role: Stellt die derzeit aktive Rolle dar, die der Benutzer verwendet.

Auffüllen der Datenquellen:

Während der Authentifizierung mit der Funktion ds.authentify() werden die Benutzerinformationen im Sitzungsspeicher gespeichert:

var $obj : Object
$obj :=Session.storage

If ($obj.Employee=Null)
Use ($obj)
$obj .Employee:=New shared object
End use
End if

Use ($obj.Employee)
$obj .Employee.ID:=$employee.ID
$obj .Employee.name:=$employeeFirstname+" "+$employee.Lastname
$obj .Employee.role:="Mitarbeiter"
$obj .Employee.maxRole:="Mitarbeiter"
End Use

Eine Hilfsfunktion getUserInfo() wird bereitgestellt, um Benutzerdetails innerhalb einer Webseite abzurufen:

exposed Function getUserInfo: Object
If (Session=Null)
return Storage .Employee
Else
return Session .storage.Employee
End if

Bei dem onClick-Ereignis der Login-Schaltfläche werden beide Funktionen aufgerufen:

• ds.authentify()
• ds.getUserInfo()

Erstellen und Konfigurieren von Zuständen:

• Klicken Sie auf die Schaltfläche „+“, um Zustände hinzuzufügen.

• Erstellen Sie einen maxManager-Zustand, in dem das Menü „Human Resources“ ausgeblendet ist (Anzeige: keine).

• Erstellen Sie einen maxCollaborator-Zustand, bei dem die Optionen Human Resources, Manager und Collaborator ausgeblendet sind. Da ein Mitarbeiter nur Zugriff auf eine Seite hat, wird das Navigationsmenü überflüssig.

Definieren Sie bedingte Anzeigeregeln:

Wir wollen:

• Wenn userInfo.maxRole = „hr“, wird der Standardstatus angezeigt.
• Wenn userInfo.maxRole = „manager“ ist, wird der Status „Manager“ angezeigt.
• Wenn userInfo.maxRole = „collaborator“, wird der Status „Collaborator“ angezeigt.

Diese Regeln lassen sich leicht mit dem Konfigurationseditor für bedingte Zustände von Qodly Studio umsetzen.

Weitere Details zur Zustandsverwaltung finden Sie in unserem früheren Blogbeitrag: Machen Sie Ihre Qodly-Anwendungen mit Zuständen dynamisch und interaktiv.

Es gibt weitere Zustände, um das Menü, das Anmeldefenster oder den ausgewählten Menüpunkt zu verwalten. Es liegt an Ihnen, zu erforschen, wie sie konfiguriert sind, und Sie können sich gerne an uns im Forum wenden, wenn Sie Fragen haben.

Optimieren für verschiedene Bildschirmgrößen

Unsere Anwendung ist sowohl für die Nutzung auf dem Desktop als auch auf dem Tablet konzipiert. Um ein optimales Nutzererlebnis zu gewährleisten, ist die Navigationsleiste vollständig reaktionsfähig.

• Ausblenden bestimmter Elemente, wenn der Bildschirm zu klein ist (z. B. der Name der Anwendung und der Name des angemeldeten Benutzers).
• Neuanordnung des Menüs in einer Spaltenanordnung auf kleineren Bildschirmen, um den Platz zu maximieren.

Das dynamische Ausblenden von Elementen wird über CSS-Media-Queries verwaltet (z. B. mit max-width), während Flexbox mit der Option Wrap dafür sorgt, dass sich das Menü automatisch an den verfügbaren Platz anpasst.

• Großer Bildschirm

• Mittlerer Bildschirm

• Kleiner Bildschirm

Weitere Einblicke in die CSS-Anpassung in Qodly Studio finden Sie in unserem früheren Beitrag: Anpassen Ihrer Qodly-Oberflächen mit CSS.

Nächste Schritte

Sie verfügen nun über die wesentlichen Elemente, um eine interaktive und dynamische Navigationsleiste mit 4D Qodly Pro zu erstellen.

Wir ermutigen Sie, Ihre Implementierungen mit anderen zu teilen und Fragen im 4D Forum zu stellen, um mit der Community in Kontakt zu bleiben.