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 hinzufügen möchten. 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 den meisten Standard-HTML-, CSS- und clientseitigen JavaScript-Code schreiben. Die Seite wird als HTML5 bereitgestellt. Einige erweiterte Funktionen von HTML5 sind jedoch nicht verfügbar, wie unter Einschränkungen beschrieben.

Ihre Datei kann auch Vorlagenscriptlets enthalten, die auf dem Server verarbeitet werden, bevor die Seite an den Nutzer gesendet wird – ähnlich wie bei 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, Google Sheets, Google Präsentationen oder Google Formulare bereitstellen

Der HTML-Dienst kann ein Dialogfeld oder eine Seitenleiste in Google Docs, Google Sheets, Google Präsentationen oder Google Formulare 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 Webanwendung benötigt ein Skript, 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 Skripts 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, die die Verwendung erleichtern: Mit der Funktion onOpen wird ein benutzerdefiniertes Menü erstellt, mit dem Sie die Benutzeroberfläche öffnen können. Über die Schaltfläche in der HTML-Datei wird google.script.host.close 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 (wodurch der Skripteditor geschlossen wird). Danach wird das benutzerdefinierte Menü jedes Mal, wenn Sie die Datei öffnen, innerhalb weniger Sekunden angezeigt. Wählen Sie Dialog > Öffnen aus, um die Benutzeroberfläche aufzurufen.