Add-on berbasis kartu muncul sebagai panel di sidebar (atau, di perangkat seluler, sebagai
jendela aktivitas yang dijangkau melalui menu). Add-on ini memiliki toolbar atas yang
mengidentifikasi add-on dan menampilkan kartu—pada dasarnya "halaman" dari
UI add-on ini. Apps Script mewakili kartu dalam kode proyek menggunakan
Objek Card.
Anatomi kartu
{i>Card<i} adalah sekelompok elemen UI yang Anda desain. Sebuah kartu terdiri dari bagian berikut:
- Header kartu. Nilai ini mengidentifikasi kartu. Dokumen ini berisi teks judul, dan mungkin secara opsional, memiliki sub judul dan ikon.
Satu atau beberapa bagian kartu. Ini adalah sub-divisi area UI kartu. Bagian dapat secara opsional memiliki header bagian teks. Bagian kartu dipisahkan satu sama lain pada kartu dengan garis horizontal. Jika bagian kartu sangat besar, bagian kartu tersebut akan otomatis dirender sebagai yang dapat diciutkan. yang dapat diluaskan atau diciutkan pengguna sesuai kebutuhan. Kartu dapat memiliki tidak lebih dari 100 bagian kartu, dan hanya memiliki sedikit sekali untuk performa yang lebih baik.
Setiap bagian kartu berisi satu atau beberapa UI widget. Widget menyediakan pengguna sebuah informasi atau kontrol interaktif. Bagian kartu dan kartu adalah struktural, sehingga Anda tidak dapat menambahkannya ke bagian kartu. Kartu bagian tidak boleh memiliki lebih dari 100 widget, dan harus sesederhana mungkin untuk mendapatkan performa terbaik.
Anda harus mendesain kartu berdasarkan aktivitas pengguna atau set data tertentu. Sebagai misalnya, Add-on Google Workspace yang menampilkan data yang diambil dari Google Sheets mungkin memiliki kartu terpisah untuk setiap {i>sheet<i} yang ditarik datanya.
Menggunakan beberapa kartu
Add-on biasanya terdiri dari lebih dari satu kartu. Anda dapat mengonfigurasi kartu sebagai daftar sederhana untuk navigasi dasar dengan beberapa kartu, atau konfigurasi yang lebih kompleks metode navigasi untuk mengontrol cara pengguna berpindah di antara kartu.
Jika add-on menggunakan navigasi dasar, saat add-on aplikasi add-on ini pertama kali dibuka Google Workspace, yang memperluas konstruksi daftar {i>header<i} kartu dan menampilkannya kepada pengguna. Mengklik kartu akan membuka kartu tersebut. Tanda panah kembali juga disediakan untuk kembali ke kartu daftar header. Anda tidak perlu membuat kode untuk header dan panah kembali — ini dilakukan secara otomatis saat Anda mendefinisikan kartu di {i>add-on<i}.
Saat mendesain {i>add-on<i}, sebaiknya membatasi jumlah kartu yang ditampilkan sekaligus, karena kartu harus berbagi ruang layar yang terbatas. Sebaiknya hindari kerumitan yang tidak perlu dalam kartu.