Dialog dan sidebar untuk Add-on Editor

Untuk sebagian besar Add-on Editor, jendela dialog dan panel sidebar merupakan antarmuka pengguna add-on utama. Keduanya dapat disesuaikan sepenuhnya menggunakan HTML dan CSS standar, dan Anda dapat menggunakan model komunikasi klien-server Apps Script untuk menjalankan fungsi Apps Script saat pengguna berinteraksi dengan sidebar atau dialog. Add-on 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 dalam antarmuka add-on, gunakan dialog; jika tidak, gunakan sidebar.

Dialog

Dialog adalah panel jendela yang menempatkan konten editor utama. Dialog Apps Script adalah modal; saat dibuka, pengguna tidak dapat berinteraksi dengan elemen lain dari 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, CSS, dan perilaku JavaScript sisi klien dialog Anda. 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 mewakili dialog. Atau, jika menggunakan HTML 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.

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

Dialog membuka 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 membuka 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 yang 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 pada sidebar Anda. Saat menentukan sidebar, lihat Panduan gaya Add-on Editor.
  2. Dalam kode sisi server tempat Anda ingin sidebar terbuka, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat objek HtmlOutput yang mewakili sidebar. Atau, jika menggunakan HTML 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 pengendali yang terkait. Untuk mengetahui detail selengkapnya, lihat Komunikasi klien ke server.