Dialogfelder und Seitenleisten für das Editor-Add-on

Bei den meisten Editor-Add‑ons, Dialogfenster und Seitenleisten sind die primären Benutzeroberflächen. Beide lassen sich mit Standard-HTML und CSS vollständig anpassen. Außerdem können Sie das Client-Server-Kommunikationsmodell von Google Apps Script verwenden, um Apps Script-Funktionen auszuführen, wenn der Nutzer mit der Seitenleiste oder dem Dialogfeld interagiert. Ihr Add‑on kann mehrere Seitenleisten und Dialogfelder definieren, aber es kann jeweils nur eines angezeigt werden.

Wenn Sie verhindern möchten, dass der Nutzer mit dem Editor interagiert, bis er eine Auswahl in der Add‑on-Oberfläche getroffen hat, verwenden Sie ein Dialogfeld. Andernfalls verwenden Sie eine Seitenleiste.

Dialogfelder

Dialogfelder sind Fensterbereiche, die den primären Editorinhalt überlagern. Apps Script-Dialogfelder sind modal. Wenn sie geöffnet sind, kann der Nutzer nicht mit den anderen Elementen der Editoroberfläche interagieren. Sie können den Inhalt und die Größe von Dialogfeldern anpassen.

Add‑on-Dialogfelder werden auf dieselbe Weise erstellt wie Apps Script benutzerdefinierte Dialogfelder. Die allgemeine Vorgehensweise ist wie folgt:

  1. Erstellen Sie eine Skriptprojektdatei, in der die HTML-Struktur, das CSS und das clientseitige JavaScript-Verhalten des Dialogfelds definiert werden. Beachten Sie die Stilrichtlinien für Editor-Add‑ons.
  2. Rufen Sie in Ihrem serverseitigen Code, an der Stelle, an der das Dialogfeld geöffnet werden soll, HtmlService.createHtmlOutputFromFile auf, um ein HtmlOutput -Objekt zu erstellen, das das Dialogfeld darstellt. Wenn Sie Vorlagen-HTML verwenden, können Sie alternativ HtmlService.createTemplateFromFile aufrufen, um eine Vorlage zu generieren, und dann HtmlTemplate.evaluate , um sie in ein HtmlOutput-Objekt zu konvertieren.
  3. Rufen Sie Ui.showModalDialog auf, um das Dialogfeld mit diesem HtmlOutputanzuzeigen.

Dialogfelder unterbrechen das serverseitige Skript nicht, während sie geöffnet sind. Das clientseitige JavaScript kann mit google.script.run und zugehörigen Handlerfunktionen asynchrone Aufrufe an den Server senden. Weitere Informationen finden Sie unter Client-Server-Kommunikation.

Dialogfelder zum Öffnen von Dateien

Dialogfelder zum Öffnen von Dateien sind vorgefertigte Dialogfelder, mit denen Nutzer Dateien aus Google Drive auswählen können. Sie können Ihrem Add‑on ein Dialogfeld zum Öffnen von Dateien hinzufügen, ohne es entwerfen zu müssen. Es erfordert jedoch eine zusätzliche Konfiguration. Außerdem benötigen Sie Zugriff auf das Add-on's Cloud Platform-Projekt, um die Google Picker API zu aktivieren.

Weitere Informationen finden Sie unter Dialogfelder zum Öffnen von Dateien.

Seitenleisten sind Bereiche, die rechts in der Editoroberfläche angezeigt werden. Sie sind die häufigste Art von Add‑on-Oberfläche. Im Gegensatz zu Dialogfeldern können Sie weiterhin mit den anderen Elementen der Editoroberfläche interagieren, während eine Seitenleiste geöffnet ist. Seitenleisten haben eine feste Breite, aber Sie können ihren Inhalt anpassen.

Add‑on-Seitenleisten werden auf dieselbe Weise erstellt wie Apps Script benutzerdefinierte Seitenleisten. Die allgemeine Vorgehensweise ist wie folgt:

  1. Erstellen Sie eine Skriptprojektdatei, in der die HTML-Struktur, das CSS und das clientseitige JavaScript-Verhalten der Seitenleiste definiert werden. Beachten Sie beim Definieren der Seitenleiste die Stilrichtlinien für Editor-Add‑ons.

  2. Rufen Sie in Ihrem serverseitigen Code, an der Stelle, an der die Seitenleiste geöffnet werden soll, HtmlService.createHtmlOutputFromFile auf, um ein HtmlOutput -Objekt zu erstellen, das die Seitenleiste darstellt. Wenn Sie Vorlagen-HTML verwenden, können Sie alternativ HtmlService.createTemplateFromFile aufrufen, um eine Vorlage zu generieren, und dann HtmlTemplate.evaluate , um sie in ein HtmlOutput-Objekt zu konvertieren.

    Add‑on-Seitenleisten haben eine feste Breite von 300 Pixeln , die Sie nicht mit HtmlOutput.setWidth ändern können.

  3. Rufen Sie Ui.showSidebar auf, um die Seitenleiste mit diesem HtmlOutputanzuzeigen.

Seitenleisten unterbrechen das serverseitige Skript nicht, während sie geöffnet sind. Das clientseitige JavaScript kann mit google.script.run und zugehörigen Handlerfunktionen asynchrone Aufrufe an den Server senden. Weitere Informationen finden Sie unter Client-Server-Kommunikation.