Una barra laterale è un elemento dell'interfaccia utente (una piccola area verticale) che appare a sinistra oa destra della finestra più grande o sullo schermo dell'utente per visualizzare le informazioni correlate o un elenco di scelte o opzioni di navigazione.
La barra laterale in Fogli Google è un pannello dell'interfaccia utente visualizzato sul lato destro di Fogli Google. Google fornisce un editor di script integrato chiamato Apps Script che può creare vari componenti aggiuntivi ed elementi per le applicazioni G-Suite. Può anche essere utilizzato per creare le tue barre laterali personalizzate nei fogli di Google.
Questo articolo ti mostrerà come creare una barra laterale personalizzata in Fogli Google utilizzando l'editor di script di Google Apps.
Creazione di una barra laterale in Fogli Google utilizzando Apps Script
Se desideri creare una barra laterale personalizzata, devi inserire ed eseguire un determinato codice nell'editor Apps Script. Quindi puoi creare i tuoi widget all'interno della barra laterale utilizzando codici HTML, CSS e Javascript.
Innanzitutto, apri i fogli di Google. Nel menu Fogli Google, fai clic su "Strumenti" e seleziona "Editor di script".
Verrà aperto l'editor Apps Script in una nuova scheda del browser in cui è possibile scrivere il codice dell'interfaccia utente.
Scrivi il seguente codice nella pagina Code.gs:
function onOpen() { SpreadsheetApp.getUi() .createMenu('Il mio nuovo menu') .addItem('La mia barra laterale 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('Calculation Sidebar'); SpreadsheetApp.getUi() .showSidebar(html); }
Nel codice di script Code.gs sopra, la funzione OnOpen() crea un menu personalizzato chiamato "My New Menu" nella barra dei menu di Google Sheets. Quel menu conterrà una voce di menu chiamata "La mia barra laterale-1". Quando fai clic su questa voce di menu, verrà eseguita la funzione showAdminSidebar() (la seconda parte del codice) e la barra laterale verrà mostrata sul lato destro della finestra del foglio di Google.
Successivamente, dobbiamo creare un file HTML nell'editor di script e quindi con questo file puoi creare la barra laterale.
Per creare il file HTML, fai clic sull'icona più (+) accanto a File nell'editor di script delle app e seleziona "HTML".
Questo creerà un file HTML sotto Code.gs. Rinominare il file come "Barra laterale". Questo nome dovrebbe essere lo stesso di quello aggiunto nella funzione showSidebar() (var html = HtmlService.createHtmlOutputFromFile('Sidebar')).
Scrivi il seguente codice all'interno della sezione del file Sidebar.html:
Questa è la mia nuova barra laterale
Il codice sopra mostra la stringa di testo "Questa è la mia nuova barra laterale" e il pulsante "Chiudi" che chiude la barra laterale quando si fa clic su di essa.
Dopo aver finito di scrivere il codice sopra nella sezione di Sidebar.html, dovrebbe contenere il seguente codice:
Questa è la mia nuova barra laterale.
Lo screenshot:
Quando hai finito di inserire entrambi i codici, salva il progetto facendo clic sull'icona di salvataggio nella barra degli strumenti (vedi lo screenshot qui sotto). Quindi esegui le funzioni facendo clic sull'icona "Esegui".
Sia che tu esegua lo script qui o selezioni la voce di menu personalizzata nella barra degli strumenti dei fogli di Google (per la prima volta), Google ti chiederà di autorizzare l'esecuzione dello script. Poiché stai eseguendo un widget personalizzato di terze parti, Google richiederà la tua autorizzazione. Una volta autorizzato lo script, verrà visualizzata la barra laterale all'interno del tuo foglio Google.
Come autorizzare il codice script delle app in Google
Per autorizzare il tuo script personalizzato segui questi passaggi:
Una volta eseguito lo script, Google ti chiederà di selezionare il tuo account Google. Dopo averlo selezionato, verrà visualizzato un piccolo pop-up, in cui fai clic su "Rivedi permessi".
Apparirà un altro pop-up, qui seleziona "Mostra avanzato" e fai clic su "Vai a progetto senza titolo (non sicuro)" (mostrerà il nome del tuo progetto).
Nella finestra successiva, fai clic su "Consenti" e il foglio di Google eseguirà il tuo script.
Dopo averlo fatto, torna al tuo foglio Google e aggiornalo. Il nuovo menu personalizzato (My New Menu) verrà aggiunto alla barra degli strumenti del foglio di Google, che abbiamo aggiunto tramite lo script Code.gs. Fai clic su "Il mio nuovo menu" e seleziona la voce di menu "La mia barra laterale 1" per visualizzare la barra laterale.
Ora la tua barra laterale personalizzata verrà visualizzata sul lato destro del tuo foglio Google con il testo e il pulsante che abbiamo aggiunto (come mostrato di seguito). Quando fai clic sul pulsante, la barra laterale verrà chiusa.
Bene, ora sai come creare la tua barra laterale nei fogli di Google.