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 ist besonders nützlich, um Webanwendungen zu erstellen oder benutzerdefinierte Benutzeroberflächen in Google Docs, Tabellen und Formulare hinzuzufügen. Sie können damit sogar den Text 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- und CSS-Code sowie clientseitigen JavaScript-Code schreiben. Die Seite wird als HTML5 bereitgestellt, obwohl einige erweiterte Funktionen von HTML5 nicht verfügbar sind. Dies wird unter Einschränkungen erläutert.

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

HTML als Webanwendung bereitstellen

Zum Erstellen einer Webanwendung mit dem HTML-Dienst muss der Code eine doGet()-Funktion enthalten. Diese teilt dem Skript mit, 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 das grundlegende Framework eingerichtet ist, müssen Sie nur noch eine Version des Skripts speichern und dann das Skript als Webanwendung bereitstellen.

Nachdem das Skript als Webanwendung bereitgestellt wurde, können Sie es auch in eine Google Sites-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 das Skript an die Datei containergebunden ist. In Google Formulare sind benutzerdefinierte Benutzeroberflächen nur für Bearbeiter sichtbar, die das Formular öffnen, um es zu ändern, und nicht für Nutzer, die das Formular öffnen, um zu antworten.

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

Diese Beispiele enthalten einige zusätzliche Funktionen: Mit der Funktion onOpen() wird ein benutzerdefiniertes Menü erstellt, über das 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 Oberflä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 Skripteditor ausführen oder das Fenster für den Docs-, Tabellen- oder Formulareditor neu laden. Dadurch wird der Skripteditor geschlossen. Danach sollte das benutzerdefinierte Menü bei jedem Öffnen der Datei innerhalb weniger Sekunden angezeigt werden. Wählen Sie Dialog > Open (Dialog > Öffnen) aus, um die Benutzeroberfläche aufzurufen.