Finestre di dialogo e barre laterali per il componente aggiuntivo Editor

Per la maggior parte dei componenti aggiuntivi dell'Editor, le finestre di dialogo e i riquadri della barra laterale sono le interfacce utente principali dei componenti aggiuntivi. Entrambi sono completamente personalizzabili utilizzando HTML e CSS standard e puoi utilizzare il modello di comunicazione client-server di Apps Script per eseguire le funzioni di Apps Script quando l'utente interagisce con la barra laterale o la finestra di dialogo. Il componente aggiuntivo può definire più barre laterali e finestre di dialogo, ma può mostrarne solo una alla volta.

Se vuoi impedire all'utente di interagire con l'editor finché non fa una scelta nell'interazione del componente aggiuntivo, utilizza una finestra di dialogo, altrimenti usa una barra laterale.

Finestre di dialogo

Le finestre di dialogo sono riquadri di finestre che si sovrappongono ai contenuti principali dell'editor. Le finestre di dialogo di Apps Script sono modali; quando vengono aperte, l'utente non può interagire con gli altri elementi dell'interfaccia dell'editor. Puoi personalizzare il contenuto e la dimensione delle finestre di dialogo.

Puoi creare le finestre di dialogo dei componenti aggiuntivi allo stesso modo delle finestre di dialogo personalizzate di Apps Script. La procedura generale consigliata è la seguente:

  1. Crea un file di progetto di script che definisca la struttura HTML, il codice CSS e il comportamento JavaScript lato client della finestra di dialogo. Quando definisci la finestra di dialogo, consulta le linee guida per gli stili dei componenti aggiuntivi dell'Editor.
  2. Nel codice lato server in cui vuoi aprire la finestra di dialogo, chiama HtmlService.createHtmlOutputFromFile(filename) per creare un oggetto HtmlOutput che rappresenti la finestra di dialogo. In alternativa, se utilizzi un HTML modello, puoi chiamare HtmlService.createTemplateFromFile(filename) per generare un modello e poi HtmlTemplate.evaluate() per convertirlo in un oggetto HtmlOutput.
  3. Chiama Ui.showModalDialog(htmlOutput, dialogTitle) per visualizzare la finestra di dialogo utilizzando HtmlOutput.

Le finestre di dialogo non sospendino lo script lato server mentre sono aperte. Il codice JavaScript lato client può effettuare chiamate asincrone lato server utilizzando le funzioni google.script.run() e di gestore associate. Per maggiori dettagli, consulta Comunicazione client-server.

Finestre di dialogo con apertura file

Le finestre di dialogo apertura file sono finestre predefinite che consentono agli utenti di selezionare i file dal proprio Google Drive. Puoi aggiungere al componente aggiuntivo una finestra di dialogo apertura file senza doverlo progettare, ma richiede una configurazione aggiuntiva. Devi inoltre accedere al progetto della piattaforma Cloud del componente aggiuntivo per abilitare l'API Google Picker.

Per informazioni dettagliate, consulta Finestre di dialogo apertura file.

Le barre laterali sono riquadri che vengono visualizzati a destra dell'interfaccia dell'editor e sono il tipo più comune di interfaccia aggiuntiva dei componenti aggiuntivi. A differenza delle finestre di dialogo, puoi continuare a interagire con gli altri elementi dell'interfaccia dell'editor mentre una barra laterale è aperta. Le barre laterali hanno una larghezza fissa, ma puoi personalizzarne i contenuti.

Puoi creare le barre laterali dei componenti aggiuntivi allo stesso modo delle barre laterali personalizzate di Apps Script. La procedura generale consigliata è la seguente:

  1. Crea un file di progetto di script che definisca la struttura HTML, il CSS e il comportamento JavaScript lato client della barra laterale. Quando definisci la barra laterale, fai riferimento alle linee guida per lo stile dei componenti aggiuntivi dell'Editor.

  2. Nel codice lato server nel punto in cui vuoi aprire la barra laterale, chiama HtmlService.createHtmlOutputFromFile(filename) per creare un oggetto HtmlOutput che rappresenti la barra laterale. In alternativa, se utilizzi un HTML modello, puoi chiamare HtmlService.createTemplateFromFile(filename) per generare un modello e poi HtmlTemplate.evaluate() per convertirlo in un oggetto HtmlOutput.

  3. Chiama il numero Ui.showSidebar(htmlOutput) per visualizzare la barra laterale che utilizza HtmlOutput.

Le barre laterali non sospendeno lo script lato server mentre sono aperte. Il codice JavaScript lato client può effettuare chiamate asincrone lato server utilizzando le funzioni google.script.run() e di gestore associate. Per maggiori dettagli, consulta Comunicazione client-server.