Layanan HTML: Membuat dan Menyajikan HTML

Layanan HTML memungkinkan Anda menyalurkan halaman web yang dapat berinteraksi dengan fungsi Apps Script sisi server. Editor 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 tersebut, Anda dapat menulis sebagian besar HTML, CSS, dan JavaScript sisi klien standar. Halaman akan ditayangkan sebagai HTML5, meskipun beberapa fitur lanjutan HTML5 tidak tersedia, seperti yang dijelaskan dalam Pembatasan.

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

Menyajikan 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 diterapkan, 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.

Menyajikan 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 container ke file. (Di Google Formulir, antarmuka pengguna kustom hanya dapat dilihat 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 sebagai objek HtmlOutput ke metode showModalDialog()) atau showSidebar() objek Ui untuk dokumen, formulir, atau spreadsheet aktif.

Contoh ini mencakup beberapa fitur tambahan untuk memudahkan: fungsi onOpen() membuat menu kustom yang memudahkan Anda membuka antarmuka, dan tombol dalam 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>

Perlu diperhatikan 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.