Usługa HTML: tworzenie i wyświetlanie kodu HTML

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Usługa HTML umożliwia wyświetlanie stron internetowych, które mogą wchodzić w interakcje z funkcjami Apps Script po stronie serwera. Jest to szczególnie przydatne w przypadku tworzenia aplikacji internetowych lub dodawania niestandardowych interfejsów użytkownika w Dokumentach, Arkuszach i Formularzach Google. Możesz go też użyć do wygenerowania treści e-maila.

Tworzenie plików HTML

Aby dodać plik HTML do projektu Apps Script, wykonaj te czynności:

  1. Otwórz edytor Apps Script.
  2. Po lewej stronie kliknij Dodaj plik > HTML.

W pliku HTML możesz wpisać większość standardowych kodu HTML, CSS i JavaScript po stronie klienta. Strona będzie wyświetlana w formacie HTML5, ale niektóre zaawansowane funkcje HTML5 nie są dostępne, jak opisano w sekcji Ograniczenia.

Plik może też zawierać skrypty oparte na szablonach, które są przetwarzane na serwerze przed wysłaniem strony do użytkownika (podobnie do języka PHP) zgodnie z opisem w sekcji poświęconej szablonowemu kodowi HTML.

Wyświetlanie kodu HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową przy użyciu usługi HTML, kod musi zawierać funkcję doGet(), która informuje skrypt, jak wyświetlić stronę. Funkcja musi zwrócić obiekt HtmlOutput, jak pokazano w tym przykładzie.

Kod.gs

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

Indeks.html

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

Po wykonaniu tych podstawowych czynności wystarczy zapisać wersję skryptu, a następnie wdrożyć skrypt jako aplikację internetową.

Po wdrożeniu skryptu jako aplikacji internetowej możesz też umieścić go na stronie Google.

Wyświetlanie kodu HTML jako interfejsu użytkownika Dokumentów, Arkuszy, Prezentacji lub Formularzy Google

Usługa HTML może wyświetlać okno lub pasek boczny w Dokumentach, Arkuszach, Prezentacjach lub Formularzach Google, jeśli skrypt jest zastosowany do kontenera. W Formularzach Google niestandardowe interfejsy użytkownika są widoczne tylko dla edytora, który otwiera formularz w celu jego modyfikacji, a nie dla użytkownika, który otwiera formularz.

W przeciwieństwie do aplikacji internetowej skrypt, który tworzy interfejs użytkownika dla dokumentu, arkusza kalkulacyjnego lub formularza, nie wymaga określonej funkcji doGet() i nie musisz zapisywać wersji ani wdrażać jej. Funkcja, która otwiera interfejs, musi przekazywać plik HTML jako obiekt HtmlOutput do metod showModalDialog()) lub showSidebar() obiektu Ui aktywnego dokumentu, formularza lub arkusza kalkulacyjnego.

Oto kilka przykładów wygody: funkcja onOpen() tworzy niestandardowe menu, które ułatwia otwarcie interfejsu, a przycisk w pliku HTML wywołuje specjalną metodę close() interfejsu API google.script.host, aby zamknąć interfejs.

Kod.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');
}

Indeks.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

Za pierwszym razem, aby wyświetlić ten interfejs, musisz uruchomić funkcję onOpen() ręcznie w edytorze skryptów lub ponownie załadować okno edytora Dokumentów, Arkuszy lub Formularzy (co spowoduje zamknięcie edytora skryptów). Po tym czasie menu niestandardowe powinno wyświetlić się w ciągu kilku sekund. Wybierz Okno dialogowe > Otwórz, aby zobaczyć interfejs.