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

Usługa HTML umożliwia obsługę stron internetowych, które mogą korzystać z funkcji 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 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 plikó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, jak opisano w sekcji Ograniczenia.

Plik może też zawierać skrypty skryptów przetwarzane na serwerze przed wysłaniem strony do użytkownika – podobnie jak w przypadku języka PHP – jak opisano w sekcji dotyczącej szablonu HTML.

Wyświetlanie kodu HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową za pomocą usługi HTML, musisz umieścić w kodzie funkcję doGet() informującą skrypt o sposobie wyświetlania strony. Funkcja musi zwracać 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 zastosowaniu podstawowych zasad musisz tylko zapisać wersję skryptu, a potem wdrożyć go jako aplikację internetową.

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

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 ograniczony do kontenera. W Formularzach Google niestandardowe interfejsy użytkownika są widoczne tylko dla edytorów, którzy je otwierają, a nie dla użytkownika, który chce otworzyć formularz.

W przeciwieństwie do aplikacji internetowej skrypt tworzący interfejs użytkownika do dokumentu, arkusza kalkulacyjnego lub formularza nie wymaga konkretnie funkcji doGet() i nie musisz zapisywać wersji ani wdrażać wersji. Funkcja, która otwiera interfejs użytkownika, musi przekazywać plik HTML jako obiekt HtmlOutput do metod showModalDialog()) lub showSidebar() obiektu Ui w aktywnym dokumencie, formularzu lub arkuszu kalkulacyjnym.

Te przykłady to kilka dodatkowych funkcji: funkcja onOpen() tworzy menu niestandardowe ułatwiające otwieranie interfejsu, a przycisk w pliku HTML wywołuje specjalną metodę close() interfejsu API google.script.host w celu zamknięcia interfejsu.

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>

Pamiętaj, że przy pierwszym uruchomieniu tego interfejsu użytkownika musisz uruchomić funkcję onOpen()ręcznie w edytorze skryptów lub ponownie wczytać okno edytora Dokumentów, Arkuszy lub Formularzy (spowoduje to zamknięcie edytora skryptów). Gdy otworzysz plik, menu niestandardowe powinno wyświetlić się w ciągu kilku sekund. Wybierz Okno > Otwórz, aby zobaczyć interfejs.