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

Bei den meisten Editor-Add-ons sind Dialogfelder und Seitenleistenbereiche die primären Add-on-Benutzeroberflächen. Beide lassen sich mithilfe von 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. Sie können mit Ihrem Add-on mehrere Seitenleisten und Dialogfelder definieren, das Add-on kann jedoch nur jeweils eine Seite anzeigen.

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. Verwenden Sie andernfalls eine Seitenleiste.

Dialogfelder

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

Sie erstellen Add-on-Dialogfelder auf die gleiche Weise wie benutzerdefinierte Dialogfelder in Apps Script. Wir empfehlen folgende Vorgehensweise:

  1. Erstellen Sie eine Skriptprojektdatei, in der Sie die HTML-Struktur, CSS und das clientseitige JavaScript-Verhalten Ihres Dialogfelds festlegen. Beachten Sie beim Definieren des Dialogfelds die Stilrichtlinien für das Editor-Add-on.
  2. Rufen Sie in Ihrem serverseitigen Code, in 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 HtmlService.createTemplateFromFile(filename) aufrufen, um eine Vorlage zu generieren, und dann HtmlTemplate.evaluate(), um sie in ein HtmlOutput-Objekt zu konvertieren.
  3. Rufen Sie Ui.showModalDialog(htmlOutput, dialogTitle) auf, um das Dialogfeld mit HtmlOutput anzuzeigen.

Dialogfelder unterbrechen das serverseitige Skript nicht, während sie geöffnet sind. Das clientseitige JavaScript kann mithilfe von google.script.run() und den zugehörigen Handler-Funktionen 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, mit denen Nutzer Dateien aus Google Drive auswählen können. Sie können Ihrem Add-on ein Dialogfeld zum Öffnen einer Datei hinzufügen, ohne es entwerfen zu müssen. Dies erfordert jedoch eine zusätzliche Konfiguration. Außerdem benötigen Sie Zugriff auf das Cloud Platform-Projekt des Add-ons, 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 am häufigsten verwendete Art von Add-on-Oberfläche. Im Gegensatz zu Dialogfeldern können Sie weiterhin mit den anderen Elementen der Editor-Benutzeroberfläche interagieren, während eine Seitenleiste geöffnet ist. Seitenleisten haben eine feste Breite, deren Inhalt Sie jedoch anpassen können.

Add-on-Seitenleisten werden auf die gleiche Weise erstellt wie benutzerdefinierte Seitenleisten in Apps Script. Folgendes wird allgemein empfohlen:

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

  2. Rufen Sie in Ihrem serverseitigen Code, wo 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 HtmlService.createTemplateFromFile(filename) aufrufen, um eine Vorlage zu generieren, und dann HtmlTemplate.evaluate(), um sie in ein HtmlOutput-Objekt zu konvertieren.

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

Die Seitenleiste unterbricht das serverseitige Script nicht, während sie geöffnet ist. Das clientseitige JavaScript kann mithilfe von google.script.run() und den zugehörigen Handler-Funktionen asynchrone Aufrufe an die Serverseite ausführen. Weitere Informationen finden Sie unter Client-zu-Server-Kommunikation.