Come primo esempio, costruiamo una Vista che semplicemente elenchi un tipo di Entità che hai disegnato e caricato nella tua app. Esemplifico il caso costruendo la Vista "Magazzino" della app Vicinato, che elenca gli Attrezzi messi a disposizione per il prestito.
Creare una nuova Vista
Ecco come creare una nuova Vista:
| crea la Vista | In Struttura - Viste clicca Aggiungi nuova vista e digita il nome della nuova vista (es. "Magazzino") |
| seleziona cosa mostrare | In Mostra seleziona che tipo di Entità mostrare nella Vista (es. contenuto di tipo "Attrezzo") |
| descrivi la Vista | Attiva Descrizione e descrivi a tua memoria futura cosa fa la Vista (es. "Elenco degli Attrezzi disponibili al prestito") |
| definisci il link di richiamo della Vista | In Percorso digita il link con cui sarà richiamata la Vista (es. "/magazzino") |
| scegli come mostrare | Attiva la creazione di una Pagina, mostra il risultato come Tabella.. In Elementi da visualizzare scegli quanti elementi mostrare per pagina (es. 20) e attiva Usare un paginatore. Salva. |
La tua prima Vista è già pronta al link da te indicato per mostrare le Entità da te scelte.
L'editor della Vista e le sue sezioni
Salvata la Vista, si apre automaticamente l'editor della Vista (Views UI), composto da diverse sezioni, ognuna delle quali configura un aspetto della Vista. Imparare a costruire le Viste consiste essenzialmente nell'imparare cosa scrivere nelle diverse sezioni. Le spiegherò a mano a mano che ci serviranno per costruire le Viste di esempio.
| Visualizzazioni elenca le Visualizzazioni della Vista | Comandi di gestione della Vista | |||
| Nome della Visualizzazione che si sta modificando | Comandi di gestione della Visualizzazione | |||
| Formato definisce come mostrare le Entità (tabella, griglia, elenco, mappa, grafico ecc.) | Impostazioni pagina definisce il link della pagina e la voce di menù con cui richiamarla (*) | Relazioni elenca le relazioni tra Entità che consentono di mostrare nella Vista altre Entità | ||
Accesso | ||||
| Campi elenca quali Campi delle Entità considerare | Intestazione elenca cosa mostrare sopra l'elenco delle Entità | Filtri contestuali elenca i Filtri che prelevano i loro valori dal link di richiamo della Vista | ||
| Criteri del filtro elenca i filtri che selezionano le Entità da elencare | Piè di pagina elenca cosa mostrare sotto l'elenco delle Entità | Form esposto definisce come mostrare i Filtri esposti all'Utente | ||
| Criteri di ordinamento elenca i Campi su cui ordinare le Entità | Comportamento se non ci sono risultati elenca cosa mostrare se non ci sono Entità da mostrare | Altro contiene altre configurazioni Vista | ||
| Paginazione definisce quante Entità per volta mostrare | ||||
| Anteprima mostra come viene mostrata la Vista agli Utenti, in base ai valori digitati in Anteprima con i filtri contestuali | ||||
(*) Questa sezione cambia nome e contenuto in base al tipo di Visualizzazione: si chiama Impostazione pagina se si è scelto di creare una pagina.
Nell'editor troviamo precaricate le scelte già effettuate al momento della creazione della Vista; per l'esempio sopra riportato:
- nella sezione Visualizzazioni compare una Visualizzazione di tipo Pagina e, come Formato ritroviamo Tabella
- nella sezione Impostazioni pagina - Percorso compare il link di richiamo della Vista ("/magazzino")
- nella sezione Criteri del filtro compare un Filtro che limita la Vista ai soli Contenuti di tipo "Attrezzo"
- nella sezione Campi compare il Campo "Titolo" degli Attrezzi
- nella sezione Paginazione compare l'esistenza di un paginatore ogni 20 elementi
Se abbiamo caricato nella app qualche Attrezzo di prova, sotto Anteprima possiamo già vedere come si presenterà il Magazzino: una tabella che elenca 20 Attrezzi per pagina, con i comandi per cambiare pagina sotto di essa. Vediamo ora come migliorare questo primo risultato, mostrando altre informazioni sugli Attrezzi e riordinando i contenuti.
Come elencare le Entità (sezione Formato)
La sezione Formato della Vista definisce come mostrare l'elenco delle Entità. I Formati disponibili nativamente sono Tabella (una riga per ogni Entità, una colonna per ogni Campo mostrato), Responsive grid (matrice di Entità), Elenco non formattato (una riga per ogni Campo di ogni Entità) ecc. I moduli aggiuntivi possono introdurre nuovi formati, ad esempio vedremo più avanti come presentare Entità georeferenziate su una mappa interattiva.
Formato Tabella
Il formato Tabella è quello più intuitivo e più utile in caso di un numero elevato di Campi, però può essere di difficile lettura sui dispositivi con schermo piccolo (smartphone). Per ovviare a questo problema ci sono diverse strade.
Per default, nel formato Tabella ogni Campo è mostrato in una colonna a se stante. Cliccando Impostazioni a fianco del formato si può selezionare per ogni Campo se presentarlo nella colonna di un altro Campo, riducendo così il numero di colonne della tabella. Se si aggregano più Campi in una sola colonna è opportuno specificare come separarne i valori nella visualizzazione: ad esempio, con uno spazio oppure con il codice HTML "<br>" che introduce un ritorno a capo.
Nelle ultime versioni di Drupal è stata introdotta le tabelle "responsive", che si adattano alle dimensioni dello schermo. Per le Viste in formato tabellare è stata introdotta la possibilità di classificare i Campi per "priorità" selezionandola in Impostazioni - Responsive: i Campi con priorità "alta" saranno mostrati sempre, mentre quelli di priorità "media" e "bassa" saranno mostrati solo se le dimensioni dello schermo lo consentono.
Un altro metodo - spesso più comodo perché automatico - consiste nel convertire le tabelle in pile (stack), mostrando i Campi dell'Entità impilati uno sopra l'altro. Ciò è reso possibile dal modulo aggiuntivo "Responsive Tables Filter". Installato ed attivato il modulo, in Configurazione - Responsive Tables scegli la modalità di default di restringimento delle tabelle (tipicamente Stack). Ecco ad esempio come si adatta automaticamente il Magazzino Attrezzi della app di esempio "Vicinato" su uno schermo largo e su uno stretto grazie a questo modulo:
Schermo largo:
Schermo stretto:
Aggiungere Campi nelle sezioni
La configurazione di molte sezioni della Vista consiste nell'aggiunta e nella configurazione di Campi nella sezione. Le modalità di identificazione, selezione e configurazione di un Campo sono sempre le stesse e quindi le spiego qui, una volta per tutte:
| per aggiungere un Campo in una sezione della Vista | Clicca Aggiungi a fianco della sezione. Appare una finestra Aggiungi Campi, che elenca tutti i Campi disponibili per quella sezione. |
| cerca il Campo da aggiungere | Nella finestra Aggiungi Campi seleziona in Categoria il tipo di Entità cui appartiene il Campo (es. se stai cercando il nome utente degli Utenti, in Categoria seleziona Utente). In Cerca digita una parte del nome del Campo (es: "nome"); se ci sono più Campi con lo stesso nome, verifica nella colonna Descrizione che il Campo sia quello desiderato.
|
| seleziona il Campo | Identificato il Campo, per selezionarlo attiva la casella a fianco del Campo e clicca Aggiungi e configura campi. Appare la finestra di configurazione del Campo. |
| seleziona l'eventuale relazione tra Entità che consente di raggiungere il Campo | Nella finestra di configurazione del Campo, seleziona la Relazione che permette di raggiungere il Campo. Se il Campo è uno dei Campi dell'Entità principale su cui stai costruendo la Vista, non selezionare nulla. Sul concetto di Relazione tornerò in una prossima Guida, quindi per ora non preoccuparti se non è chiaro. |
| completa la configurazione del Campo | In base alla sezione in cui stai lavorando ed al Campo selezionato, la finestra di configurazione può chiedere altre informazioni, che spiegherò caso per caso; alla fine clicca Salva |
Quali Campi mostrare (sezione Campi)
La sezione Campi elenca i Campi da mostrare o comunque considerare per ogni Entità elencata. A titolo di esempio, vediamo come aggiungere alla Vista "Magazzino" il Campo "Immagine" dell'Attrezzo:
| per aggiungere il Campo | nella sezione Campi clicca Aggiungi |
| cerca il Campo da aggiungere | Nella finestra Aggiungi Campi, in Categoria seleziona Contenuto (perché l'Attrezzo è un Contenuto). In Cerca digita i primi carattere di "immagine"; se ci sono più Campi con lo stesso nome, verifica nella colonna Descrizione che il Campo appartenga all'Attrezzo  |
| seleziona il Campo | attiva la casella a fianco del Campo e clicca Aggiungi e configura campi. Appare la finestra di configurazione del Campo |
| seleziona l'eventuale Relazione che consente di raggiungere il Campo | Il Campo "Immagine" fa parte dell'Entità principale della Vista (l'Attrezzo) quindi in Relazione non selezionare nulla. |
| completa la configurazione del Campo | Nella finestra di configurazione, come Stile immagine del Campo seleziona Miniatura per uniformare le dimensioni delle immagini, indipendentemente dalle dimensioni con cui sono state caricate dagli Utenti |
Nello stesso modo, aggiungiamo il Campo "Descrizione" dell'Attrezzo e, nella sua configurazione, attiviamo Escludi dalla visualizzazione per non mostrarlo all'Utente, perché ci servirà tra poco per eseguire ricerche nel Magazzino, senza appesantire la visualizzazione. In questa Guida vedremo diversi metodi per modificare la visualizzazione del valore di un Campo..
Modificare l'ordine dei Campi (sezione Campi)
Se l'ordine con cui i Campi sono mostrati non ti soddisfa, nella sezione Campi clicca Rearrange e riordinali.
Modificare l'ordine delle Entità (sezione Criteri di ordinamento)
La sezione Criteri di ordinamento elenca i Campi secondo cui le Entità devono essere ordinate nella Vista. Ad esempio, volendo ordinare il Magazzino per titolo dell'Attrezzo:
| aggiungi il Campo su cui ordinare le Entità | nella sezione Criteri di ordinamento clicca Aggiungi e seleziona il Campo Contenuto - Titolo |
| scegli l'ordinamento | nella configurazione del Campo, seleziona l'ordinamento ascendente |
Se si aggiungono più Campi nella sezione Criteri di ordinamento, essi vengono considerati dall'alto verso il basso.
Filtrare le Entità (sezione Criteri del filtro)
La sezione Criteri del filtro elenca i Filtri che definiscono quali Entità elencare nella Vista. Un Filtro è formato di tre parti:
- il Campo su cui agisce il Filtro (es. "Stato")
- l'operatore con cui svolgere il confronto (es. è uguale a)
- il valore da confrontare col contenuto del Campo (es. "Prestabile")
Di default c'è sempre il Filtro "Contenuto pubblicato = Si", che evita di mostrare Contenuti nascosti. Nella Vista "Magazzino" troviamo anche il Filtro Tipo di Contenuto = Attrezzo che avevamo impostato nel momento della creazione della Vista. Per limitare la Vista ai soli Attrezzi prestabili, aggiungiamo un Filtro sul Campo "Stato" dell'Attrezzo, imponendo che sia uguale a "Prestabile".
Filtri Esposti (sezione Criteri del filtro)
I Filtri impostati nella sezione Criteri del filtro sono per default nascosti all'Utente. Se si attiva Esponi questo filtro, per permettere ai visitatori di modificarlo, il Filtro viene mostrato all'Utente, perché possa modificarne il valore ed eventualmente anche l'operatore, ma non il Campo su cui agisce. Ad esempio, potremmo esporre il Filtro che limita la Vista ai soli Attrezzi con Stato = Prestabile, per consentire all'Utente di scegliere se vedere anche gli Attrezzi ritirati dal prestito.
Cercare nella Vista (sezione Criteri del filtro)
Il Campo speciale Globale - Combina filtri dei campi disponibile nella sezione Criteri del filtro consente di aggiunge alla Vista una funzione di ricerca sulle Entità elencate. Ecco come:
| aggiungi il Campo speciale ed esponilo | Nella sezione Criteri del filtro aggiungi il Campo Globale - Combina filtri dei campi ed attiva Esponi questo filtro, per permettere ai visitatori di modificarlo: all'Utente viene mostrata una caselle in cui digitare le parole da cercare |
| regola la ricerca | come operatore seleziona Contiene ogni parola, in modo da poter stringere la ricerca digitando più parole |
| definisci dove cercare | in Scegli i campi da combinare per il filtraggio seleziona i Campi in cui cercare. La ricerca è limitata ai soli Campi testuali (nella Vista "Magazzino" al "titolo" ed alla "descrizione") |
Paginare la Vista (sezione Paginazione)
Se l'elenco delle Entità mostrato dalla Vista è lungo, conviene presentarlo in pagine, configurando la sezione Paginazione
| attiva la paginazione | Nella sezione Paginazione seleziona Risultati paginati, paginatore ridotto oppure Risultati paginati, paginatore completo |
| regola la paginazione | Indica quante Entità mostrare in ogni pagina (es. "20") |
Proteggere la Vista (sezione Accesso)
Nella sezione Accesso possiamo proteggere la Vista, limitandone la visibilità a specifici insiemi di Utenti. Le protezioni offerte nella sezione Accesso sono:
| Permesso | la Vista elenca le Entità tenendo conto dei Permessi degli Utenti sulle Entità |
| Ruolo | la Vista elenca le Entità solo agli Utenti che hanno uno o più Ruoli specificati |
| Senza restrizioni | la Vista elenca le Entità a qualunque Utente, compresi i Visitatori |
Il risultato reale dipende dalla combinazione tra l'impostazione di questa sezione, i Permessi attribuiti ai diversi Ruoli ed alla presenza di eventuali ulteriori moduli di protezione dei contenuti e può quindi portare a dinieghi o visualizzazioni non previste. Salvo necessità più complesse, la soluzione più semplice è selezionare qui la protezione per Ruolo. Proteggiamo la Vista "Magazzino" selezionando Ruolo - Utente autenticato.
Aggiungere informazioni per l'Utente (sezione Intestazione o Piè di pagina)
Nella sezione Intestazione possiamo aggiungere Campi che mostrano informazioni all'Utente sopra l'elenco delle Entità, quindi non riferite ad una specifica Entità ma al loro insieme. Ad esempio, per mostrare il numero di Attrezzi elencati dalla Vista:
| aggiungi la funzione di conteggio delle Entità elencate | Nella sezione Intestazione aggiungi il Campo speciale Globale - Riassunto del risultato - Mostra il riassunto del risultato, per esempio gli elementi per pagina |
| configura il testo da mostrare | in Visualizzazione digita "@total Attrezzi disponibili al prestito. Clicca su un Attrezzo per vederne le caratteristiche e chiederlo in prestito" dove @total viene sostituito dal numero di Attrezzi elencati. |
Per mostrare le informazioni sotto l'elenco, inserisci il Campo nella sezione Piè di pagina.