Finestre di dialogo e barre laterali per i componenti aggiuntivi dell'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 mediante 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.

Se vuoi evitare che l'utente interagisca con l'editor finché non fa qualche scelta nell'interfaccia aggiuntiva, usa una finestra di dialogo; altrimenti utilizza una barra laterale.

Finestre di dialogo

Le finestre di dialogo sono riquadri di finestra che si sovrappongono ai contenuti dell'editor principale. Le finestre di dialogo di Apps Script sono modali e, una volta aperte, l'utente non può interagire con gli altri elementi dell'interfaccia dell'editor. Puoi personalizzare il contenuto e le dimensioni delle finestre di dialogo.

Puoi creare finestre di dialogo di 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 della finestra di dialogo, il CSS e il comportamento JavaScript lato client. Quando definisci la finestra di dialogo, consulta le linee guida sullo stile 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 il HTML basato sul modello puoi chiamare HtmlService.createTemplateFromFile(filename) per generare un modello, quindi 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 sospenderanno 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 la pagina Comunicazione tra server.

Finestre di dialogo aperte come file

Le finestra di dialogo apertura file sono finestre di dialogo predefinite che consentono agli utenti di selezionare file dal proprio Google Drive. Puoi aggiungere al componente aggiuntivo una finestra di dialogo che si apre senza dover creare il file, ma è necessaria una configurazione aggiuntiva. Per attivare l'API Google Picker, è necessario anche l'accesso al progetto Cloud Platform del componente aggiuntivo.

Per informazioni dettagliate, vedi Finestre di dialogo aperte come file.

Le barre laterali sono riquadri che vengono visualizzati a destra dell'interfaccia dell'editor e sono il tipo più comune di interfaccia del componente aggiuntivo. 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 personalizzarne i contenuti.

Puoi creare barre laterali aggiuntive in modo simile alle 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 sullo stile dei componenti aggiuntivi per l'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 il HTML basato sul modello puoi chiamare HtmlService.createTemplateFromFile(filename) per generare un modello, quindi HtmlTemplate.evaluate() per convertirlo in un oggetto HtmlOutput.

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

Le barre laterali non sospenderanno 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 la pagina Comunicazione tra server.