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 sind mit Standard-HTML und ‑CSS vollständig anpassbar. Sie können 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. 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 einen Dialog. 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. Das allgemeine Verfahren sieht so aus:

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

Dialogfelder unterbrechen das serverseitige Script nicht, während sie geöffnet sind. Das clientseitige JavaScript kann mit google.script.run und zugehörigen Handler-Funktionen asynchrone Aufrufe an die Serverseite 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. Sie benötigen außerdem 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 Felder, 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 Benutzeroberfläche des Editors 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 wie benutzerdefinierte Seitenleisten in Apps Script erstellt. Das allgemeine Verfahren sieht so aus:

  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 HTML-Vorlagen verwenden, können Sie alternativ HtmlService.createTemplateFromFile aufrufen, um eine Vorlage zu generieren, und sie dann mit HtmlTemplate.evaluate in ein HtmlOutput-Objekt konvertieren.

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

  3. Rufen Sie Ui.showSidebar 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 die Serverseite senden. Weitere Informationen finden Sie unter Client-Server-Kommunikation.