Layanan HTML: Membuat dan Menyajikan HTML

Layanan HTML memungkinkan Anda menyajikan laman web 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 sisi klien standar pada JavaScript. 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 kepada pengguna — mirip dengan PHP — seperti yang dijelaskan dalam di HTML dengan template.

Menyajikan HTML sebagai aplikasi web

Untuk membuat aplikasi web dengan layanan HTML, kode Anda harus menyertakan doGet() {i>function<i} yang memberi tahu skrip bagaimana menyajikan laman itu. Fungsi ini harus kembali objek HtmlOutput, seperti yang ditunjukkan di pada 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 kerangka kerja dasar tersebut diterapkan, yang perlu Anda lakukan adalah simpan versi skrip Anda, lalu deploy skrip Anda sebagai aplikasi web.

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

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 container-bound ke file. (Di Google Formulir, antarmuka pengguna khusus hanya terlihat oleh editor yang membuka formulir mengubahnya, bukan untuk 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 memerlukannya tidak perlu menyimpan versi skrip Anda atau men-deploy-nya. Sebagai gantinya, fungsi yang membuka antarmuka pengguna harus meneruskan file HTML Anda sebagai HtmlOutput ke Metode showModalDialog()) atau showSidebar() dari Objek Ui untuk dokumen, formulir, atau {i>spreadsheet<i}.

Contoh ini mencakup beberapa fitur tambahan untuk memudahkan: onOpen() membuat menu khusus yang memudahkannya untuk membuka antarmuka, dan tombol di file HTML akan memanggil Metode close() dari google.script.host API untuk menutup dalam antarmuka berbasis web yang sederhana.

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 Anda ingin menampilkan antarmuka pengguna ini, Anda harus jalankan 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 khusus akan muncul dalam beberapa detik setiap kali Anda membuka {i>file<i}. Pilih Dialog > Buka untuk melihat dalam antarmuka berbasis web yang sederhana.