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

Bei den meisten Editor-Add-ons sind Dialogfenster und Seitenleisten die primären Add-on-Benutzeroberflächen. Beide lassen sich mit Standard-HTML und ‑CSS vollständig anpassen. Außerdem können Sie das Client-Server-Kommunikationsmodell von Apps Script verwenden, um Apps Script-Funktionen auszuführen, wenn der Nutzer mit der Seitenleiste oder dem Dialogfeld interagiert. In Ihrem Add-on können mehrere Seitenleisten und Dialogfelder definiert werden, 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. Während 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 wie benutzerdefinierte Dialogfelder in Apps Script erstellt. Die allgemeine empfohlene Vorgehensweise ist folgende:

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

Dialogfelder unterbrechen das serverseitige Skript nicht, während sie geöffnet sind. Das clientseitige JavaScript kann mit google.script.run() und zugehörigen Handler-Funktionen 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 ihrem Google Drive auswählen können. Sie können Ihrem Add-on ein Dialogfeld zum Öffnen von Dateien hinzufügen, ohne es selbst gestalten zu müssen. Dazu ist jedoch eine zusätzliche Konfiguration erforderlich. Außerdem benötigen Sie Zugriff auf das Cloud Platform-Projekt des Add-ons, um die Google Picker API zu aktivieren.

Ausführliche 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. Die Seitenleisten haben eine feste Breite, aber Sie können ihren Inhalt anpassen.

Add-on-Seitenleisten werden auf dieselbe Weise wie benutzerdefinierte Seitenleisten in Apps Script erstellt. Die allgemeine empfohlene Vorgehensweise ist folgende:

  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 dem die Seitenleiste geöffnet werden soll, HtmlService.createHtmlOutputFromFile(filename) auf, um ein HtmlOutput-Objekt zu erstellen, das die Seitenleiste darstellt. Wenn Sie HTML-Vorlagen verwenden, können Sie alternativ HtmlService.createTemplateFromFile(filename) aufrufen, um eine Vorlage zu generieren, und sie dann mit HtmlTemplate.evaluate() in ein HtmlOutput-Objekt konvertieren.

  3. Rufen Sie Ui.showSidebar(htmlOutput) auf, um die Seitenleiste mit diesem HtmlOutput anzuzeigen.

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