Navigazione dell'app

Le schermate sono le pagine; la navigazione è ciò che porta le persone fino a loro. In Keplin non vive dentro nessuna schermata: è un documento proprio dell'app, disegnato in un editor visuale e servito attorno a qualsiasi schermata sia aperta.

Ed è disegnata per dispositivo: la barra superiore del computer, il cassetto del cellulare e la barra delle azioni del tablet sono tre design indipendenti, ognuno con i suoi menu.

#Aprire l'editor

Nella barra laterale dell'app, scheda UI, il primo elemento si chiama Navigazione. Clicca e si apre in una scheda dello spazio di lavoro.

Quello che si vede al centro non è un modulo: è la pagina dell'app, disegnata come resterà. La barra in alto, il contenuto della schermata in basso (Contenuto della schermata), il marchio a sinistra. Modifichi mettendoci mano.

Sotto il titolo ci sono i controlli che comandano ciò che stai vedendo:

Controllo	Che cosa fa
Web (1280px) / Tablet (768px) / Mobile (390px)	Sceglie il dispositivo che stai disegnando.
Modalità (solo tablet e cellulare)	La forma della navigazione in quel dispositivo.
Menu iniziale	Quale dei menu si apre quando qualcuno entra nell'app.

#I gesti

Gesto	Che cosa succede
Clic su un menu	Lo seleziona (e, in un contesto, ne mostra la barra laterale).
Doppio clic su un menu	Apre il modale Elemento selezionato, dove si modifica tutto.
Trascinare un menu	Lo sposta di zona o lo riordina. Si lascia solo dove è valido.
+	Aggiunge un menu in quel punto.
× nell'angolo di un menu	Lo rimuove.
Clic sul marchio	Apre il modale Logo dell'app.

#I tipi di menu

Il pulsante + di ogni zona mostra i tipi che quel punto accetta:

Tipo	Che cos'è
Menu	Porta a una schermata dell'app. È l'elemento normale.
Sottomenu	Raggruppa altri menu — nel cassetto e nelle barre laterali.
Contesto (sidebar)	Un menu che, quando viene scelto, attiva una barra laterale propria con i suoi figli. È come se dividesse l'app in aree.
Separatore	Una linea divisoria.
Menu utente	L'avatar di chi sta usando l'app, con le sue voci e l'Esci.
Notifiche	La campanella, con il conteggio automatico delle non lette.
Lingua	Il selettore della lingua: le lingue dell'app, ognuna con il proprio nome.
Area widget	Una schermata barra disegnata dentro la barra: un dropdown per scegliere l'azienda, un riepilogo, una ricerca.

Non tutti i tipi vanno bene in tutti i punti, e l'editor offre solo quelli validi: un contesto non può contenere un altro contesto, un sottomenu porta solo elementi, il menu utente porta solo elementi, separatori e la lingua, e il cassetto del cellulare non ha contesti (usa i sottomenu).

#Le zone della barra

Nella barra superiore, i menu si sistemano in tre zone, e il suggerimento nell'editor dice l' essenziale: Trascina i menu tra le zone della barra (sinistra / centro / destra) per creare gruppi.

Zona	Uso abituale
Gruppo a sinistra	La navigazione principale, subito dopo il marchio.
Gruppo al centro	Un gruppo in evidenza. Se resta vuota, non occupa spazio.
Gruppo a destra	Il menu utente, la campanella, le scorciatoie.

Dentro la barra laterale di un contesto — e nel cassetto — le zone sono due: Gruppo in alto e In basso (quest'ultima si incolla in fondo, perché "Impostazioni" e "Aiuto" restino dove ci si aspetta).

#Creare un menu

1. Scegli il dispositivo nella barra di contesto.
2. Clicca sul + della zona in cui lo vuoi.
3. Scegli il tipo.
4. Il menu nasce con un nome generico e resta selezionato — facci doppio clic per aprire il modale Elemento selezionato.
5. Compila:

Campo	Che cos'è
Icona	Un'icona della libreria o un SVG dagli asset dell'app.
Nome del menu	Il testo che appare. È una frase dell'app — entra nelle traduzioni.
Schermata…	La schermata di destinazione (solo in Menu).
(parametri)	Se la schermata di destinazione ha parametri di percorso, appare un campo per ogni parametro per dargli un valore fisso.
Solo icona (il nome appare nel tooltip)	Lascia nella barra soltanto l'icona.

6. Chiudi con Fatto e salva con Salva.

Il pulsante Elimina elemento, nello stesso modale, elimina il menu.

#Contesti e barre laterali

Un Contesto (sidebar) è il modo di dare a un'area dell'app un menu proprio: scegli "Vendite" nella barra superiore e appare a sinistra la barra laterale con le schermate di vendita. I figli del contesto sono gli elementi di quella barra.

Nel modale del contesto, la sezione Sidebar di questo contesto la rifinisce:

Campo	Opzioni
Comportamento	Fissa (sempre aperta) · Comprimibile (il pulsante comprime a icone) · Mini (icone; si espande al passaggio del mouse) · Mini con pannello (l'hover apre l'albero del menu)
Larghezza	Fra 180 e 400 pixel.
All'espansione (solo nella modalità mini)	Si sovrappone al contenuto o Spinge il contenuto.
Inizia compressa (solo nella modalità comprimibile)	Come si apre la prima volta.

La barra laterale resta aperta mentre si naviga nell'area, comprese le pagine che non sono in nessun menu (un dettaglio aperto da un elenco), e anche dopo un ricaricamento. Una schermata di un altro contesto la cambia, e un elemento della barra superiore senza contesto la chiude. Perché una pagina di dettaglio evidenzi il menu giusto anche con un link diretto, scegli la Schermata padre nelle proprietà della schermata, nella categoria Navigazione.

#Il menu utente

Il Menu utente è un elemento come gli altri: può stare nella barra superiore, dentro un contesto, nel cassetto o nella barra compatta. Selezionarlo apre il suo popup, ed è lì che si aggiungono voci con il + (Menu, Separatore o Lingua).

Nel modale restano le opzioni che non sono visive:

Opzione	Che cosa fa
Mostra il nome	Il nome di chi sta usando l'app appare nell'intestazione del menu.
Mostra l'utente (accesso)	Anche il nome utente.
Opzione «Esci»	Include l'uscita in fondo al menu.
Testo di «Esci»	Un testo proprio; vuoto usa Quello di sistema (tradotto).

Senza icona, l'avatar mostra le iniziali del nome — ed è ciò che il selettore di icona chiama Nessuna icona (iniziali).

#Notifiche

L'elemento Notifiche è la campanella: solo icona, con la pill delle non lette che si aggiorna da sola. Il clic apre le ultime notifiche e il Vedi altre apre il pannello con tutte. Nel modale, Notifiche nel dropdown decide quante ne appaiono per volta (fra 1 e 20).

#Lingua

L'elemento Lingua è il selettore della lingua. Mostra le lingue dell'app, definite nella sezione Traduzioni delle impostazioni, ognuna con il proprio nome («Português», «English»), perché chi non capisce la lingua attuale trovi la sua. Scegliere una lingua cambia i testi dell'app senza ricaricare la pagina, e la scelta resta salvata sul dispositivo.

Può stare nella barra superiore, in una barra laterale, nel cassetto, nella barra compatta e nella barra delle azioni. Dentro il Menu utente, compare come la voce «Lingua · Italiano», che apre l'elenco lì stesso. Nel modale, Mostra la lingua in uso decide cosa mostra il pulsante: Nome (Italiano) o Codice (IT).

In un'app con una sola lingua, il selettore non compare.

Alla prima visita, prima che qualcuno scelga, l'app si apre nella lingua del browser o del telefono se l'app ce l'ha; altrimenti, nella lingua base. Una schermata senza menu, come quella di accesso, può offrire la scelta con un pulsante che chiama keplin.i18n.setLocale.

#Aree widget

Un'Area widget mette dei widget in una barra: un dropdown per scegliere l'azienda nella barra superiore, o un riepilogo in fondo alla barra laterale di un contesto. Il contenuto dell'area è una schermata dell'app, disegnata nel designer come qualsiasi altra, con la presentazione Barra (area widget).

Per creare un'area widget:

1. Nella sezione Schermate, crea una schermata.
2. Nelle proprietà della schermata, nella categoria Presentazione, scegli Barra (area widget) in Modalità.
3. In Larghezza (px) e Altezza (px), imposta la dimensione dell'area. Per impostazione predefinita, misura 320 per 48 pixel.
4. Disegna i widget.
5. In Navigazione, clicca sul + della zona in cui vuoi l'area e scegli Area widget.
6. Fai doppio clic sulla voce e, in Schermata dell'area, scegli la schermata barra.
7. Clicca su Salva.

La zona della voce decide dove compare l'area e con quale dimensione:

Dove si trova la voce	Dove compare l'area
Gruppo a sinistra, Gruppo al centro o Gruppo a destra della barra superiore	Nella barra superiore, con la larghezza e l'altezza della schermata.
Gruppo in alto o In basso nella barra laterale di un contesto	Nella barra laterale, con la larghezza della barra e l'altezza della schermata.
Cassetto	Nel cassetto, con la larghezza del cassetto e l'altezza della schermata.
Header	Accanto al marchio, con la larghezza e l'altezza della schermata.

L'area non va nella barra delle azioni né nel menu utente. In una barra laterale ridotta a icone, non compare.

L'area resta aperta durante la navigazione: i dati si caricano una volta e la scelta fatta non si perde al cambio di pagina. In KeplinGo, l'area funziona allo stesso modo nell'header e nel cassetto.

#Collegare l'area alle pagine

L'area e le pagine comunicano tramite lo stato dell'app: valori con un nome, gli stessi in tutte le schermate. Per esempio, perché un dropdown nella barra superiore filtri le pagine per l'azienda scelta:

1. Nel dropdown dell'area, in Collegamento ai dati, scegli Stato e scrivi la Chiave azienda.
2. Nelle pagine, in un filtro del datastore, scegli l'origine Stato e scrivi la stessa chiave. L'elenco rilegge i dati quando la scelta cambia.
3. Per mostrare il valore, collega un'Etichetta alla stessa chiave.

Il codice degli eventi legge e scrive gli stessi valori con keplin.state.

#Altezza della barra

La barra superiore è alta 48 pixel per impostazione predefinita. Perché ci stia un'area più alta, cambia Altezza della barra, nei controlli sotto il titolo dell'editor, con un valore tra 40 e 96 pixel. Ogni dispositivo ha la sua altezza, e nelle modalità compatte vale per l'header.

#Pill di valore

Qualsiasi menu (tranne i separatori e la campanella) può mostrare una pill con un numero vivo — gli ordini da processare accanto a "Ordini", le richieste in sospeso accanto ad "Approvazioni".

1. Nel modale dell'elemento, attiva Mostra pill con valore.
2. Scegli l'API che porta i dati (Scegli API…).
3. In Valore, scegli Conteggio (n. di record) o Campo del 1° record — in questo caso, indica anche il Campo.
4. Nascondi con valore vuoto o zero evita la pill che dice "0".

La pill si aggiorna in tempo reale: quando i dati cambiano, il numero cambia — senza che nessuno ricarichi la pagina.

#Il logo dell'app

Clicca sul marchio, a sinistra della barra, per aprire il modale Logo dell'app:

Campo	Che cosa fa
Icona o immagine	Sceglie un'icona della libreria o un file dagli Asset dell'app.
Mostra il nome dell'app	Il nome accanto al marchio.
Inquadratura nella barra	Per immagini degli asset (SVG, PNG, JPG, GIF o WebP): Scala, Larghezza del riquadro, Altezza del riquadro e il posizionamento trascinando l'immagine.
Adatta al riquadro	Ripristina scala e posizione.
Nessuna inquadratura	Disattiva l'inquadratura.

L'inquadratura è la risposta al logo che "non ci sta": trascini e scali finché sta bene nella barra, e il modale stesso garantisce che il file resta intatto — il ritaglio è solo visivo e reversibile. Il riquadro è alto 32 pixel per impostazione predefinita, in una barra di 48: un logo orizzontale cresce solo se aumenti l'Altezza del riquadro (fino a 44); la Larghezza del riquadro da sola lascia spazio vuoto intorno a un logo piccolo. Senza inquadratura, l'immagine sta in un riquadro di 24 pixel.

La striscia di anteprima del modale usa i colori reali della barra dell'app. Se la barra è scura, il file del logo deve essere la versione chiara (bianca) del marchio — il logo a colori pensato per il fondo bianco sparisce sulla barra.

La zona del logo può avere un colore di sfondo diverso dal resto della barra in alto: è il colore Sfondo della zona del logo, nel gruppo Navigazione del Tema delle impostazioni dell'app. Tra la zona del logo e i menu non c'è separatore; quando i due colori sono diversi, il cambio di colore è il confine. Vale per la barra in alto su web e tablet; nella barra compatta e nel cassetto il logo segue il colore della barra.

La zona del logo non è mai più stretta del marchio: con una barra laterale mini o ripiegata, i menu in alto iniziano dopo il marchio, non sopra di esso.

La scheda del browser mostra «Nome della schermata · Nome dell'app», e solo «Nome dell'app» in una schermata senza nome; nella pagina di accesso mostra «Accedi · Nome dell'app».

#Menu iniziale

Menu iniziale, nell'angolo in alto a destra, decide da dove l'app si apre. Si sceglie uno dei menu (non una schermata sciolta), e viene scelto per dispositivo — il cellulare può aprirsi su un pannello diverso da quello del computer.

Se un dispositivo non ha una scelta propria, eredita quella del successivo (cellulare → tablet → web); e se non ce n'è nessuna, l'app si apre sul primo menu che porta a una schermata.

#Un design per dispositivo

Il Web è sempre una Barra superiore. Il tablet e il cellulare hanno un selettore Modalità:

Modalità	Come resta
Barra superiore (solo tablet)	Uguale al computer: marchio, menu e contesti in una barra.
Menu hamburger	Una barra compatta con il pulsante ☰, che apre il cassetto con l'albero dei menu.
Barra delle azioni	Una barra in fondo, in stile applicazione mobile, con fino a 5 voci — e senza cassetto.

Nelle modalità compatte ci sono ancora due file proprie:

• L'Header — fino a 4 azioni accanto al marchio (il menu utente e la campanella stanno bene qui).
• La Barra delle azioni — fino a 5 voci in fondo, ognuna un Pulsante o un Menu azioni.

Quando il limite è raggiunto, la piattaforma dice perché: La barra delle azioni ha già 5 elementi (massimo). / L'header accetta al massimo 4 azioni.

#Chi vede che cosa

L'editor disegna; chi decide chi vede ogni menu è Impostazioni dell'app ▸ Autorizzazioni, nella scheda Menu — per ruolo e per dispositivo.

La regola vale la pena saperla: al contrario delle schermate, un menu è visibile per impostazione predefinita. La porta è la schermata, e quella è già chiusa; nascondere il menu serve a togliere un gruppo intero dalla vista, o a togliere la campanella a chi non riceve nulla. Nascondere un gruppo si porta via i figli, e un elemento che punta a una schermata inaccessibile sparisce da solo.

#Perché no…?

• Perché le mie modifiche sono sparite? Non sono state salvate. La navigazione ha il pulsante Salva — e avvisa prima che tu chiuda una scheda con modifiche da salvare.
• Perché non riesco a lasciare il menu dove voglio? Quel punto non accetta quel tipo. I bersagli non validi non si accendono nemmeno: un contesto dentro un contesto, un sottomenu dentro un menu utente, un separatore nella barra superiore.
• Perché non vedo i menu sul cellulare? Il cellulare ha un albero proprio e può essere vuoto. Scegli Mobile (390px) e disegnalo.
• Perché è sparito un menu nell'app pubblicata? O è stato nascosto in Impostazioni ▸ Autorizzazioni ▸ Menu per quel ruolo, oppure punta a una schermata a cui quella persona non ha accesso.
• Perché il logo appare tagliato? È inquadrato. Apri il modale e usa Adatta al riquadro, oppure Nessuna inquadratura.
• Perché non riesco a cambiare il tipo di un menu? Non si cambia. Elimina e crea con il tipo giusto — è l'unica operazione che la piattaforma non ti lascia fare a metà.
• Perché la pill mostra sempre 0? Attiva Nascondi con valore vuoto o zero, oppure verifica che l'API scelta restituisca davvero dei record.
• Perché il logo appare piccolo, con spazio intorno? Il riquadro è alto 32 pixel per impostazione predefinita e un logo orizzontale ci sta con poca larghezza. Alza l'Altezza del riquadro (fino a 44) invece della larghezza.
• Perché non vedo il logo nella barra? Se la barra è scura e il file è la versione a colori per fondo bianco, carica negli Asset la versione bianca del marchio e sceglila nel modale.
• Perché la mia schermata non compare in Schermata dell'area? Compaiono solo le schermate con la presentazione Barra (area widget). Cambia la Modalità nella categoria Presentazione delle proprietà della schermata.
• Perché l'area widget non compare nella barra laterale? La barra è ridotta a icone, e lì l'area non ci sta. Espandi la barra.