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

Bei den meisten Editor-Add-ons sind Dialogfenster und Seitenleistenbereiche die primären Benutzeroberflächen von Add-ons. 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. Ihr Add-on kann mehrere Seitenleisten und Dialogfelder definieren, es kann aber jeweils nur eins angezeigt werden.

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

Dialogfelder

Dialogfelder sind Fensterbereiche, die den Hauptinhalt des Editors überlagern. Apps Script-Dialogfelder sind modales Dialogfeld. 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. Das allgemein empfohlene Verfahren ist folgende:

  1. Erstellen Sie eine Skriptprojektdatei, in der die HTML-Struktur, CSS und clientseitiges JavaScript-Verhalten des Dialogfelds definiert wird. Beachten Sie beim Definieren des Dialogfelds die Stilrichtlinien für Editor-Add-ons.
  2. Rufen Sie in dem 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 alternativ HtmlService.createTemplateFromFile(filename) aufrufen, um eine Vorlage zu generieren, und dann HtmlTemplate.evaluate() aufrufen, um sie in ein HtmlOutput-Objekt zu konvertieren.
  3. Rufen Sie Ui.showModalDialog(htmlOutput, dialogTitle) auf, um das Dialogfeld mit diesem HtmlOutput-Element einzublenden.

Dialogfelder halten das serverseitige Skript nicht an, während sie geöffnet sind. Das clientseitige JavaScript kann mithilfe von google.script.run() und den zugehörigen Handler-Funktionen asynchrone Aufrufe auf der 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 von Dateien hinzufügen, ohne es entwerfen zu müssen. Dafür 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.

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

Seitenleisten sind Bereiche, die auf der rechten Seite der Editor-Oberfläche angezeigt werden und die gängigste Art von Add-on-Oberflächen sind. Im Gegensatz zu Dialogfeldern können Sie weiterhin mit den anderen Elementen der Editor-Oberfläche interagieren, während 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. Das allgemein empfohlene Verfahren ist folgende:

  1. Erstellen Sie eine Skriptprojektdatei, in der die HTML-Struktur, CSS und das clientseitige JavaScript-Verhalten Ihrer Seitenleiste definiert wird. Beachten Sie beim Definieren der Seitenleiste die Stilrichtlinien für Editor-Add-ons.
  2. Rufen Sie in dem 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 dann HtmlTemplate.evaluate() aufrufen, um sie in ein HtmlOutput-Objekt zu konvertieren.

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

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