Mendesain komponen kartu atau dialog

Halaman ini menjelaskan cara mendesain dan membuat komponen UI utama pesan kartu di Google Chat.

Kartu mendukung tata letak yang ditentukan, elemen UI interaktif, seperti tombol, dan multimedia seperti gambar. Anda dapat menggunakan kartu untuk menyajikan informasi, mengumpulkan input, atau memberikan langkah berikutnya kepada pengguna melalui pesan kartu dan dialog.

Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Kartu dan dialog umumnya memiliki komponen berikut:

  • CardHeader yang berisi judul kartu Anda.
  • Satu atau beberapa widget CardSection yang membentuk bagian utama kartu.
  • Widget CardFixedFooter khusus untuk dialog.

Prasyarat

  • Akun Google Workspace dengan akses ke Google Chat.
  • Aplikasi Chat yang dipublikasikan. Untuk mem-build aplikasi Chat, ikuti quickstart ini.

    • Menambahkan header

    Widget CardHeader merepresentasikan header kartu. Header dapat mencakup judul, subtitel, dan gambar avatar untuk kartu Anda.

    Anda dapat menyertakan CardHeader untuk pesan kartu dan dialog.

    Berikut adalah contoh CardHeader:

    Menentukan bagian kartu

    Widget CardSection adalah container level tinggi dalam kartu. Anda menggunakan bagian kartu untuk mengelompokkan widget dalam kartu. Untuk setiap bagian kartu, Anda dapat menyertakan header dan satu atau beberapa widget.

    Anda dapat menyertakan CardSection untuk pesan kartu dan dialog.

    Berikut adalah contoh CardSection yang berisi dua widget textParagraph:

    Widget CardFixedFooter mewakili footer pesan dialog yang dikirim oleh aplikasi Chat. Footer dapat menyertakan tombol utama dan tombol sekunder.

    Widget CardFixedFooter hanya tersedia untuk dialog.

    Berikut adalah contoh widget CardFixedFooter dengan dua tombol:

    Memecahkan masalah

    Saat aplikasi atau kartu Google Chat menampilkan error, antarmuka Chat akan menampilkan pesan yang menyatakan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi atau kartu Chat memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak muncul.

    Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error deskriptif dan data log tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk mendapatkan bantuan dalam melihat, men-debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.