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 sepenuhnya dapat disesuaikan menggunakan HTML dan CSS standar, dan Anda dapat menggunakan Apps Script model komunikasi klien-server untuk menjalankan fungsi Apps Script saat pengguna berinteraksi dengan sidebar atau dialog. Add-on Anda dapat menetapkan beberapa sidebar dan dialog, tetapi add-on dapat menampilkan hanya satu per satu.

Saat Anda ingin mencegah pengguna berinteraksi dengan editor hingga mereka menentukan pilihan di antarmuka add-on, gunakan dialog; jika tidak, gunakan di bilah sisi.

Dialog

Dialog adalah panel jendela yang menempatkan konten editor utama. Apps Script dialog adalah modal; ketika 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 Apps Script dialog kustom; umum prosedur yang direkomendasikan adalah sebagai berikut:

  1. Buat file proyek skrip yang mendefinisikan struktur HTML dialog Anda, CSS, dan perilaku JavaScript sisi klien. Saat menentukan dialog, lihat ke pedoman gaya Add-on Editor.
  2. Di kode sisi server tempat Anda ingin dialog terbuka, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat HtmlOutput objek yang mewakili dialog. Atau, jika Anda menggunakan template HTML yang dapat Anda panggil HtmlService.createTemplateFromFile(filename) membuat {i>template<i} dan kemudian HtmlTemplate.evaluate() untuk mengubahnya menjadi HtmlOutput.
  3. Panggil Ui.showModalDialog(htmlOutput, dialogTitle) menampilkan dialog yang menggunakan HtmlOutput

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

Dialog pembukaan file

Dialog pembukaan file adalah dialog bawaan yang memungkinkan pengguna memilih file dari Google Drive mereka. Anda dapat menambahkan dialog file terbuka ke add-on Anda tanpa perlu merancangnya, tetapi hal itu membutuhkan beberapa konfigurasi tambahan. Anda juga memerlukan akses ke Project Cloud Platform untuk mengaktifkan Google Picker API.

Untuk mengetahui detail selengkapnya, lihat Dialog pembukaan file.

Sidebar adalah panel yang muncul di sebelah kanan antarmuka editor, dan adalah jenis antarmuka {i>add-on<i} yang paling umum. Tidak seperti dialog, Anda dapat melanjutkan untuk berinteraksi dengan elemen lain dari antarmuka editor sementara {i>sidebar<i} terbuka. Sidebar memiliki lebar yang tetap, tetapi Anda dapat menyesuaikan kontennya.

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

  1. Buat file proyek skrip yang menentukan struktur HTML bilah sisi Anda, CSS, dan perilaku JavaScript sisi klien. Saat menentukan {i>sidebar<i}, ke pedoman gaya Add-on Editor.

  2. Di kode sisi server tempat Anda ingin membuka sidebar, panggil HtmlService.createHtmlOutputFromFile(filename) untuk membuat HtmlOutput yang mewakili sidebar. Atau, jika Anda menggunakan template HTML yang dapat Anda panggil HtmlService.createTemplateFromFile(filename) membuat {i>template<i} dan kemudian HtmlTemplate.evaluate() untuk mengubahnya menjadi HtmlOutput.

  3. Panggil Ui.showSidebar(htmlOutput) menampilkan {i>sidebar <i}menggunakan HtmlOutput

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