Dialog dan sidebar untuk add-on Editor

Untuk sebagian besar Add-on editor, jendela dialog dan panel sidebar adalah antarmuka pengguna add-on utama. Keduanya dapat disesuaikan sepenuhnya menggunakan HTML dan CSS standar, dan Anda dapat menggunakan model komunikasi client-server Apps Script untuk menjalankan fungsi Apps Script saat pengguna berinteraksi dengan sidebar atau dialog. Add-on Anda dapat menentukan beberapa sidebar dan dialog, tetapi add-on hanya dapat menampilkan satu per satu.

Jika Anda ingin mencegah pengguna berinteraksi dengan editor hingga mereka membuat pilihan di antarmuka add-on, gunakan dialog; jika tidak, gunakan sidebar.

Dialog

Dialog adalah panel jendela yang melapisi konten editor utama. Dialog Apps Script bersifat modal; saat dibuka, pengguna tidak dapat berinteraksi dengan elemen lain di antarmuka editor. Anda dapat menyesuaikan konten dan ukuran dialog.

Anda membuat dialog add-on dengan cara yang sama seperti dialog kustom Apps Script; prosedur umum yang direkomendasikan adalah sebagai berikut:

  1. Buat file project skrip yang menentukan struktur HTML dialog, CSS, dan perilaku JavaScript sisi klien. Saat menentukan dialog, lihat Panduan gaya add-on Editor.
  2. Dalam kode sisi server tempat Anda ingin dialog terbuka, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat objek HtmlOutput yang merepresentasikan dialog. Atau, jika Anda menggunakan HTML ber-template, Anda dapat memanggil HtmlService.createTemplateFromFile(filename) untuk membuat template, lalu HtmlTemplate.evaluate() untuk mengonversinya menjadi objek HtmlOutput.
  3. Panggil Ui.showModalDialog(htmlOutput, dialogTitle) untuk menampilkan dialog menggunakan HtmlOutput tersebut.

Dialog tidak menangguhkan skrip sisi server saat terbuka. JavaScript sisi klien dapat melakukan panggilan asinkron ke sisi server menggunakan google.script.run() dan fungsi handler terkait. Untuk mengetahui detail selengkapnya, lihat Komunikasi klien ke server.

Dialog buka file

Dialog buka file adalah dialog bawaan yang memungkinkan pengguna memilih file dari Google Drive mereka. Anda dapat menambahkan dialog buka file ke add-on tanpa perlu mendesainnya, tetapi memerlukan beberapa konfigurasi tambahan. Anda juga memerlukan akses ke project Cloud Platform add-on untuk mengaktifkan Google Picker API.

Untuk mengetahui detail selengkapnya, lihat Dialog buka file.

Sidebar adalah panel yang muncul di sebelah kanan antarmuka editor, dan merupakan jenis antarmuka add-on yang paling umum. Tidak seperti dialog, Anda dapat terus berinteraksi dengan elemen lain dari antarmuka editor saat sidebar terbuka. Sidebar memiliki lebar tetap, tetapi Anda dapat menyesuaikan kontennya.

Anda membuat sidebar add-on dengan cara yang sama seperti sidebar kustom Apps Script; prosedur umum yang direkomendasikan adalah sebagai berikut:

  1. Buat file project skrip yang menentukan struktur HTML, CSS, dan perilaku JavaScript sisi klien sidebar Anda. Saat menentukan sidebar, lihat panduan gaya add-on Editor.

  2. Di kode sisi server tempat Anda ingin sidebar terbuka, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat objek HtmlOutput yang merepresentasikan sidebar. Atau, jika Anda menggunakan HTML ber-template, Anda dapat memanggil HtmlService.createTemplateFromFile(filename) untuk membuat template, lalu HtmlTemplate.evaluate() untuk mengonversinya menjadi objek HtmlOutput.

  3. Panggil Ui.showSidebar(htmlOutput) untuk menampilkan sidebar menggunakan HtmlOutput tersebut.

Sidebar tidak menangguhkan skrip sisi server saat terbuka. JavaScript sisi klien dapat melakukan panggilan asinkron ke sisi server menggunakan google.script.run() dan fungsi handler terkait. Untuk mengetahui detail selengkapnya, lihat Komunikasi klien ke server.