Javascript, HTML, CSS e... !
0 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

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