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 del componente aggiuntivo. Entrambe sono completamente personalizzabili utilizzando HTML e CSS standard e puoi utilizzare il modello di comunicazione client-server di Google 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; 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; 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 allo stesso modo delle finestre di dialogo personalizzatedi Apps Script. La procedura generale è la seguente:

  1. Crea un file di progetto di script che definisca la struttura HTML, il CSS e il comportamento JavaScript lato client della finestra di dialogo. Consulta le linee guida di stile dei componenti aggiuntivi dell'Editor.
  2. Nel codice lato server in cui vuoi che si apra la finestra di dialogo, chiama HtmlService.createHtmlOutputFromFile per creare un HtmlOutput oggetto che rappresenta la finestra di dialogo. In alternativa, se utilizzi HTML con modelli puoi chiamare HtmlService.createTemplateFromFile per generare un modello e poi HtmlTemplate.evaluate per convertirlo in un oggetto HtmlOutput.
  3. Chiama Ui.showModalDialog 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 client-server.

Finestre di dialogo di apertura file

Le finestre di dialogo di apertura 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. È inoltre necessario l'accesso al progetto Cloud Platform del componente aggiuntivo per abilitare l'API Google Picker.

Per saperne di più, vedi Finestre di dialogo di apertura 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 è aperta una barra laterale. Le barre laterali hanno una larghezza fissa, ma puoi personalizzarne i contenuti.

Le barre laterali dei componenti aggiuntivi vengono create allo stesso modo delle barre laterali personalizzatedi Apps Script. La procedura generale è 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, consulta le linee guida di stile dei componenti aggiuntivi dell'Editor.

  2. Nel codice lato server in cui vuoi che si apra la barra laterale, chiama HtmlService.createHtmlOutputFromFile per creare un HtmlOutput oggetto che rappresenta la barra laterale. In alternativa, se utilizzi HTML con modelli puoi chiamare HtmlService.createTemplateFromFile per generare un modello e poi HtmlTemplate.evaluate per convertirlo in un oggetto HtmlOutput.

    Le barre laterali dei componenti aggiuntivi hanno una larghezza fissa di 300 pixel che non puoi modificare chiamando HtmlOutput.setWidth.

  3. Chiama Ui.showSidebar 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 client-server.