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:
- 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.
- Nel codice lato server in cui vuoi che si apra la finestra di dialogo, richiama
HtmlService.createHtmlOutputFromFile(filename)
per creare unHtmlOutput
che rappresenta la finestra di dialogo. In alternativa, se utilizzi HTML basato su modelli che puoi chiamareHtmlService.createTemplateFromFile(filename)
: generare un modello e quindiHtmlTemplate.evaluate()
per convertirlo in unHtmlOutput
. - Chiama il numero
Ui.showModalDialog(htmlOutput, dialogTitle)
per visualizzare la finestra di dialogoHtmlOutput
.
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 Selecter.
Per informazioni dettagliate, vedi Finestre di dialogo per l'apertura dei file.
Barre laterali
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:
- 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.
Nel codice lato server in cui vuoi che si apra la barra laterale, richiama
HtmlService.createHtmlOutputFromFile(filename)
per creare unHtmlOutput
che rappresenta la barra laterale. In alternativa, se utilizzi HTML basato su modelli che puoi chiamareHtmlService.createTemplateFromFile(filename)
: generare un modello e quindiHtmlTemplate.evaluate()
per convertirlo in unHtmlOutput
.Chiama il numero
Ui.showSidebar(htmlOutput)
per visualizzare la barra lateraleHtmlOutput
.
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.