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 Google 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 menimpa konten editor utama. Dialog Apps Script bersifat 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 Apps Script dialog kustom. Prosedur umumnya adalah:

  1. Buat file project skrip yang menentukan struktur HTML, CSS, dan perilaku JavaScript sisi klien dialog Anda. Lihat pedoman gaya add-on Editor.
  2. Dalam kode sisi server tempat Anda ingin membuka dialog, panggil HtmlService.createHtmlOutputFromFile untuk membuat objek HtmlOutput yang mewakili dialog. Atau, jika Anda menggunakan HTML yang diberi template, Anda dapat memanggil HtmlService.createTemplateFromFile untuk membuat template, lalu HtmlTemplate.evaluate untuk mengonversinya menjadi objek HtmlOutput.
  3. Panggil Ui.showModalDialog 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 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 informasi 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 umumnya adalah:

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

  2. Dalam kode sisi server tempat Anda ingin membuka sidebar, panggil HtmlService.createHtmlOutputFromFile untuk membuat objek HtmlOutput yang mewakili sidebar. Atau, jika Anda menggunakan HTML yang diberi template, Anda dapat memanggil HtmlService.createTemplateFromFile untuk membuat template, lalu HtmlTemplate.evaluate untuk mengonversinya menjadi objek HtmlOutput.

    Sidebar add-on memiliki lebar tetap 300 piksel yang tidak dapat Anda ubah dengan memanggil HtmlOutput.setWidth.

  3. Panggil Ui.showSidebar untuk menampilkan sidebar menggunakan HtmlOutput.

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.