Javascript, HTML, CSS e... !
0 commenti

Menu a due livelli

Menu personalizzati in SpreadsheetApp e DocumentApp con Google Apps Script

I menu personalizzati sono un modo per arricchire Spreadsheets e Documents di funzionalità aggiuntive gestibili direttamente dall'interfaccia utente. Con il loro inserimento è possibile eseguire codici di Google Apps Script, definiti come bound-script, in modo che ogni voce di menu, una volta cliccata, esegua la relativa funzione al fine di svogliere, solitamente, particolari operazioni non presenti nativamente (o non presenti in modo performante per gli scopi del momento) per automatizzare processi che altrimenti richiederebbero noiosi e meccanici interventi manuali.

La generazione dei menu personalizzati è molto semplice, tuttavia prima di iniziare faccio alcune brevi premesse per chiarirne il loro funzionamento e la loro gestione:

- La prassi maggiormente utilizzata, e più veloce, è quella di creare i menu con la funzione onOpen() all'interno del bounde-script, tuttavia essi possono essere creati anche tramite un trigger o un evento (ad esempio, è possibile utilizzare una voce di menu per creare un altro menu, può essere il caso di menu che generano funzionalità aggiuntive una volta sbloccate).
- I menu non possono essere creati dinamicamente, inoltre, una volta lanciati, è possibile modificarne i nomi delle voci ma non le funzioni, ovvero le funzioni chiamate da ciascuna voce di menu devono essere definite in anticipo e non possono ricevere argomenti. Un workaround per utilizzare funzioni che ricevono parametri in modo dinamico è quello di utilizzare la classe PromptResponse in caso di DocumentApp o il valore della cella attiva in caso di SpreadsheetsApp.
- I menu possono essere modificati, ovvero possono essere sostituiti con un'istanza aggiornata che porta lo stesso nome di menu. Questo significa che ogni volta che viene utilizzata il metodo .createMenu() per creare un menu con un nome già utilizzato, il metodo .addToUi() sostituirà il menu originale con il nuovo menu (ed eventuali submenu).
- I menu non possono essere eliminati.

Dopo queste premesse passiamo ad un esempio di generazione di un menu personalizzato, in uno Spreadsheet, che contiene a sua volta un menu di secondo livello. Il risultato che vogliamo ottenere è il seguente (Fig. 1):



Menu personalizzato principale e secondario in uno Spreadsheet

Fig. 1 - Menu personalizzato in uno Spreadsheet


Per ottenere il risultato dell'immagine di cui sopra è necessario aprire uno Spreadsheet e dalla barra dei menu selezionare "Tools -> Script editor...".
Si aprirà a questo punto un file di Apps Script di tipo bound-script (ovvero incorporato nell'app principale, che in questo caso è appunto uno Spreadsheet, ma avrei potuto fare la stessa operazione anche in un Document) ed inserire le seguenti righe di codice:

function onOpen(e) {
 var menu = SpreadsheetApp.getUi().createMenu('Menu personalizzato')
 
 menu.addItem('Modifica il nome dello Sheet', 'modificaNomeSheet')
 .addSeparator()
 .addSubMenu(SpreadsheetApp.getUi().createMenu('Ordinamento alfabetico...')
 .addItem('ascendente', 'ordinamentoAscendente')
 .addItem('discendente', 'ordinamentoDiscendente'))
 .addToUi(); 
}

function ordinamentoAscendente() {
  // codice della funzione
}

function ordinamentoDiscendente() {
  // codice della funzione
}

function modificaNomeSheet() {
  // codice della funzione
}

Il codice è pressoché autoesplicativo in quanto la sequenza rappresentata dallo script che genera il menu si tramuterà nella struttura stessa del menu risultante (i nomi delle voci 'Modifica il nome dello Sheet', 'Ordinamento alfabetico...' 'ascendente' o 'discendente' e le relative chiamate ai nomi di funzione sono definite al solo scopo illustrativo e possono essere sostituite con nomi e funzioni dedicati in base alle proprie esigenze).
Come è evidente la funzione riferita alla creazione del menu è .createMenu() da richiamare all'interno del metodo onOpen; la creazione di sottomenu è delegata al metodo .addSubMenu() da passare al metodo principale.
Il metodo .addItem() aggiunge l'elemento definito al menù, mentre con .addSeparator() si può inserire una linea di separazione all'interno della lista delle voci di menu in modo da dare una visualizzazione più chiara lato utente raggruppando secondo criteri opportuni le varie voci degli elementi.

Essendo appunto il menu creato all'onOpen, affinchè venga visualizzato nella barra dei menu dopo che il codice è stato inserito, sarà necessario salvare il file di script e chiudere e riaprire lo Spreadsheet.

Per chi fosse interessato segnalo che, oltre all'inserimento di menu personalizzati, è possibile in pochi passaggi inserire nel corpo di uno Spreadsheet un bottone personalizzato ed assegnargli al click una funzione in Apps Script.

Nell'articolo "Interagire con i Google Forms tramite Google Apps Script" è invece presente la realizzazione di un menu personalizzato all'interno dei Form di Google con la finalità di attivare una funzione per la creazione di una piccola interfaccia utente integrata nell'interfaccia UI standard.

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web