Layanan HTML: Membuat dan Menyajikan HTML

Layanan HTML memungkinkan Anda menyalurkan halaman web yang dapat berinteraksi dengan fungsi Apps Script sisi server. Hal ini sangat berguna untuk membuat aplikasi web atau menambahkan antarmuka pengguna kustom di Google Dokumen, 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 yang standar. Halaman ini akan ditayangkan sebagai HTML5, meskipun beberapa fitur lanjutan HTML5 tidak tersedia, seperti yang dijelaskan dalam Pembatasan.

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

Menyajikan HTML sebagai aplikasi web

Untuk membuat aplikasi web dengan layanan HTML, kode Anda harus menyertakan fungsi doGet() yang memberi tahu skrip cara menyajikan 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 diterapkan, Anda hanya perlu menyimpan versi skrip, lalu men-deploy skrip Anda sebagai aplikasi web.

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

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

Layanan HTML dapat menampilkan dialog atau sidebar di Google Dokumen, Spreadsheet, Slide, atau Formulir jika skrip Anda terikat penampung ke file tersebut. (Di Google Formulir, antarmuka pengguna kustom hanya terlihat oleh editor yang membuka formulir untuk memodifikasinya, 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 sebagai objek HtmlOutput ke metode showModalDialog()) atau showSidebar() dari objek Ui untuk dokumen, formulir, atau spreadsheet aktif.

Contoh berikut mencakup beberapa fitur tambahan untuk memudahkan: fungsi onOpen() membuat menu kustom yang memudahkan pembukaan antarmuka, dan tombol di file HTML memanggil metode close() khusus dari google.script.host API 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>

Perhatikan bahwa 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 akan menutup editor skrip). Setelah itu, menu kustom akan muncul dalam beberapa detik setiap kali Anda membuka file. Pilih Dialog > Open untuk melihat antarmuka.