Come creare una barra laterale in Fogli Google

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 informazioni correlate o un elenco di scelte o opzioni di navigazione.

La barra laterale di 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.

Se desideri creare una barra laterale personalizzata, devi inserire ed eseguire un determinato codice nell’editor di script di Apps. 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”.

Ciò aprirà l’editor di script delle app in una nuova scheda del browser in cui puoi scrivere il codice dell’interfaccia utente.

Scrivi il seguente codice nella pagina Code.gs:

Nel codice dello 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 di Apps e seleziona “HTML”.

Questo creerà un file HTML sotto Code.gs. Rinomina il file come “Barra laterale”. Questo nome dovrebbe essere uguale a quello aggiunto nella funzione showSidebar() (var html = HtmlService.createHtmlOutputFromFile(‘Sidebar’)).

Scrivi il codice seguente nella sezione del file Sidebar.html:

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:

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 eseguire 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 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. Dopo aver autorizzato lo script, verrà visualizzata la barra laterale all’interno del tuo foglio 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, apparirà un piccolo pop-up, in cui fai clic su “Esamina autorizzazioni”.

Apparirà un altro pop-up, qui seleziona “Mostra avanzate” e fai clic su “Vai al 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.

Una volta fatto, torna al tuo foglio Google e aggiornalo. Il nuovo menu personalizzato (Il mio nuovo menu) verrà aggiunto alla barra degli strumenti del tuo foglio Google, che abbiamo aggiunto tramite lo script Code.gs. Fare clic su “Il mio nuovo menu” e selezionare la voce di menu “La mia barra laterale 1” per visualizzare la barra laterale.

Ora la tua barra laterale personalizzata apparirà sul lato destro del tuo foglio di 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.