Add-on berbasis kartu muncul sebagai panel di sidebar (atau, di perangkat seluler, saat
jendela aktivitas lain dijangkau melalui menu). Add-on memiliki toolbar atas
yang mengidentifikasi add-on dan menampilkan kartu—pada dasarnya "halaman" UI
add-on. Apps Script mewakili kartu dalam kode project menggunakan
objek Card.
Anatomi kartu
Kartu adalah sekelompok elemen UI yang Anda desain. Kartu terdiri dari bagian-bagian berikut:
- Header kartu. Tindakan ini akan mengidentifikasi kartu. Class ini memiliki teks judul, dan secara opsional dapat memiliki subtitel dan ikon.
Satu atau beberapa bagian kartu. Ini adalah sub-bagian area UI kartu. Bagian mungkin secara opsional memiliki header bagian teks. Bagian kartu dipisahkan satu sama lain di kartu berdasarkan aturan horizontal. Jika berukuran sangat besar, bagian kartu secara otomatis dirender sebagai bagian yang dapat diciutkan dan dapat diluaskan atau diciutkan sesuai kebutuhan. Kartu dapat memiliki tidak lebih dari 100 bagian kartu, dan hanya memiliki sedikit bagian untuk performa yang lebih baik.
Setiap bagian kartu berisi satu atau beberapa widget UI. Widget memberikan informasi atau kontrol interaktif kepada pengguna. Kartu dan bagian kartu adalah widget struktur, sehingga Anda tidak dapat menambahkannya ke bagian kartu. Bagian kartu dapat memiliki tidak lebih dari 100 widget, dan harus sesederhana mungkin untuk mendapatkan performa terbaik.
Anda harus mendesain kartu seputar aktivitas pengguna atau set data tertentu. Misalnya, Add-on Google Workspace yang menampilkan data yang diambil dari Google Spreadsheet mungkin memiliki kartu terpisah untuk setiap sheet yang diambil datanya.
Menggunakan beberapa kartu
Add-on biasanya terdiri dari lebih dari satu kartu. Anda dapat mengonfigurasi kartu ini sebagai daftar sederhana untuk navigasi dasar dengan beberapa kartu, atau mengonfigurasi metode navigasi yang lebih kompleks untuk mengontrol cara pengguna berpindah antar-kartu.
Jika add-on menggunakan navigasi dasar, saat add-on pertama kali dibuka, aplikasi Google Workspace akan memperluas daftar header kartu dan menampilkannya kepada pengguna. Mengklik header kartu akan membuka kartu tersebut. Panah kembali juga disediakan untuk kembali ke daftar header kartu. Anda tidak harus membuat kode fungsi header dan panah kembali—ini dilakukan secara otomatis saat Anda menentukan kartu dalam add-on.
Saat mendesain add-on, sebaiknya batasi jumlah kartu yang ditampilkan sekaligus, karena kartu harus memiliki ruang layar yang terbatas. Sebaiknya hindari kompleksitas yang tidak perlu pada kartu.