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, wykonaj te czynności:
- Otwórz edytor Apps Script.
- 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 ze skryptami szablonów.
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 chcesz wyświetlić ten interfejs po raz pierwszy, 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). Po każdym otwarciu pliku menu niestandardowe powinno pojawić się w ciągu kilku sekund. Wybierz Okno > Otwórz, aby wyświetlić interfejs.