HTML-Dienst: HTML erstellen und bereitstellen

Mit dem HTML-Dienst können Sie Webseiten bereitstellen, die mit serverseitigen Apps Script-Funktionen interagieren können. Sie ist besonders nützlich, wenn Sie Webanwendungen erstellen oder benutzerdefinierte Benutzeroberflächen in Google Docs, Google Sheets und Google Formulare einfügen möchten. Sie können damit sogar den Text einer E‑Mail generieren lassen.

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 den meisten Standard-HTML-, CSS- und clientseitigen JavaScript-Code schreiben. Die Seite wird als HTML5 bereitgestellt. Einige erweiterte HTML5-Funktionen sind jedoch nicht verfügbar. Weitere Informationen finden Sie unter Einschränkungen.

Ihre Datei kann auch Vorlagenscriptlets enthalten, die auf dem Server verarbeitet werden, bevor die Seite an den Nutzer gesendet wird – ähnlich wie PHP. Weitere Informationen finden Sie im Abschnitt HTML-Vorlagen.

HTML als Web-App bereitstellen

Wenn Sie mit dem HTML-Dienst eine Webanwendung erstellen möchten, muss Ihr Code eine doGet()-Funktion enthalten, die dem Skript 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 Skripts speichern und dann Ihr Skript als Web-App bereitstellen.

Nachdem das Skript als Web-App bereitgestellt wurde, können Sie es auch in eine Google-Website einbetten.

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

Der HTML-Dienst kann ein Dialogfeld oder eine Seitenleiste in Google Docs, Sheets, Präsentationen oder Forms anzeigen, wenn Ihr Skript containergebunden an die Datei ist. In Google-Formularen sind benutzerdefinierte Benutzeroberflächen nur für Bearbeiter sichtbar, die das Formular zum Ändern öffnen, nicht für Nutzer, die das Formular zum Beantworten öffnen.

Im Gegensatz zu einer Web-App benötigt ein Script, mit dem eine Benutzeroberfläche für ein Dokument, eine Tabelle oder ein Formular erstellt wird, keine doGet()-Funktion. Außerdem müssen Sie keine Version Ihres Scripts speichern oder es bereitstellen. Stattdessen muss die Funktion, die die Benutzeroberfläche öffnet, Ihre HTML-Datei als HtmlOutput-Objekt an die Methoden showModalDialog()) oder showSidebar() des Ui-Objekts 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. Mit der Schaltfläche in der HTML-Datei wird eine spezielle close()-Methode der google.script.host-API aufgerufen, 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 aufrufen möchten, müssen Sie entweder die Funktion onOpen() manuell im Skripteditor ausführen oder das Fenster für den Docs-, Sheets- oder Forms-Editor neu laden. Dadurch wird der Skripteditor geschlossen. Danach sollte das benutzerdefinierte Menü jedes Mal, wenn Sie die Datei öffnen, innerhalb weniger Sekunden angezeigt werden. Wählen Sie Dialog > Open aus, um die Benutzeroberfläche aufzurufen.