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 użytkownika 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 pliku HTML możesz pisać większość standardowych kodów HTML, CSS i JavaScript po stronie klienta. Strona będzie wyświetlana w formacie HTML5, ale niektóre zaawansowane funkcje HTML5 będą niedostępne, jak opisano w sekcji Ograniczenia.

Plik może też zawierać skrypty szablonu, które są przetwarzane na serwerze przed wysłaniem strony do użytkownika – podobnie jak w przypadku języka PHP – jak to opisano w sekcji poświęconej szablonowi HTML.

Wyświetlanie kodu HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową za pomocą usługi HTML, Twój kod musi zawierać funkcję doGet(), która informuje skrypt, jak wyświetlić stronę. Ta funkcja musi zwracać obiekt HtmlOutput, jak 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 skonfigurowaniu 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 w interfejsie użytkownika Dokumentów, Arkuszy, Prezentacji lub Formularzy Google

Usługa HTML może wyświetlać okno lub pasek boczny w Dokumentach, Arkuszach, Prezentacjach i Formularzach Google, jeśli skrypt jest powiązany z plikiem. W Formularzach Google niestandardowe interfejsy są widoczne tylko dla osób edytujących formularz, które otwierają formularz w celu jego modyfikacji. Nie są one widoczne dla użytkownika, który otwiera formularz w celu wypełnienia go.

W przeciwieństwie do aplikacji internetowych skrypt, który tworzy interfejs dokumentu, arkusza kalkulacyjnego lub formularza, nie wymaga funkcji doGet() i nie musisz zapisywać wersji skryptu ani jej wdrażać. Zamiast tego funkcja, która otwiera interfejs, musi przekazywać Twój plik HTML jako obiekt HtmlOutput do metod showModalDialog()) lub showSidebar() obiektu Ui aktywnego dokumentu, formularza lub arkusza kalkulacyjnego.

Oto kilka przykładów dla wygody użytkowników: 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, 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>

Aby wyświetlić ten interfejs po raz pierwszy, musisz uruchomić funkcję onOpen() ręcznie w edytorze skryptów albo ponownie załadować okno edytora Dokumentów, Arkuszy lub Formularzy (spowoduje to zamknięcie edytora skryptów). Po każdym otwarciu pliku menu niestandardowe powinno pojawić się w ciągu kilku sekund. Aby zobaczyć interfejs, wybierz Okno > Otwórz.