Mendesain komponen kartu atau dialog

Halaman ini menjelaskan cara mendesain dan membuat komponen UI utama untuk kartu membuat pesan 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 masukan, atau memberikan langkah selanjutnya kepada pengguna melalui pesan kartu dan dialog.

Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:

Membuka Card Builder

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 yang memiliki akses ke Google Chat.
  • Aplikasi Chat yang dipublikasikan. Untuk membangun Aplikasi Chat, ikuti ini panduan memulai.

    • Menambahkan header

    Widget CardHeader mewakili {i>header<i} sebuah kartu. {i>Header<i} dapat mencakup judul, sub judul, 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 di dalam kartu. Anda menggunakan 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 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 Google Chat atau kartu menampilkan error, Antarmuka Chat menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi Chat atau memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak akan 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 bantuan melihat, men-debug, dan memperbaiki error, melihat Memecahkan masalah dan memperbaiki error Google Chat.