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 klien-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 beberapa pilihan di antarmuka add-on, gunakan dialog; jika tidak, gunakan sidebar.

Dialog

Dialog adalah panel jendela yang menempatkan konten editor utama. Dialog Apps Script bersifat modal; saat dibuka, pengguna tidak dapat berinteraksi dengan elemen lain 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. Di kode sisi server tempat Anda ingin dialog dibuka, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat objek HtmlOutput yang mewakili dialog. Atau, jika menggunakan HTML dengan 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 pengendali 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 adalah 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 mem-build 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 dibuka, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat objek HtmlOutput yang mewakili sidebar. Atau, jika menggunakan HTML dengan 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 terkait. Untuk mengetahui detail selengkapnya, lihat Komunikasi klien ke server.