Indice

Aggiungere comandi a pagine e Viste

Usare le EVA per aggiungere comandi dentro la pagina di una Entità. Aggiungere comandi dentro una Vista. Mostrare i comandi come pulsanti.
Aggiornata il:
Stato: 🟩Pronta

Cosa sono i comandi

Una app costruita con Drupal si presente è come un insieme di pagine, che mostrano informazioni e comandi. Un comando è semplicemente un testo che, cliccato dall'Utente, lancia un link. Il link può essere l'indirizzo di visualizzazione, creazione, modifica o eliminazione di un Entità, di esecuzione di una Vista o di una procedura. In base al particolare tema grafico utilizzato, il comando può presentarsi come un semplice link o come un pulsante. In questa Guida vediamo come aggiungere comandi nella pagina di una Entità o all'interno di una Vista.

APPROFONDIMENTO SUI LINK: un comando può essere aggiunto in un qualunque Campo testuale di Drupal scrivendo il codice nel linguaggio HTML <a href="LINK">TESTO</a>, dove LINK è il link che viene richiamato quando si clicca il comando e TESTO è il testo che viene presentato all'Utente.  Poiché in MieApp cerchiamo di costruire la app senza scrivere codice, utilizzeremo Campi speciali che ci evitano di scrivere il codice HTML.  

APPROFONDIMENTO SUI PULSANTI: di default, un comando viene mostrato come un semplice link, ad esempio 

Tuoi Attrezzi

Per mostrarlo come un pulsante, ci serve conoscere il nome della "classe" che trasforma i link in pulsanti nel particolare tema grafico che stiamo usando. La "classe" è un pezzo di codice scritto nel linguaggio CSS ma, per gli scopi di MieApp, non ci serve conoscere quel linguaggio, ma solo sapere il nome della classe che genera il pulsante. Per scoprirlo puoi provare così:

  • apri una pagina della app in cui appare un pulsante, es. la pagina di modifica di una Entità mostra in fondo il pulsante "Salva"
  • clicca sulla pagina col pulsante destro del mouse e seleziona "Visualizza sorgente pagina" (il comando può variare in base al web browser che stai usando) che ti mostra il codice HTML della pagina
  • cerca in esso la parola "Salva" e troverai un frammento di codice simile a questo:

    <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Salva" class="button button--primary js-form-submit form-submit"/>

  • il nome della classe che genera il pulsante è quello racchiuso tra virgolette a fianco di "class", in questo caso button button--primary js-form-submit form-submit
  • per trasformare un link in pulsante, nella configurazione del Campo che mostra il link incolla il nome della classe in Classe del link

Ed ecco come viene mostrato il link: Tuoi Attrezzi

Aggiungere comandi alla pagina di una Entità

Nella pagina che mostra una Entità, Drupal mostra nativamente i comandi per modificarla ed eliminarla agli Utenti che hanno i Permessi per queste operazioni. Per aggiungere ulteriori comandi utili alla nostra app possiamo utilizzare le Viste EVA che, come abbiamo visto, consentono appunto di mostrare informazioni aggiuntive alle pagine delle Entità. 

Come esempio, vediamo come aggiungere il comando "Chiedi in prestito" sulla pagina di un Attrezzo nella app "Vicinato". Il comando deve essere mostrato ai Partecipanti diversi dal Proprietario dell'Attrezzo e solo se l'Utente non ha già una Richiesta aperta sullo stesso Attrezzo. Per realizzare questa logica creiamo due Viste: 

  1. una Vista che mostra il comando "Chiedi il prestito" precaricando l'identificativo dell'Attrezzo
  2. una EVA che, richiamata nella pagina dell'Attrezzo, cerca l'eventuale Richiesta già aperta dell'Utente corrente sull'Attrezzo e, se non esiste, richiama la Vista che mostra il comando 

La catena di richiamo è quindi questa:

  • L'Utente richiama la pagina di un Attrezzo
  • La pagina dell'Attrezzo richiama automaticamente la EVA 2, che cerca una Richiesta aperta dall'Utente sull'Attrezzo
    • se la Richiesta esiste, la EVA la mostra all'Utente
    • se la Richiesta non esiste, la EVA richiama automaticamente la Vista 1, che mostra all'Utente il comando "Chiedi in prestito"
      • Se l'Utente clicca il comando, viene richiamata la pagina di creazione di nuova Richiesta

Vediamo come costruire le due Viste. La Vista 1 che mostra il comando riceve come nella sezione Filtri contestuali l'identificativo dell'Attrezzo e nella sezione Campi mostra il comando:

crea la VistaIn Struttura - Viste crea la Vista "Comando Chiedi in Prestito".  in Mostra scegli contenuto di tipo "Attrezzo". Attiva la creazione di una Pagina, mostra il risultato come Elenco non formattato di Campi In Elementi da visualizzare scegli 1, perché elenchiamo solo l'Attrezzo selezionato dal Filtro contestuale. Disattiva il paginatore. Salva.  
ricevi come Filtro contestuale l'identificativo dell'AttrezzoNella sezione Filtri contestuali aggiungi ID - Contenuto. Come abbiamo visto, l'identificativo viene memorizzato nel Token {{ raw_arguments.nid }} per poter essere usato nel resto della Vista
identifica il Proprietario dell'Attrezzo, grazie alla relazione Attrezzo → AutoreNella sezione Relazioni aggiungi Utente - Contenuto- Nome utente dell'autore del contenuto e rinomina come "Proprietario"
non mostrare la Vista al Proprietario Nella sezione Criteri del filtro aggiungi  Utente - Corrente - Filtra la vista con l'utente attualmente autenticato, come Relazione seleziona "Proprietario", come operatore seleziona è uguale a e come è l'utente autenticato seleziona no
mostra il comandonella sezione Campi aggiungi il Campo Globale - Testo personalizzato. In Testo digita "Chiedi l'Attrezzo in prestito". In Risultati di riscrittura attiva Mostra questo campo come un collegamento personalizzato. In Percorso del link digita il link che richiama la pagina di creazione di una Richiesta precaricando nel suo Campo "Attrezzo" l'identificativo dell'Attrezzo: "/node/add/richiesta?attrezzo={{ raw_arguments.nid }}"

La Vista 2 è una EVA richiamata dalla pagina dell'Attrezzo. In essa sfruttiamo la sezione Comportamento se non ci sono risultati che viene attivata quando la Vista non ha Richieste da mostrare; in questa sezione aggiungiamo il Campo speciale Globale - Area della vista - Inserisce una vista all'interno di un area, che permette di richiamare la Vista "Comando Chiedi in Prestito":

crea la EVAIn Struttura - Viste crea la Vista "Richiesta aperta su Attrezzo".  in Mostra scegli contenuto di tipo "Richiesta". Attiva la creazione di una Pagina, mostra il risultato come Elenco non formattato di Campi In Elementi da visualizzare scegli 1, perché mostreremo una sola Richiesta. Disattiva il paginatore. Salva. Nella sezione Visualizzazioni della Vista clicca Aggiungi - EVA. Appare una nuova Visualizzazione EVA. 
associa all'Attrezzo le Richieste che si riferiscono ad esso, grazie alla relazione  Richiesta → AttrezzoNella sezione Relazioni  aggiungi  Contenuto referenziato da field_attrezzo_richiesta - Contenuto - Appare in: richiesta e rinominalo "Attrezzo"
mostra la EVA nella pagina dell'Attrezzo Nella sezione Entity content settings, come Tipo di Entità seleziona Contenuto e come Bundle seleziona "Attrezzo"
riceve l'identificativo dell'Attrezzo dalla pagina che la richiamaNella sezione Filtri contestuali aggiungi ID - Contenuto, come Relazione seleziona "Attrezzo"
identifica il Richiedente, grazie alla relazione Richiesta → AutoreNella sezione Relazioni aggiungi Utente - Contenuto- Nome utente dell'autore del contenuto e rinomina come "Richiedente"
identifica il Proprietario dell'Attrezzo, grazie alla relazione Attrezzo → AutoreNella sezione Relazioni aggiungi Utente - Contenuto- Nome utente dell'autore del contenuto,  come Relazione seleziona "Attrezzo" e rinomina come "Proprietario"
non mostrare la Vista al Proprietario Nella sezione Criteri del filtro aggiungi  Utente - Corrente - Filtra la vista con l'utente attualmente autenticato, come Relazione seleziona "Proprietario", come operatore seleziona è uguale a e come è l'utente autenticato seleziona no
cerca l'eventuale Richiesta aperta già espressa dall'Utente corrente Nella sezione Criteri del filtro aggiungi  Utente - Corrente - Filtra la vista con l'utente attualmente autenticato, come Relazione seleziona "Richiedente", come operatore seleziona è uguale a e come è l'utente autenticato seleziona si. Aggiungi Contenuto - Stato - Appare in Richiesta e seleziona tutti gli stati tranne "conclusa".
se la Richiesta esiste, avvisa l'Utente mostrando il link alla Richiestanella sezione Campi aggiungi il Campo "titolo", in Risultati di riscrittura attiva   Sovrascrivere l'output di questo campo con testo personalizzato e come Testo digita "Hai già chiesto questo Attrezzo con {{ title__value }}", dove  {{ title__value }} è il Token che contiene il titolo della Richiesta prima della sovrascrittura, cioè il titolo originale della Richiesta.
se la Richiesta non esiste, esegue la Vista che mostra il comando "Chiedi in prestito"nella sezione Comportamento se non ci sono risultati aggiungi Globale - Area della vista - Inserisce una vista all'interno di un area, seleziona la Vista "Comando Chiedi in prestito" e attiva Eredita filtri contestuali per passarle l'identificativo dell'Attrezzo.

Aggiungere comandi in una Vista 

Nella costruzione di una app risulta spesso utile aggiungere comandi in una Vista. Il comando può essere aggiunto sopra o sotto l'elenco delle Entità mostrato in una Vista oppure a fianco delle singole Entità elencate nella Vista. Vediamo esempi concreti e come realizzarli per entrambi i casi.

COMANDI SOPRA O SOTTO L'ELENCO DELLE ENTITA'

Un comando collocato fuori (sopra o sotto) l'elenco delle Entità mostrato da una Vista è tipicamente utilizzato per aggiungere una nuova Entità all'elenco o per passare ad un altra pagina della app. Ad esempio, vediamo come aggiungere i comandi "Aggiungi Attrezzo" e "Magazzino" alla Vista "Tuoi Attrezzi", che elenca gli Attrezzi di proprietà dell'Utente corrente nella app "Vicinato".

Per aggiungere alla Vista un comando senza scrivere codice HTML, raccomando di installare ed attivare il modulo aggiuntivo Views Linkarea, che mette a disposizione un nuovo Campo speciale Globale - Link - Provide an internal or external link, che può essere aggiunto nella sezione Intestazione per mostrare un comando sopra l'elenco delle Entità, oppure nella sezione Piè di pagina per mostrarlo sotto l'elenco.

Come esempio, aggiungiamo alle Vista "Magazzino" e "Tuoi Attrezzi" della app "Vicinato" costruite nelle Guide precedenti i comandi per passare da una Vista all'altra e per andare al Cruscotto della app. In "Tuoi Attrezzi" vogliamo aggiungere anche il comando "Aggiungi Attrezzo" per consentire all'Utente di caricare un nuovo Attrezzo nella app. 

Per aggiungere alla Vista "Tuoi Attrezzi" il comando "Aggiungi Attrezzo":

aggiungi il comando sopra l'elenconella sezione Intestazione della Vista "Tuoi Attrezzi" aggiungi il Campo Globale - Link - Provide an internal or external link
mostra il comando anche se non ci sono ancora Attrezzinella configurazione del Campo attiva l'opzione Visualizza anche se la vista non da risultati
scegli il testo con cui il comando si mostrain Testo del collegamento digita "Aggiungi Attrezzo"
definisci cosa esegue il comandoin Percorso del link digita il link che richiama la pagina di creazione di un Attrezzo "/node/add/attrezzo"

Per aggiungere il comando "Magazzino" si procede allo stesso modo, aggiungendo nella sezione  Intestazione un secondo Campo Globale - Link - Provide an internal or external link configurato così: Testo del collegamento: "Magazzino"; Percorso del link: "/magazzino").

COMANDI SULLA SINGOLA ENTITA' ELENCATA

Per aggiungere su ogni singola Entità elencata nella Vista un comando che agisce su quella Entità, puoi aggiungere nella sezione Campi un Campo Globale - Testo personalizzato -  Fornisce testo o link personalizzato e configurarlo perché richiami un'altra Vista o una procedura, passandole l'identificativo dell'Entità. Ad esempio, se volessimo mostrare a fianco degli Attrezzi elencati nella Vista "Tuoi attrezzi" della app "Vicinato" un comando "Richieste aperte" che, cliccato, elenca le Richieste aperte sull'Attrezzo:

trova l'identificativo dell'Attrezzo e nascondilonella sezione Campi della Vista aggiungi  ID - Contenuto e attiva Escludi dalla visualizzazione 
aggiungi il Campo che conterrà il comandonella sezione Campi aggiungi Globale - Testo personalizzato
definisci come si presenta il comando all'utentecome Testo del Campo digita "Richieste aperte", in Risultati di riscrittura attiva Mostra questo campo come un collegamento personalizzato.
definisci cosa succede quando l'utente clicca il comandocome Percorso del link digita l'indirizzo della Vista che elenca le Richieste aperte sull'Attrezzo (es. "/richieste-aperte-attrezzo") passandole l'identificativo dell'Attrezzo stesso, che è contenuto nel Token {{ nid }} corrispondente al Campo nascosto e che trovi elencato sotto Replacement patterns, es. "/richieste-aperte/{{ nid }}".