HTML-Dienst: HTML erstellen und bereitstellen

Mit dem HTML-Dienst können Sie Webseiten bereitstellen, die mit serverseitigen Apps Script-Funktionen interagieren können. Es eignet sich besonders zum Erstellen von Webanwendungen oder zum Hinzufügen benutzerdefinierter Benutzeroberflächen in Google Docs, Google Tabellen und Google Formulare. Sie können damit sogar den Textkörper einer E-Mail generieren.

HTML-Dateien erstellen

So fügen Sie Ihrem Apps Script-Projekt eine HTML-Datei hinzu:

  1. Öffnen Sie den Apps Script-Editor.
  2. Klicken Sie links auf „Datei hinzufügen“  > HTML.

In der HTML-Datei können Sie die meisten Standard-HTML-, CSS- und clientseitigen JavaScript-Codezeilen schreiben. Die Seite wird als HTML5-Seite bereitgestellt. Einige erweiterte HTML5-Funktionen sind jedoch nicht verfügbar, wie unter Einschränkungen erläutert.

Ihre Datei kann auch Vorlagen-Scriptlets enthalten, die auf dem Server verarbeitet werden, bevor die Seite an den Nutzer gesendet wird – ähnlich wie bei PHP, wie im Abschnitt Templated HTML erläutert.

HTML als Webanwendung bereitstellen

Wenn Sie eine Webanwendung mit dem HTML-Dienst erstellen möchten, muss Ihr Code eine doGet()-Funktion enthalten, die dem Script mitteilt, wie die Seite bereitgestellt werden soll. Die Funktion muss ein HtmlOutput-Objekt zurückgeben, wie in diesem Beispiel gezeigt.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Sobald dieses grundlegende Framework vorhanden ist, müssen Sie nur noch eine Version Ihres Scripts speichern und dann Ihr Script als Webanwendung bereitstellen.

Nachdem das Script als Webanwendung bereitgestellt wurde, können Sie es auch in eine Google-Website einbetten.

HTML als Benutzeroberfläche für Google Docs, Google Tabellen, Google Präsentationen oder Google Formulare bereitstellen

Der HTML-Dienst kann in Google Docs, Google Tabellen, Google Präsentationen oder Google Formulare ein Dialogfeld oder eine Seitenleiste anzeigen, wenn Ihr Script containergebunden an die Datei ist. In Google Forms sind benutzerdefinierte Benutzeroberflächen nur für einen Bearbeiter sichtbar, der das Formular öffnet, um es zu ändern, nicht für einen Nutzer, der das Formular öffnet, um es auszufüllen.

Im Gegensatz zu einer Webanwendung ist für ein Script, das eine Benutzeroberfläche für ein Dokument, eine Tabelle oder ein Formular erstellt, keine doGet()-Funktion erforderlich. Außerdem müssen Sie keine Version Ihres Scripts speichern oder bereitstellen. Stattdessen muss die Funktion, die die Benutzeroberfläche öffnet, Ihre HTML-Datei als HtmlOutput-Objekt an die showModalDialog())- oder showSidebar()-Methoden des Ui-Objekts für das aktive Dokument, Formular oder Tabellenblatt übergeben.

Diese Beispiele enthalten einige zusätzliche Funktionen für den Komfort: Die onOpen()-Funktion erstellt ein benutzerdefiniertes Menü, mit dem sich die Benutzeroberfläche ganz einfach öffnen lässt. Die Schaltfläche in der HTML-Datei ruft eine spezielle close()-Methode der google.script.host API auf, um die Benutzeroberfläche zu schließen.

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

Wenn Sie diese Benutzeroberfläche zum ersten Mal anzeigen möchten, müssen Sie entweder die Funktion onOpen() manuell im Script-Editor ausführen oder das Fenster für den Docs-, Sheets- oder Forms-Editor neu laden. Dadurch wird der Script-Editor geschlossen. Danach sollte das benutzerdefinierte Menü jedes Mal innerhalb weniger Sekunden angezeigt werden, wenn Sie die Datei öffnen. Wählen Sie Dialog > Öffnen aus, um die Benutzeroberfläche aufzurufen.