Layanan HTML: Membuat dan Menayangkan HTML

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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

Buat file HTML

Untuk menambahkan file HTML ke project Apps Script Anda, 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 akan ditayangkan sebagai HTML5, meskipun beberapa fitur lanjutan HTML5 tidak tersedia, seperti yang dijelaskan dalam Pembatasan.

File Anda juga dapat menyertakan skrip template yang diproses di server sebelum halaman dikirim ke pengguna, mirip dengan PHP, seperti yang dijelaskan di bagian tentang HTML 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 tersebut harus menampilkan objek HtmlOutput, seperti yang ditunjukkan dalam contoh ini.

Kode.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 memilih untuk menyematkannya di Situs Google.

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 terikat penampung ke file. (Di Google Formulir, antarmuka pengguna kustom hanya dapat dilihat oleh editor yang membuka formulir untuk mengubahnya, bukan kepada 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 memudahkan: fungsi onOpen() membuat menu kustom yang memudahkan membuka antarmuka, dan tombol dalam file HTML memanggil metode close() khusus dari google.script.host API untuk menutup antarmuka.

Kode.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.