Usługa HTML: tworzenie i udostępnianie kodu HTML

Usługa HTML umożliwia udostępnianie stron internetowych, które mogą wchodzić w interakcje z funkcjami Apps Script po stronie serwera. Jest to szczególnie przydatne przy tworzeniu aplikacji internetowych lub dodawaniu niestandardowych interfejsów w Dokumentach, Arkuszach i Formularzach Google. Możesz go nawet 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 tym pliku możesz umieścić większość standardowych kodów HTML i CSS oraz JavaScript po stronie klienta. Strona będzie wyświetlana w formacie HTML5, ale niektóre zaawansowane funkcje HTML5 nie są dostępne, o czym mowa w Ograniczenia.

Plik może też zawierać skrypty szablonów, które są przetwarzane na serwerze przed wysłaniem strony do użytkownika – podobnie jak w języku PHP – zgodnie z opisem w sekcji o szablonowym kodzie HTML.

Wyświetlanie kodu HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową za pomocą usługi HTML, w kodzie musi znajdować się funkcja doGet(), która informuje skrypt, jak wyświetlić stronę. Funkcja musi zwracać obiekt HtmlOutput, jak pokazano w tym przykładzie.

Code.gs

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

Index.html

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

Po przygotowaniu podstawowej struktury musisz tylko zapisać wersję skryptu, a potem wdrożyć go jako aplikację internetową.

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

Wyświetlanie kodu HTML jako interfejsu 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 powiązany z kontenerem. (W Formularzach Google niestandardowe interfejsy użytkownika są widoczne tylko dla edytującego, który otwiera formularz w celu jego zmodyfikowania, a nie dla użytkownika, który otwiera formularz, aby na nie odpowiedzieć).

W przeciwieństwie do aplikacji internetowej skrypt tworzący interfejs użytkownika dla dokumentu, arkusza kalkulacyjnego czy formularza nie wymaga konkretnie funkcji doGet() i nie musisz zapisywać wersji skryptu ani wdrażać jej. Funkcja otwierająca interfejs musi jednak przekazać plik HTML jako obiekt HtmlOutput do metod showModalDialog()) lub showSidebar() obiektu Ui dla aktywnego dokumentu, formularza lub arkusza kalkulacyjnego.

Te przykłady zawierają kilka dodatkowych funkcji, które zapewniają wygodę. Funkcja onOpen() tworzy menu niestandardowe, które ułatwia otwarcie interfejsu, a przycisk w pliku HTML wywołuje specjalną metodę close() interfejsu API google.script.host, która zamyka interfejs.

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>

Przy pierwszym wyświetleniu tego interfejsu musisz albo uruchomić funkcję onOpen() ręcznie w edytorze skryptów albo ponownie załadować okno edytora Dokumentów, Arkuszy lub Formularzy (co spowoduje zamknięcie edytora skryptów). Po każdym otwarciu pliku menu niestandardowe powinno pojawić się w ciągu kilku sekund. Wybierz Okno > Otwórz, aby wyświetlić interfejs.