Finestre di dialogo e barre laterali per il componente aggiuntivo Editor

Per la maggior parte dei componenti aggiuntivi 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.

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

Finestre di dialogo

Le finestre di dialogo sono pannelli di finestre che si sovrappongono ai contenuti principali dell'editor. Le finestre di dialogo di Apps Script sono modali; mentre 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 script che definisca la struttura HTML, il CSS e il comportamento JavaScript lato client della finestra di dialogo. Quando definisci la finestra di dialogo, fai riferimento alle linee guida di stile del componente aggiuntivo Editor.
  2. Nel codice lato server in cui vuoi che si apra la finestra di dialogo, chiama HtmlService.createHtmlOutputFromFile(filename) per creare un oggetto HtmlOutput che rappresenta 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 gestione associate. Per maggiori dettagli, vedi Comunicazione da client a server.

Finestre di dialogo di apertura file

Le finestre di dialogo di apertura dei file sono finestre di dialogo predefinite che consentono agli utenti di selezionare i file da Google Drive. Puoi aggiungere una finestra di dialogo di apertura file al tuo componente aggiuntivo senza doverla progettare, ma richiede una configurazione aggiuntiva. Devi anche accedere al progetto Google Cloud del componente aggiuntivo per abilitare l'API Google Picker.

Per tutti i dettagli, vedi Finestre di dialogo di apertura dei file.

Le barre laterali sono riquadri che vengono visualizzati a destra dell'interfaccia dell'editor e sono 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 una barra laterale è aperta. Le barre laterali hanno una larghezza fissa, ma puoi personalizzarne i 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 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 di stile per i componenti aggiuntivi dell'editor.

  2. Nel codice lato server in cui vuoi che si apra la barra laterale, chiama HtmlService.createHtmlOutputFromFile(filename) per creare un oggetto HtmlOutput che rappresenta 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 gestione associate. Per maggiori dettagli, vedi Comunicazione da client a server.