Finestre di dialogo e barre laterali per il componente aggiuntivo Editor

Per la maggior parte dei componenti aggiuntivi di 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ò visualizzarne solo una alla volta.

Quando vuoi impedire all'utente di interagire con l'editor finché non fa una scelta nell'interfaccia del componente aggiuntivo, utilizza una finestra di dialogo; in caso contrario, utilizza una barra laterale.

Finestre di dialogo

Le finestre di dialogo sono riquadri della finestra che si sovrappongono ai contenuti principali dell'editor. Le finestre di dialogo di Apps Script sono modali; quando sono aperte, l'utente non può interagire con gli altri elementi dell'interfaccia dell'editor. Puoi personalizzare i contenuti e le dimensioni delle finestre di dialogo.

Le finestre di dialogo dei componenti aggiuntivi vengono create nello 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 definisce la struttura HTML, il CSS e il comportamento JavaScript lato client della finestra di dialogo. Quando definisci la finestra di dialogo, consulta le linee guida per lo stile dei componenti aggiuntivi di 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 HTML basato su modelli, 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 sospendono lo script lato server mentre sono aperte. Il codice JavaScript lato client può effettuare chiamate asincrone al lato server utilizzando google.script.run() e le funzioni di gestore associate. Per maggiori dettagli, consulta Comunicazione client-to-server.

Finestre di dialogo di apertura dei file

Le finestre di dialogo di apertura dei file sono finestre di dialogo predefinite che consentono agli utenti di selezionare i file dal proprio Google Drive. Puoi aggiungere una finestra di dialogo di apertura del file al tuo componente aggiuntivo senza doverla progettare, ma richiede una configurazione aggiuntiva. Per attivare l'API Google Picker, devi anche avere accesso al progetto della piattaforma Cloud del componente aggiuntivo.

Per informazioni dettagliate, vedi Finestre di dialogo di apertura dei file.

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

Le barre laterali dei componenti aggiuntivi vengono create nello stesso modo delle barre laterali personalizzate di Apps Script. La procedura generale consigliata è la seguente:

  1. Crea un file di progetto di script che definisce la struttura HTML, il CSS e il comportamento JavaScript lato client della barra laterale. Quando definisci la barra laterale, consulta le linee guida relative allo stile dei componenti aggiuntivi dell'editor.

  2. Nel codice lato server 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 HTML basato su modelli, puoi chiamare HtmlService.createTemplateFromFile(filename) per generare un modello e poi HtmlTemplate.evaluate() per convertirlo in un oggetto HtmlOutput.

  3. Chiama Ui.showSidebar(htmlOutput) per visualizzare la barra laterale utilizzando HtmlOutput.

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