Layanan HTML: Membuat dan Menyajikan HTML

Layanan HTML memungkinkan Anda menayangkan 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 standar, CSS, dan JavaScript sisi klien. Halaman akan ditayangkan sebagai HTML5, meskipun beberapa fitur lanjutan 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 HTML dengan template.

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 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 menyisipkannya di Google Sites.

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. (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 yang aktif.

Contoh ini mencakup beberapa fitur tambahan untuk memudahkan: fungsi onOpen() membuat menu kustom yang memudahkan pembukaan 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>

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.