Kartu

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

Contoh kartu add-on

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

  • Header kartu. Kolom ini mengidentifikasi kartu. {i>Metadata<i} memiliki teks judul, dan dapat memiliki {i>subtitle<i} dan ikon.
  • Satu atau beberapa bagian kartu. Ini adalah subbagian area UI kartu. Sebuah bagian dapat secara opsional memiliki header bagian teks. Bagian kartu dipisahkan satu sama lain pada kartu dengan garis horizontal. Jika bagian kartu sangat besar, kartu tersebut akan otomatis dirender sebagai bagian yang dapat diciutkan yang dapat diluaskan atau diciutkan pengguna sesuai kebutuhan. Kartu dapat memiliki tidak lebih dari 100 bagian kartu, dan hanya boleh memiliki beberapa bagian untuk mendapatkan 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 set data atau aktivitas pengguna 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 antarkartu.

Jika menggunakan navigasi dasar, saat add-on pertama kali dibuka aplikasi Google Workspace, add-on akan memperluas pembuatan daftar header kartu dan menampilkannya kepada pengguna. Mengklik {i>header <i}kartu akan membuka kartu itu. 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 batas jumlah kartu yang Anda tampilkan sekaligus, karena kartu harus berbagi ruang layar dalam jumlah terbatas. Sebaiknya hindari kompleksitas yang tidak perlu dalam kartu.