HTML-Dienst: HTML erstellen und bereitstellen

Mit dem HTML-Dienst können Sie Webseiten bereitstellen, die mit serverseitigen Apps Script-Funktionen interagieren können. Er ist besonders nützlich, um Webanwendungen zu erstellen oder benutzerdefinierte Benutzeroberflächen in Google Docs, Google Sheets und Google Formulare hinzuzufügen. Sie können ihn sogar verwenden, um den Text einer E‑Mail zu 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 erläutert.

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

HTML als Webanwendung 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 eingerichtet ist, müssen Sie nur noch eine Version Ihres Skripts speichernund es dann als Webanwendung bereitstellen.

Nachdem das Skript als Webanwendung 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 in Google Docs, Google Sheets, Google Präsentationen oder Google Formulare ein Dialogfeld oder eine Seitenleiste anzeigen, wenn Ihr Skript an die Datei gebunden ist. In Google Formulare sind benutzerdefinierte Benutzeroberflächen nur für Bearbeiter sichtbar, die das Formular öffnen, um es zu ändern. Nutzer, die das Formular öffnen, um zu antworten, sehen sie nicht.

Anders als bei einer Webanwendung ist für ein Skript, das eine Benutzeroberfläche für ein Dokument, eine Tabelle oder ein Formular erstellt, keine doGet-Funktion erforderlich. Sie müssen auch keine Version Ihres Skripts speichern oder es bereitstellen. Stattdessen muss die Funktion, die die Benutzeroberfläche öffnet, Ihre HTML-Datei als ein HtmlOutput-Objekt an die showModalDialog oder showSidebar-Methoden 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: Die onOpen Funktion erstellt ein benutzerdefiniertes Menü, 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 anzeigen möchten, müssen Sie entweder die Funktion onOpen manuell im Skript-Editor ausführen oder das Fenster für den Docs-, Sheets- oder Formulare-Editor neu laden. Dadurch wird der Skript-Editor geschlossen. Danach wird das benutzerdefinierte Menü jedes Mal innerhalb weniger Sekunden angezeigt, wenn Sie die Datei öffnen. Wenn Sie die Benutzeroberfläche sehen möchten, wählen Sie Dialogfeld > Öffnen aus.