JavaScript, HTML, CSS e... !
10 commenti

Visualizzare in modo automatico la barra laterale all'apertura del documento

Sidebar che si apre automaticamente all'onOpen: Sheets, Docs, Slides e Forms

I prodotti della G Suite (Fogli, Documenti, Presentazioni e Moduli di Google) possono visualizzare, tramite script associati (bound-script), diversi tipi di elementi di interfaccia utente quali messaggi di alert, prompt, finestre di dialogo e barre laterali contenenti pagine HTML personalizzate gestite tramite l'omonimo servizio.

Una delle esigenze spesso ricercate da chi personalizza questi strumenti da codice è quello di fare in modo che questi elementi dell'interfaccia utente, in particolare la barra laterale (sidebar) si visualizzino automaticamente all'apertura del documento, ma inserendo l'apposita funzione all'interno del trigger di tipo semplice onOpen() il risultato sperato non viene ottenuto.

Gli elementi dell'interfaccia utente hanno lo scopo di essere mostrati in conseguenza ad un'interazione effettiva da parte dell'utente. Considerando che le personalizzazioni lato Apps Script possono essere anche pubblicate nel Chrome Web Store come componenti aggiuntivi per lo strumento della G Suite per il quale sono stati realizzati, va da se che se più componenti installati eseguono operazioni di questo tipo all'apertura di un documento nascerebbero conflitti ed incongruenze.

Questa premessa è per scoraggiare la creazione di applicazioni pensate con questo tipo di approccio, tuttavia è anche vero che non tutte le funzionalità create con Apps Script hanno la finalità di essere pubblicate nello Store ma possono semplicemente coprire una necessità per uso proprio. Per questo motivo rassicuro sul fatto che, ottenere un componente dell'interfaccia utente (come appunto la sidebar) che si apre automaticamente all'apertura di un documento... è fattibile!

Come esempio base utilizzo quello della documentazione ufficiale 'Dialogs and Sidebars in G Suite Documents', in modo che abbia un codice minimale e concentrare l'attenzione sul workaround che permette di ottenere l'effetto desiderato.
Il seguente codice, costituito da un file .gs e da uno .html contenente il contenuto che sarà mostrato nella sidebar, genera un menu personalizzato all'apertura del documento (Fogli, Documenti, Presentazioni e Moduli di Google) la cui funzione, eseguita manualmente da parte dell'utente al clic sulla voce di menu nell'interfaccia del documento, permette di visualizzare la barra laterale:

File main.gs

function onOpen() {
  SpreadsheetApp.getUi() // o DocumentApp o SlidesApp o FormApp.
   .createMenu('Menu Personalizzato')
   .addItem('Show sidebar', 'showSidebar')
   .addToUi();
  
  showSidebar();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('index')
     .setTitle('Barra laterale personalizzata')
     .setWidth(300);
  SpreadsheetApp.getUi() // o DocumentApp o SlidesApp o FormApp.
      .showSidebar(html);
}

File index.html

Ciao da AppsScript.it! <input type="button" value="Chiudi" onclick="google.script.host.close()" />

Da notare che all'interno di onOpen(), come ultimo comando, è presente la seguente chiamata alla funzione per richiamare la barra laterale:

showSidebar();

Tuttavia all'apertura del documento la barra laterale non sarà mostrata!

Il workaround per ottenere l'effetto desiderato lo si ottiene aggiungendo un trigger allo script ovvero, dal menu 'Modifica -> Tutti i trigger del progetto corrente' inserire un trigger eseguito alla funzione onOpen come un evento da Foglio di lavoro  all'apertura, l'immagine seguente, Fig. 1, mostra tale configurazione:



trigger semplice onopen da foglio di lavoro all apertura

Fig. 1  Trigger semplice onOpen da Foglio di lavoro all'apertura


A questo punto basterà chiudere e riaprire il documento per poter visualizzare la barra laterale che si apre in modo automatico (oltre che per interazione con la relativa voce del menu personalizzato) mostrando il contenuto che abbiamo definito nel file .html.

La prima volta che il codice viene eseguito saranno richieste le consuete autorizzazioni come descritto nell'articolo 'Flusso per l'Autorizzazione dei Google Services nei progetti in Apps Script'.

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

10 Commenti

  1. Saturday, April 17, 2021 alle ore 18:41 Andrea

    Buongiorno,
    intanto grazie per l'articolo.
    il suo esempio funziona ma solo se il foglio è in modalità Editor,
    per i collaboratori in sola visualizzazione lo script non funziona.
    c'è un modo per renderlo eseguibile in entrambi i casi all'apertura del file?

    Grazie

    Rispondi a questo commento
    • Saturday, April 17, 2021 alle ore 23:05 Michele PisaniAutore

      Ciao Andrea,
      la documentazione ufficiale specifica che "onOpen(e) viene eseguito quando un utente apre un foglio di calcolo, un documento, una presentazione o un modulo che l'utente ha il permesso di modificare": https://developers.google.com/apps-script/guides/triggers/

      Per questo motivo non è possibile ottenere il risultato desiderato all'apertura del foglio da parte di chi non è Editor.

      Rispondi a questo commento
      • Saturday, April 17, 2021 alle ore 23:42 Andrea

        avendo la necessità di mettere il file in manutenzione e quindi in modalità di visualizzazione temporanea i collaboratori per evitare modifiche come potrei allertarli?

      • Sunday, April 18, 2021 alle ore 10:33 Michele PisaniAutore

        Una comunicazione diretta, che non prevede modifiche al codice, può essere una soluzione. Puoi inviare una email a tutti i collaboratori del file direttamente dallo Spreadsheet dalla voce di menu: File --> Email --> Invia email ai collaboratori. Oppure, o in aggiunta, scrivere nel Foglio principale che si apre un testo evidente che allerta della manutenzione (quello che immagino avresti voluto scrivere nella sidebar).

      • Monday, April 19, 2021 alle ore 08:26 Andrea

        è un insieme di servizi, il file ha una 30na di fogli e ogni servizio accede da link diretto tramite google sites. quando il file è condiviso tra tutti come editor accedono alla propria scheda per implementare dati (solo in 2 colonne) a fine settimana la sede ha bisogno di lavorare i dati raccolti e mettiamo temporaneamente il file in sola lettura in modo che non accedano per modificarlo.

        ed è a quel punto che non si attiva lo script UI.Allert message perchè in sola lettura.
        se a monte facessi un popup in html ? potrebbe funzionare?

      • Monday, April 19, 2021 alle ore 08:45 Andrea

        ... Perdonami ho omesso di informarti che si tratta di un pacchetto G-suite,
        accedono al file come editor tramite account aziendale ...@azienda.com

        quindi non sono collaboratori diretti perché tantissimi ma tramite email aziendale (nome.cognome@azienda.com)

      • Monday, April 19, 2021 alle ore 22:44 Michele PisaniAutore

        Purtroppo non credo che funzionerà, una modal HTML segue lo stesso principio della sidebar. Neanche Browser.msgBox funziona in questa circostanza.

  2. Friday, April 23, 2021 alle ore 14:17 Andrea

    Grazie per la disponibilità

    Rispondi a questo commento
  3. Saturday, September 23, 2023 alle ore 13:25 Maurizio

    Ciao Michele....se, in una barra laterale, uno volesse aggiungere un'immagine o un logo, come si potrebbe fare?

    Rispondi a questo 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]https://www.appsscript.it[/url] se devi riferirti ad un indirizzo web