Kartu

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Add-on berbasis kartu muncul sebagai panel di sidebar (atau, di seluler, saat jendela aktivitas lain 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 mewakili kartu dalam kode project menggunakan objek Card.

Anatomi kartu

Contoh kartu add-on

Kartu adalah sekelompok elemen UI yang Anda desain. Kartu terdiri dari bagian berikut:

  • Header kartu. Ini mengidentifikasi kartu. Judul memiliki teks judul, dan dapat memiliki subtitel dan ikon secara opsional.
  • Satu atau beberapa bagian kartu. Ini adalah subdivisi dari area UI kartu. Suatu bagian mungkin memiliki header bagian teks. Bagian kartu dipisahkan satu sama lain pada kartu berdasarkan aturan horizontal. Jika bagian kartu berukuran sangat besar, bagian tersebut akan 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 boleh 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 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

Contoh kartu add-on

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 di antara 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 mengkodekan 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 Anda tampilkan sekaligus, karena kartu harus memiliki ruang layar yang terbatas. Sebaiknya Anda juga menghindari kompleksitas kartu yang tidak perlu.