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

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 do tworzenia aplikacji internetowych lub dodawania niestandardowych interfejsów użytkownika w Dokumentach, Arkuszach i Formularzach Google. Możesz nawet użyć go 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 napisać 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 nie będą dostępne, co 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), co opisujemy w sekcji HTML z szablonami.

Obsługa HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową za pomocą usługi HTML, kod musi zawierać funkcję, która informuje skrypt, jak wyświetlać stronę.doGet() 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>

Gdy podstawowa struktura będzie gotowa, wystarczy zapisać wersję skryptu, a następnie wdrożyć go jako aplikację internetową.

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

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

Usługa HTML może wyświetlać okno lub panel boczny w Dokumentach, Arkuszach, Prezentacjach lub Formularzach Google, jeśli skrypt jest powiązany z kontenerem pliku. (W Formularzach Google niestandardowe interfejsy użytkownika są widoczne tylko dla edytora, który otwiera formularz, aby go zmodyfikować, 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 dokumentu, arkusza kalkulacyjnego lub formularza, nie wymaga funkcji doGet(), a Ty nie musisz zapisywać wersji skryptu ani go wdrażać. Zamiast tego funkcja otwierająca interfejs musi przekazywać 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 ułatwiających korzystanie z nich: funkcja onOpen() tworzy niestandardowe menu, które ułatwia otwieranie interfejsu, a przycisk w pliku HTML wywołuje specjalną metodę close() interfejsu 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>

Pamiętaj, że gdy po raz pierwszy chcesz wyświetlić ten interfejs, musisz ręcznie uruchomić funkcję onOpen() w edytorze skryptów lub ponownie załadować okno edytora Dokumentów, Arkuszy lub Formularzy (co spowoduje zamknięcie edytora skryptów). Po wykonaniu tych czynności menu niestandardowe powinno pojawiać się w ciągu kilku sekund za każdym razem, gdy otworzysz plik. Aby zobaczyć interfejs, wybierz Dialog > Open (Okno > Otwórz).