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 Tabellen 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:
- Öffnen Sie den Apps Script-Editor.
- Klicken Sie links auf „Datei hinzufügen“ > HTML.
Innerhalb der HTML-Datei können Sie die meisten standardmäßigen HTML-, CSS- und clientseitigen JavaScript-Codes schreiben. Die Seite wird als HTML5 bereitgestellt, obwohl einige erweiterte Funktionen von HTML5 nicht verfügbar sind. Weitere Informationen hierzu finden Sie unter Einschränkungen.
Die Datei kann auch Vorlagen-Scriptlets enthalten, die auf dem Server verarbeitet werden, bevor die Seite an den Nutzer gesendet wird – ähnlich wie PHP –, wie im Abschnitt zu HTML-Vorlagen erläutert.
HTML als Web-App bereitstellen
Zum Erstellen einer Webanwendung mit dem HTML-Dienst muss der 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 das Basis-Framework eingerichtet ist, müssen Sie nur noch eine Version Ihres 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-Code als Benutzeroberfläche von 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 containergebunden an die Datei ist. (In Google Formulare sind benutzerdefinierte Benutzeroberflächen nur für Mitbearbeiter sichtbar, die das Formular zum Bearbeiten öffnen, nicht für Nutzer, die das Formular öffnen, um zu antworten.)
Im Gegensatz zu einer Webanwendung benötigt ein Skript, das eine Benutzeroberfläche für ein Dokument, eine Tabelle oder ein Formular erstellt, keine spezielle doGet()-Funktion und Sie müssen keine Version des Skripts speichern oder bereitstellen. Stattdessen muss die Funktion, die die Benutzeroberfläche öffnet, die HTML-Datei als HtmlOutput-Objekt an die Methode showModalDialog()) oder showSidebar() des Objekts Ui für das aktive Dokument, Formular oder die aktive Tabelle übergeben.
Diese Beispiele enthalten einige zusätzliche Funktionen zur Vereinfachung: Mit der Funktion onOpen() wird ein benutzerdefiniertes Menü erstellt, mit dem die Oberfläche leicht geöffnet werden kann. 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 die Benutzeroberfläche zum ersten Mal aufrufen, müssen Sie entweder die Funktion onOpen() manuell im Script-Editor ausführen oder das Fenster für den Docs-, Tabellen- oder Formulare-Editor neu laden (dadurch wird der Script-Editor 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.