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 tramite HTML e CSS standard e puoi utilizzare di Apps Script modello di comunicazione client-server 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ò visualizzare una alla volta.

Quando vuoi impedire all'utente di interagire con l'editor finché non fare delle scelte nell'interfaccia del componente aggiuntivo, usare una finestra di dialogo; altrimenti usa un nella barra laterale.

Finestre di dialogo

Le finestre di dialogo sono riquadri delle finestre che si sovrappongono ai contenuti dell'editor principale. Apps Script le finestre di dialogo sono modali; mentre sono aperti, l'utente non può interagire da altri elementi dell'interfaccia dell'editor. Puoi personalizzare i contenuti e le dimensioni di finestre di dialogo.

Le finestre di dialogo dei componenti aggiuntivi vengono create come faresti con Apps Script finestre di dialogo personalizzate; il generale consigliata è la seguente:

  1. Crea un file di progetto di script che definisca la struttura HTML della finestra di dialogo. il comportamento di CSS e di JavaScript lato client. Quando definisci la finestra di dialogo, fai riferimento alle linee guida sullo stile dei componenti aggiuntivi dell'editor.
  2. Nel codice lato server in cui vuoi che si apra la finestra di dialogo, richiama HtmlService.createHtmlOutputFromFile(filename) per creare un HtmlOutput che rappresenta la finestra di dialogo. In alternativa, se utilizzi HTML basato su modelli che puoi chiamare HtmlService.createTemplateFromFile(filename) generare un modello e quindi HtmlTemplate.evaluate() per convertirlo in un HtmlOutput.
  3. Chiama il numero Ui.showModalDialog(htmlOutput, dialogTitle) per visualizzare la finestra di dialogo HtmlOutput.

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

Finestre di dialogo che aprono file

Le finestre di dialogo di apertura file sono finestre di dialogo predefinite che consentono agli utenti di selezionare i file dal loro Google Drive. Puoi aggiungere al componente aggiuntivo una finestra di dialogo di apertura file senza e progettarlo, ma richiede una configurazione aggiuntiva. Inoltre richiedono l'accesso ai componenti Progetto Cloud Platform per abilitare l'API Google Picker.

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

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

Crei barre laterali dei componenti aggiuntivi come faresti con Apps Script barre laterali personalizzate; il generale consigliata è la seguente:

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

  2. Nel codice lato server in cui vuoi che si apra la barra laterale, richiama HtmlService.createHtmlOutputFromFile(filename) per creare un HtmlOutput che rappresenta la barra laterale. In alternativa, se utilizzi HTML basato su modelli che puoi chiamare HtmlService.createTemplateFromFile(filename) generare un modello e quindi HtmlTemplate.evaluate() per convertirlo in un HtmlOutput.

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

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