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:
- 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.
- Dalam kode sisi server tempat Anda ingin dialog terbuka, panggil
HtmlService.createHtmlOutputFromFile(filename)
untuk membuat objekHtmlOutput
yang mewakili dialog. Atau, jika menggunakan HTML template, Anda dapat memanggilHtmlService.createTemplateFromFile(filename)
untuk membuat template, laluHtmlTemplate.evaluate()
untuk mengonversinya menjadi objekHtmlOutput
. - Panggil
Ui.showModalDialog(htmlOutput, dialogTitle)
untuk menampilkan dialog menggunakanHtmlOutput
.
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.
Bilah sisi
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:
- 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.
Dalam kode sisi server tempat Anda ingin sidebar terbuka, panggil
HtmlService.createHtmlOutputFromFile(filename)
untuk membuat objekHtmlOutput
yang mewakili sidebar. Atau, jika menggunakan HTML template, Anda dapat memanggilHtmlService.createTemplateFromFile(filename)
untuk membuat template, laluHtmlTemplate.evaluate()
untuk mengonversinya menjadi objekHtmlOutput
.Panggil
Ui.showSidebar(htmlOutput)
untuk menampilkan sidebar menggunakanHtmlOutput
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.