Progettazione di una barra dei menu interattiva e dinamica nell’applicazione Qodly

Nel blog di questa settimana, diamo uno sguardo alla navigazione. La navigazione è un elemento chiave di qualsiasi applicazione web. Un sistema di navigazione ben strutturato consente agli utenti di trovare rapidamente ciò di cui hanno bisogno e migliora la loro esperienza complessiva.

Con 4D Qodly Pro, la gestione della navigazione è semplice e flessibile. Utilizzando il componente Page Loader, è possibile caricare dinamicamente le pagine in base alle azioni dell’utente.

In questo articolo analizzeremo come impostare una barra di navigazione efficiente utilizzando 4D Qodly Pro. Utilizzeremo come esempio la nostra applicazione Performance Review, che potete scaricare da GitHub (link da aggiungere). Ci occuperemo del suo design, delle interazioni e della gestione dei permessi per creare un’esperienza continua e personalizzata per ogni ruolo dell’utente.

Applicazione Performance Review

Caricamento delle pagine con il caricatore di pagine

Il caricamento di una pagina con 4D Qodly Pro è intuitivo. È sufficiente trascinare e rilasciare il componente Page Loader sulla vostra interfaccia e associarlo a una fonte di dati basata sul testo.

Il Page Loader carica automaticamente la pagina corrispondente al valore memorizzato nella fonte di dati. Aggiornando questo valore, gli utenti possono navigare senza problemi tra le diverse pagine dell’applicazione.

Scegliere il giusto tipo di navigazione

Ora che abbiamo capito come caricare le pagine usando il Page Loader, dobbiamo determinare come modificare dinamicamente questa fonte di dati per facilitare una navigazione fluida e intuitiva.

Esistono tre tipi principali di navigazione:

• Barra dei menu: Una barra di navigazione tradizionale, sempre visibile, ideale per un accesso rapido.
• Menu Hamburger: Un menu pieghevole a cui si accede tramite un’icona, perfetto per le applicazioni mobili.
• Menu laterale: Posizionato lateralmente, adatto ad applicazioni complesse con più sezioni.

Il tipo di navigazione deve essere scelto in base alle esigenze specifiche dell’applicazione e degli utenti target. Un sistema di navigazione ben progettato migliora l’esperienza dell’utente e garantisce un facile accesso alle funzionalità principali.

Per l’applicazione Performance Review abbiamo optato per una barra di menu classica. Questo approccio consente di accedere rapidamente alle diverse sezioni, garantendo al contempo un’esperienza fluida sia sui dispositivi desktop che su quelli tablet.

Creare una barra di navigazione

La nostra barra di navigazione è stata progettata per essere semplice, efficiente e facile da usare. Ecco le sue caratteristiche principali:

• Una barra di navigazione ad altezza fissa con l’opzione “sticky” per rimanere visibile in alto.
• L’icona e il nome dell’applicazione.
• Un menu a tendina Risorse umane contenente:
  • Collaboratore
  • Revisione
  • Formazione
• Un pulsante Manager.
• Un pulsante Collaboratore.
• Il nome dell’utente collegato.
• Un pulsante di logout.

Creazione della barra superiore

La barra di navigazione viene visualizzata sempre nella parte superiore dello schermo. Per ottenere questo risultato, creiamo una casella di stile con una proprietà sticky:

• position: sticky assicura che la barra rimanga visibile durante lo scorrimento.
  
• top: 0 e left: 0 posizionano la barra in alto a sinistra della pagina.

Aggiunta dell’icona e del titolo dell’applicazione

Utilizziamo un riquadro di stile con Flexbox per allineare gli elementi e mantenere la reattività su diverse dimensioni dello schermo.

All’interno di questa casella:

• Un componente Immagine per l’icona.
• Un componente Testo per visualizzare il nome dell’applicazione.

Creazione dei menu

Viene aggiunto un secondo riquadro di stile (utilizzando Flexbox) per contenere il menu a discesa e i due pulsanti di navigazione.

Creazione del menu a discesa “Risorse umane

Per creare il menu a tendina, utilizziamo un componente personalizzato chiamato Popover. È possibile scaricare questo componente da GitHub.

• Trascinare e rilasciare il componente Popover sulla pagina.
• Nella sezione del menu, aggiungere un testo statico intitolato Risorse umane.
• Nella sezione di sovrapposizione, inserire tre pulsanti intitolati Collaboratore, Recensioni e Formazione.

Per maggiori dettagli sui componenti personalizzati, consultate il nostro precedente post sul blog: “Estendere la nostra applicazione Qodly con componenti personalizzati”.

Aggiunta del pulsante Manager e Collaboratore

È sufficiente aggiungere due pulsanti separati, denominati “Manager” e “Collaboratore”.

Creare l’area delle informazioni registrate

Un terzo riquadro di stile (utilizzando Flexbox) viene utilizzato per visualizzare il nome dell’utente connesso e fornire un’azione di logout.

• Un componente Text, legato alla fonte di dati username, visualizza il nome dell’utente connesso sul lato destro della barra di navigazione.

• Il pulsante Logout consente agli utenti di uscire rapidamente. Nell’evento onClick del pulsante, assegnare l’azione di logout di autenticazione standard.

Per maggiori dettagli sull’autenticazione, consultate questo precedente post del blog: Integrare l’autenticazione degli utenti nelle applicazioni Qodly.

Implementare le interazioni di navigazione

La navigazione è gestita attraverso una variabile chiamata pageName, che funge da fonte di dati per il Page Loader.

• Ogni elemento del menu è associato a un’azione che aggiorna il valore di pageName.
• Quando l’utente fa clic su un pulsante, la pagina corrispondente viene caricata dinamicamente.
• Per ogni pulsante, applichiamo l’azione Set Datasource all’evento onClick:
  • pageName = “CollaboratorPage” per visualizzare la pagina dei collaboratori.
  • pageName = “ManagerPage” per visualizzare la pagina del manager.
  • E così via…

Questo approccio garantisce un’esperienza di navigazione fluida e veloce senza ricaricare l’applicazione.

Gestione dei permessi

Non tutti i pulsanti del menu sono visibili a tutti gli utenti. La loro visibilità dipende dai ruoli degli utenti:

• Collaboratore: Accesso solo alla pagina Collaboratore.
• Manager: Accesso alle pagine Manager e Collaboratore.
• HR: accesso a tutte le pagine.

Utilizziamo la gestione degli stati per controllare dinamicamente quali opzioni sono visibili in base al ruolo dell’utente connesso.

Gestione di ruoli multipli

Un manager ha un doppio ruolo:

• Come collaboratore, completa la propria valutazione delle prestazioni.
• Come manager, esamina e convalida le valutazioni delle prestazioni dei membri del suo team.

Per gestire questo aspetto, definiamo due fonti di dati:

• userInfo.maxRole: Rappresenta il ruolo più alto assegnato all’utente.
• userInfo.role: Rappresenta il ruolo attualmente attivo dell’utente.

Popolamento delle fonti di dati:

Durante l’autenticazione, utilizzando la funzione ds.authentify(), le informazioni dell’utente vengono memorizzate nella memoria di sessione:

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:="Collaboratore"
$obj .Employee.maxRole:="Collaboratore"
End Use

Viene fornita una funzione di aiuto getUserInfo() per recuperare i dettagli dell’utente all’interno della pagina Web:

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

Sull’evento onClick del pulsante di accesso, vengono richiamate entrambe le funzioni:

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

Creazione e configurazione degli Stati:

• Fare clic sul pulsante “+” per aggiungere gli stati.

• Creare uno stato maxManager, in cui il menu Risorse umane è nascosto (display: none).

• Creare uno stato maxCollaboratore, in cui le opzioni Risorse umane, Manager e Collaboratore sono nascoste. Poiché un collaboratore ha accesso a una sola pagina, il menu di navigazione diventa superfluo.

Definire regole di visualizzazione condizionale:

Vogliamo:

• Se userInfo.maxRole = “hr”, visualizzare lo stato predefinito.
• Se userInfo.maxRole = “manager”, visualizzare lo stato Manager.
• Se userInfo.maxRole = “collaboratore”, visualizzare lo stato Collaboratore.

Queste regole sono facilmente implementabili utilizzando l’editor di configurazione degli stati condizionali di Qodly Studio.

Per maggiori dettagli sulla gestione degli stati, consultate il nostro precedente post sul blog: Rendere le applicazioni Qodly dinamiche e interattive con gli stati.

Esistono altri stati per gestire il menu, la finestra di accesso o la voce di menu selezionata. Sta a voi esplorare le modalità di configurazione e, se avete domande, non esitate a raggiungerci sul forum.

Ottimizzazione per schermi di diverse dimensioni

La nostra applicazione è stata progettata per essere utilizzata sia su desktop che su tablet. Per garantire un’esperienza utente ottimale, la barra di navigazione è completamente reattiva.

• Nascondere alcuni elementi quando lo schermo è troppo piccolo (ad esempio, il nome dell’applicazione e il nome dell’utente connesso).
• Riorganizzazione del menu in colonne su schermi più piccoli per massimizzare lo spazio.

Il nascondimento dinamico degli elementi è gestito tramite media queries CSS (ad esempio, utilizzando max-width), mentre Flexbox con l’opzione Wrap assicura che il menu si adatti automaticamente in base allo spazio disponibile.

• Schermo grande

• Schermo medio

• Schermo piccolo

Per ulteriori approfondimenti sulla personalizzazione dei CSS in Qodly Studio, consultate il nostro precedente post: Personalizzare le interfacce Qodly con i CSS.

I prossimi passi

Ora avete gli elementi essenziali per creare una barra di navigazione interattiva e dinamica con 4D Qodly Pro.

Vi invitiamo a condividere le vostre implementazioni e a porre domande sul Forum 4D per continuare a coinvolgere la comunità.