Layanan HTML: Membuat dan Menyajikan HTML

Layanan HTML memungkinkan Anda menayangkan halaman web yang dapat berinteraksi dengan fungsi Apps Script sisi server. Layanan ini sangat berguna untuk membuat aplikasi web atau menambahkan antarmuka pengguna kustom di Google Dokumen, Google Spreadsheet, dan Formulir. Anda bahkan dapat menggunakannya untuk membuat isi email.

Membuat file HTML

Untuk menambahkan file HTML ke project Apps Script, ikuti langkah-langkah berikut:

  1. Buka editor Apps Script.
  2. Di sebelah kiri, klik Tambahkan file > HTML.

Dalam file HTML, Anda dapat menulis sebagian besar HTML, CSS, dan JavaScript sisi klien standar. Halaman ini ditayangkan sebagai HTML5, meskipun beberapa fitur lanjutan dari HTML5 tidak tersedia, seperti yang dijelaskan dalam Batasan.

File Anda juga dapat menyertakan scriptlet template yang diproses di server sebelum halaman dikirim ke pengguna — mirip dengan PHP — seperti yang dijelaskan di bagian tentang HTML bertemplate.

Menayangkan HTML sebagai aplikasi web

Untuk membuat aplikasi web dengan layanan HTML, kode Anda harus menyertakan fungsi doGet yang memberi tahu skrip cara menayangkan halaman. Fungsi ini harus menampilkan objek HtmlOutput, seperti yang ditunjukkan dalam contoh ini.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Setelah framework dasar tersebut ada, Anda hanya perlu menyimpan versi skrip, lalu men-deploy skrip sebagai aplikasi web.

Setelah skrip di-deploy sebagai aplikasi web, Anda juga dapat menyematkannya di Google Sites.

Menayangkan HTML sebagai antarmuka pengguna Google Dokumen, Spreadsheet, Google Slide, atau Formulir

Layanan HTML dapat menampilkan dialog atau sidebar di Google Dokumen, Spreadsheet, Slide, atau Formulir jika skrip Anda terikat ke file. Di Google Formulir, antarmuka pengguna kustom hanya terlihat oleh editor yang membuka formulir untuk mengubahnya, bukan oleh pengguna yang membuka formulir untuk merespons.

Tidak seperti aplikasi web, skrip yang membuat antarmuka pengguna untuk dokumen, spreadsheet, atau formulir tidak memerlukan fungsi doGet secara khusus, dan Anda tidak perlu menyimpan versi skrip atau men-deploy-nya. Sebagai gantinya, fungsi yang membuka antarmuka pengguna harus meneruskan file HTML Anda sebagai objek HtmlOutput ke metode showModalDialog atau showSidebar dari objek Ui untuk dokumen, formulir, atau spreadsheet aktif.

Contoh ini menyertakan beberapa fitur tambahan untuk kemudahan: fungsi onOpen membuat menu kustom yang membantu Anda membuka antarmuka, dan tombol di file HTML memanggil google.script.host.close untuk menutup antarmuka.

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>

Saat pertama kali ingin menampilkan antarmuka pengguna ini, Anda harus menjalankan fungsi onOpen secara manual di editor skrip atau memuat ulang jendela untuk editor Dokumen, Spreadsheet, atau Formulir (yang menutup editor skrip). Setelah itu, menu kustom akan muncul dalam beberapa detik setiap kali Anda membuka file. Untuk melihat antarmuka, pilih Dialog > Buka.