Add-on berbasis kartu muncul sebagai panel di sidebar (atau, di perangkat seluler, sebagai jendela aktivitas lain yang dijangkau melalui menu). Add-on memiliki toolbar atas yang
mengidentifikasi add-on dan menampilkan kartu—pada dasarnya adalah "halaman" dari
UI add-on. Apps Script merepresentasikan 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. Ini mengidentifikasi kartu. Dialog ini memiliki teks judul, dan dapat memiliki subtitel dan ikon.
Satu atau beberapa bagian kartu. Ini adalah subdivisi area UI kartu. Bagian dapat memiliki header bagian teks secara opsional. Bagian kartu dipisahkan satu sama lain di kartu dengan garis horizontal. Jika bagian kartu sangat besar, bagian tersebut akan otomatis dirender sebagai bagian yang dapat diciutkan yang dapat diluaskan atau diciutkan oleh pengguna sesuai kebutuhan. Kartu dapat memiliki tidak lebih dari 100 bagian kartu, dan sebaiknya hanya memiliki beberapa bagian untuk performa yang lebih baik.
Setiap bagian kartu berisi satu atau beberapa widget UI. Widget memberi pengguna informasi atau kontrol interaktif. Kartu dan bagian kartu adalah widget struktural, sehingga Anda tidak dapat menambahkannya ke bagian kartu. Bagian kartu dapat memiliki tidak lebih dari 100 widget, dan harus sesederhana mungkin untuk performa terbaik.
Anda harus mendesain kartu berdasarkan 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 tempat data diambil.
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 yang diperluas akan membuat 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 perlu membuat kode fungsi header dan panah kembali. Hal ini dilakukan secara otomatis saat Anda menentukan kartu di add-on.
Saat mendesain add-on, sebaiknya batasi jumlah kartu yang Anda tampilkan sekaligus, karena kartu harus berbagi ruang layar dalam jumlah terbatas. Sebaiknya hindari kompleksitas yang tidak perlu dalam kartu.