HTML-Dienst: HTML erstellen und bereitstellen

Mit dem HTML-Dienst können Sie Webseiten bereitstellen, kann mit serverseitigen Apps Script-Funktionen interagieren. Sie ist besonders nützlich, zum Entwickeln von Webanwendungen oder zum Hinzufügen benutzerdefinierter Benutzeroberflächen in Google Docs, Google Tabellen, und Google Formulare. 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:

Innerhalb der HTML-Datei können Sie die meisten standardmäßigen HTML-, CSS- und clientseitigen JavaScript Die Seite wird im HTML5-Format bereitgestellt, einige erweiterte Funktionen von HTML5 steht nicht zur Verfügung. 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 in den im Abschnitt HTML-Vorlagen.

HTML als Web-App bereitstellen

Zum Erstellen einer Webanwendung mit dem HTML-Dienst muss Ihr Code ein doGet() enthalten die dem Skript mitteilt, wie die Seite bereitgestellt werden soll. Die Funktion muss Ein HtmlOutput-Objekt, wie in in diesem Beispiel.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Sobald diese Grundstruktur vorhanden ist, müssen Sie nur noch eine Version des Skripts speichern und dann Ihr Skript als Webanwendung bereitstellen.

Nachdem das Skript als Web-App bereitgestellt wurde, können Sie auch auf einer 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 ein Dialogfeld oder eine Seitenleiste anzeigen. in Google Docs, Google Tabellen, Google Präsentationen oder Google Formulare, container-bound in die Datei. In Google Formulare sind benutzerdefinierte Benutzeroberflächen nur für Mitbearbeiter sichtbar, die das Formular öffnen, und nicht an einen Nutzer, der das Formular öffnet, um zu antworten.)

Im Gegensatz zu einer Webanwendung kann ein Skript, das eine Benutzeroberfläche für ein Dokument erstellt, Tabelle oder Formular benötigt keine doGet()-Funktion. keine Version des Skripts speichern oder bereitstellen müssen. Stattdessen gibt die Funktion die die Benutzeroberfläche öffnet, Ihre HTML-Datei HtmlOutput-Objekt in der showModalDialog())- oder showSidebar()-Methode des Ui-Objekt für das aktive Dokument, Formular oder Tabelle.

Diese Beispiele enthalten einige zusätzliche Funktionen: die onOpen() ein benutzerdefiniertes Menü erstellen, um die -Schnittstelle zu öffnen, und die Schaltfläche in der HTML-Datei ruft eine spezielle close()-Methode des google.script.host API zum Schließen des .

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 Script-Editor oder aktualisieren Sie das Fenster des Docs-, Tabellen- oder Formulare-Editors, wodurch das Fenster Script-Editor). Das benutzerdefinierte Menü sollte innerhalb weniger Sekunden angezeigt werden. wenn Sie die Datei öffnen. Wählen Sie Dialog > Öffnen, um die .