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 können mit Standard-HTML und -CSS vollständig angepasst werden. Mit dem Client-Server-Kommunikationsmodell von Apps Script können Sie Apps Script-Funktionen ausführen, wenn der Nutzer mit der Seitenleiste oder dem Dialogfeld interagiert. Ihr Add-on kann mehrere Seitenleisten und Dialogfelder definieren, aber es kann immer nur eine davon gleichzeitig angezeigt werden.

Wenn Sie verhindern möchten, dass Nutzer mit dem Editor interagieren, bis sie eine Auswahl in der Add-on-Benutzeroberfläche getroffen haben, verwenden Sie ein Dialogfeld. Andernfalls verwenden Sie eine Seitenleiste.

Dialogfelder

Dialogfelder sind Fensterbereiche, die den Hauptinhalt des Editors ü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 die gleiche Weise wie benutzerdefinierte Dialogfelder in Apps Script erstellt. Die allgemeine empfohlene Vorgehensweise ist die folgende:

  1. Erstellen Sie eine Scriptprojektdatei, in der die HTML-Struktur, das CSS und das clientseitige JavaScript-Verhalten des Dialogfelds definiert werden. Beachten Sie beim Definieren des Dialogfelds die Richtlinien für den Stil von Editor-Add-ons.
  2. Rufen Sie in Ihrem serverseitigen Code, an der Stelle, an der 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 dann HtmlTemplate.evaluate(), um sie in ein HtmlOutput-Objekt umzuwandeln.
  3. Rufen Sie Ui.showModalDialog(htmlOutput, dialogTitle) auf, um das Dialogfeld mit diesem HtmlOutput aufzurufen.

Das serverseitige Script wird durch geöffnete Dialoge nicht angehalten. Das clientseitige JavaScript kann mithilfe von google.script.run() und zugehörigen Handlerfunktionen asynchrone Aufrufe an die Serverseite ausführen. Weitere Informationen finden Sie unter Client-zu-Server-Kommunikation.

Dialogfelder zum Öffnen von Dateien

Dialogfelder zum Öffnen von Dateien sind vordefinierte Dialogfelder, über die Nutzer Dateien aus ihrem Google Drive-Konto auswählen können. Sie können Ihrem Add-on ein Dialogfeld zum Öffnen von Dateien hinzufügen, ohne es selbst entwerfen zu müssen. Es 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 gängigste Art von Add-on-Oberfläche. Im Gegensatz zu Dialogfeldern können Sie auch dann mit den anderen Elementen der Editoroberfläche interagieren, wenn eine Seitenleiste geöffnet ist. Seitenleisten haben eine feste Breite, Sie können jedoch ihren Inhalt anpassen.

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

  1. Erstellen Sie eine Scriptprojektdatei, in der die HTML-Struktur, das CSS und das clientseitige JavaScript-Verhalten der Seitenleiste definiert werden. Beachten Sie beim Definieren der Seitenleiste die Richtlinien für den Stil von Editor-Add-ons.

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

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

In geöffneten Seitenleisten wird das serverseitige Script nicht angehalten. Das clientseitige JavaScript kann mit google.script.run() und zugehörigen Handlerfunktionen asynchrone Aufrufe an die Serverseite ausführen. Weitere Informationen finden Sie unter Client-zu-Server-Kommunikation.