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

Usługa HTML umożliwia wyświetlanie stron internetowych, które mogą wchodzić w interakcję z funkcjami Apps Script po stronie serwera. Jest to szczególnie przydatne podczas tworzenia aplikacji internetowych lub dodawania 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:

  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 są niedostępne, jak wyjaśniono w sekcji 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 przypadku PHP). Opisane jest to w sekcji o HTML-u szablonowym.

Przesyłanie kodu HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową z użyciem usługi HTML, kod musi zawierać funkcję doGet(), która mówi skryptowi, jak wyświetlić stronę. 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>

Gdy podstawowa struktura jest gotowa, wystarczy zapisz wersję skryptu, a potem wprowadź go jako aplikację internetową.

Po wdrożeniu skryptu jako aplikacji internetowej możesz go też osadzać w Witrynie Google.

wyświetlać kod HTML jako interfejs użytkownika Dokumentów, Arkuszy, Prezentacji lub Formularzy Google;

Usługa HTML może wyświetlać okno dialogowe lub pasek boczny w Dokumentach, Arkuszach, Prezentacjach lub Formularzach Google, jeśli skrypt jest powiązany z kontenerem pliku. (W Google Forms 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, aby na niego odpowiedzieć).

W przeciwieństwie do aplikacji internetowej skrypt, który tworzy interfejs użytkownika dla dokumentu, arkusza kalkulacyjnego lub formularza, nie wymaga funkcji doGet(). Nie musisz też zapisywać wersji skryptu ani go wdrażać. Zamiast tego funkcja, która otwiera interfejs użytkownika, musi przekazać plik HTML jako obiekt HtmlOutput do metod showModalDialog()) lub showSidebar() obiektu Ui w przypadku aktywnego dokumentu, formularza lub arkusza kalkulacyjnego.

Te przykłady zawierają kilka dodatkowych funkcji, które ułatwiają korzystanie z aplikacji. Funkcja onOpen() tworzy niestandardowe menu, które ułatwia otwieranie interfejsu, a przycisk w pliku HTML wywołuje specjalną metodę close() interfejsu API google.script.host, aby zamknąć 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>

Pamiętaj, że gdy po raz pierwszy chcesz wyświetlić ten interfejs użytkownika, 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). Następnie menu niestandardowe powinno się pojawiać w ciągu kilku sekund za każdym razem, gdy otwierasz plik. Aby wyświetlić interfejs, wybierz Dialog > Otwórz.