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

Usługa HTML umożliwia wyświetlanie stron internetowych, które może wchodzić w interakcję z funkcjami Apps Script po stronie serwera. Szczególnie przydatne są do tworzenia aplikacji internetowych lub dodawania niestandardowych interfejsów użytkownika w Dokumentach, Arkuszach Google oraz Formularze. 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 elementów HTML i CSS oraz umieszczonych po stronie klienta JavaScriptu. Strona będzie dostępna w formacie HTML5, ale niektóre zaawansowane funkcje Format HTML5 jest niedostępny, jak wyjaśniliśmy na stronie Ograniczenia.

Plik może też zawierać skrypty szablonów przetwarzane na serwerze przed wysłaniem strony do użytkownika – podobnie jak w języku PHP – zgodnie z opisem w szablonu HTML.

Wyświetlanie kodu HTML jako aplikacji internetowej

Aby utworzyć aplikację internetową za pomocą usługi HTML, Twój kod musi zawierać atrybut doGet() która informuje skrypt, jak wyświetlić stronę. Funkcja musi zwracać obiekt HtmlOutput, jak widać w polu 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 podstawowych zasad musisz jedynie zapisz wersję skryptu, a potem wdrożyć skrypt jako aplikację internetową.

Po wdrożeniu skryptu jako aplikacji internetowej możesz też umieścić go 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 container-bound (powiązany z plikiem). W Formularzach Google niestandardowe interfejsy użytkownika są widoczne tylko dla edytującego, który otwiera formularz go modyfikować, a nie użytkownikowi, który otwiera formularz, żeby na nie odpowiedzieć).

W przeciwieństwie do aplikacji internetowej skrypt tworzący interfejs użytkownika dokumentu, arkusz kalkulacyjny lub formularz nie potrzebuje funkcji doGet(), a Ty nie muszą zapisywać wersji skryptu ani go wdrażać. Zamiast tego funkcja który otwiera interfejs użytkownika, musi przekazać plik HTML jako HtmlOutput w tabeli showModalDialog()) lub showSidebar() metody argumentu Obiekt Ui aktywnego dokumentu, formularza lub arkusz kalkulacyjny.

Dla wygody podajemy kilka dodatkowych funkcji: onOpen() tworzy menu niestandardowe, które ułatwia otwiera się interfejs, a przycisk w pliku HTML wywołuje specjalne close() metody Interfejs API google.script.host do zamykania za pomocą prostego interfejsu online.

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 interfejsu musisz uruchom funkcję onOpen() ręcznie w edytorze skryptów lub załaduj ponownie okno edytora Dokumentów, Arkuszy lub Formularzy (co spowoduje zamknięcie edytor skryptów). Menu niestandardowe powinno pojawić się w ciągu kilku sekund. za każdym razem, gdy otwierasz plik. Wybierz Okno > Otwórz, aby zobaczyć za pomocą prostego interfejsu online.