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

Für die meisten Editor-Add-ons: Dialogfenster und Seitenleistenbereiche sind die primären Benutzeroberflächen für Add-ons. Beide lassen sich mithilfe von Standard-HTML und CSS vollständig anpassen und Sie können Apps Script Client-Server-Kommunikationsmodell , 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, aber das Add-on kann immer nur eine.

Wenn Sie verhindern möchten, dass der Nutzer mit dem Editor interagiert, bis er auf der Add-on-Oberfläche eine Auswahl treffen, ein Dialogfeld verwenden, Andernfalls wird ein Seitenleiste.

Dialogfelder

Dialogfelder sind Fensterbereiche, die den Inhalt des primären Editors überlagern. Google Apps-Skript sind modale Dialogfelder Während sie geöffnet sind, können die Nutzenden nicht mit der anderen Elemente der Editor-Oberfläche. Sie können den Inhalt und die Größe von Dialogfeldern.

Add-on-Dialoge werden genauso erstellt wie Apps Script benutzerdefinierte Dialogfelder; der allgemeine empfohlene Vorgehensweise:

  1. Erstellen Sie eine Skript-Projektdatei, in der die HTML-Struktur des Dialogfelds definiert ist. CSS- und clientseitigen JavaScript-Funktionen. Berücksichtigen Sie beim Definieren des Dialogs den Stilrichtlinien für Editor-Add-ons entsprechen.
  2. Rufen Sie in Ihrem serverseitigen Code an der Stelle, an der das Dialogfeld geöffnet werden soll, HtmlService.createHtmlOutputFromFile(filename) um eine HtmlOutput zu erstellen -Objekt, das das Dialogfeld darstellt. Wenn Sie alternativ eine HTML-Vorlagen, die Sie aufrufen können HtmlService.createTemplateFromFile(filename) um eine Vorlage zu generieren, HtmlTemplate.evaluate() in ein HtmlOutput-Objekt.
  3. Ui.showModalDialog(htmlOutput, dialogTitle) anrufen um das Dialogfeld mit dieser HtmlOutput

Dialogfelder verhindern das serverseitige Script, während sie geöffnet sind. Die kann clientseitiges JavaScript asynchrone Aufrufe mit google.script.run() und zugehöriger Handler-Funktionen. 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 auswählen können von ihrem Google Drive-Konto. Sie können Ihrem Add-on ein Dialogfeld zum Öffnen von Dateien hinzufügen, ohne die nicht entworfen werden, erfordert aber eine zusätzliche Konfiguration. Außerdem Zugriff auf das Add-on benötigt, Cloud Platform-Projekt um die Google Picker API zu aktivieren.

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

Seitenleisten sind Bereiche, die rechts in der Editor-Oberfläche angezeigt werden. sind die am häufigsten verwendete Oberfläche für Add-ons. Im Gegensatz zu Dialogfeldern können Sie mit den anderen Elementen der Editor-Benutzeroberfläche interagieren, während eine Seitenleiste öffnen. Seitenleisten haben eine feste Breite, aber Sie können ihren Inhalt anpassen.

Add-on-Seitenleisten werden genauso erstellt wie Apps Script benutzerdefinierte Seitenleisten, der allgemeine empfohlene Vorgehensweise:

  1. Erstellen Sie eine Skript-Projektdatei, in der die HTML-Struktur Ihrer Seitenleiste definiert wird. CSS- und clientseitigen JavaScript-Funktionen. Beachten Sie beim Definieren der Seitenleiste den Stilrichtlinien für Editor-Add-ons entsprechen.

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

  3. Ui.showSidebar(htmlOutput) anrufen um die Seitenleiste damit anzuzeigen, HtmlOutput

Das serverseitige Script wird von geöffneten Seitenleisten nicht angehalten. Die kann clientseitiges JavaScript asynchrone Aufrufe mit google.script.run() und zugehöriger Handler-Funktionen. Weitere Informationen finden Sie unter Client-zu-Server-Kommunikation