Memecahkan masalah serta memperbaiki kartu dan dialog

Panduan ini menjelaskan error umum terkait kartu yang mungkin Anda alami, dan cara memperbaikinya.

Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Tampilan error kartu

Error kartu diwujudkan dalam beberapa cara:

  • Bagian kartu, seperti widget atau komponen, tidak muncul atau dirender dengan cara yang tidak diharapkan.
  • Seluruh kartu tidak akan muncul.
  • Dialog akan ditutup, tidak terbuka, atau tidak dapat dimuat.

Jika Anda mengalami perilaku seperti ini, berarti terjadi error pada kartu aplikasi Anda.

Untuk referensi: pesan dan dialog kartu yang berfungsi dan bebas error

Sebelum memeriksa contoh kartu yang keliru, pertama-tama pertimbangkan pesan dan dialog kartu yang ini. Untuk menggambarkan setiap contoh error dan perbaikannya, JSON kartu ini diubah dengan membuat error.

Pesan kartu bebas error

Berikut ini adalah pesan kartu bebas error yang berfungsi dan merinci informasi kontak yang menampilkan header, bagian, dan widget seperti teks dan tombol berdekorasi:

Dialog bebas error

Berikut adalah dialog bebas error yang berfungsi dan membuat kontak dengan mengumpulkan informasi dari pengguna, yang dilengkapi footer, dan widget yang dapat diedit seperti input dan tombol teks, serta tombol:

Error: Bagian kartu tidak muncul

Terkadang kartu dirender, tetapi bagian kartu yang ingin Anda lihat tidak muncul; kemungkinan penyebabnya adalah:

  • Bidang JSON yang diperlukan tidak ada.
  • Kolom JSON salah eja atau huruf besarnya salah.

Penyebab: Kolom JSON yang wajib diisi tidak ada

Pada error contoh ini, kolom JSON yang wajib diisi, title, tidak ada. Akibatnya, kartu dirender, tetapi bagian kartu yang diharapkan tidak muncul. Terkadang sulit untuk memprediksi bagaimana kartu dirender jika kolom yang wajib diisi dihilangkan.

Untuk memperbaiki error ini, tambahkan kolom JSON yang diperlukan; dalam contoh ini, title.

Untuk mengetahui apakah kolom JSON diperlukan atau tidak, lihat Dokumentasi referensi Kartu v2. Dalam contoh ini, lihat deskripsi kolom title di CardHeader.

Berikut ini dua contohnya:

Contoh 1: Menentukan subtitle tetapi menghilangkan title yang diperlukan akan menyebabkan seluruh header terlihat kosong:

Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, judul, tidak ada.
Gambar 1: Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, title, tidak ada.

Lihat cuplikan JSON kartu yang salah

Error: Kolom wajib diisi, title, tidak ada di header.

    . . .
    "header": {

            "subtitle": "Software Engineer"
          }
    . . .

Lihat cuplikan JSON kartu yang benar

Perbaikan: Kolom yang wajib diisi, title, adalah bagian dari spesifikasi header.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer"
          }
    . . .

Contoh 2: Menentukan subtitle, imageUrl, imageType, dan imageAltText, tetapi menghilangkan title yang diperlukan akan menyebabkan gambar dirender seperti yang diharapkan, tetapi tidak subtitel:

Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, judul, tidak ada.
Gambar 2: Header kartu ini tidak menampilkan subtitel karena kolom yang wajib diisi, title, tidak ada, tetapi gambar dirender seperti yang diharapkan.

Lihat cuplikan JSON kartu yang salah

Error: Kolom wajib diisi, title, tidak ada di header.

    . . .
    "header": {

            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

Lihat cuplikan JSON kartu yang benar

Perbaikan: Kolom yang wajib diisi, title, adalah bagian dari spesifikasi header.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

Penyebab: JSON salah ejaan atau huruf besarnya

Dalam contoh error ini, JSON kartu menyertakan semua kolom yang diperlukan, tetapi satu kolom, imageUrl tidak menggunakan huruf besar dengan benar sebagai imageURL (huruf kapital R kapital L), yang menyebabkan error: gambar yang ditunjuk tidak dirender.

Untuk memperbaiki error ini, dan lain-lain yang serupa, gunakan format JSON yang benar. Dalam hal ini, imageUrl sudah benar. Jika ragu, periksa JSON kartu dengan dokumen referensi kartu.

Header kartu ini tidak ditampilkan karena kolom yang wajib diisi, judul, tidak ada.
Gambar 3: Header kartu ini tidak menampilkan subtitel karena kolom yang wajib diisi, title, tidak ada, tetapi gambar dirender seperti yang diharapkan.

Lihat cuplikan JSON kartu yang salah

Error: Penggunaan huruf besar pada kolom imageURL salah. Seharusnya imageUrl.

    . . .
    "header": {
      "title": "Sasha",
      "subtitle": "Software Engineer",
      "imageURL":
      "https://developers.google.com/chat/images/quickstart-app-avatar.png",
      "imageType": "CIRCLE",
      "imageAltText": "Avatar for Sasha",
    }
    . . .

Lihat cuplikan JSON kartu yang benar

Diperbaiki: Kolom imageUrl menggunakan huruf besar dengan benar.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

Error: Seluruh kartu tidak muncul

Terkadang kartu tersebut tidak muncul; kemungkinan penyebabnya adalah:

Penyebab: buttonList atau cardFixedFooter tidak ditentukan dengan benar

Jika pesan kartu atau dialog menyertakan widget ButtonList atau widget CardFixedFooter yang salah ditentukan dengan tombol yang salah, seluruh kartu tidak akan ditampilkan, dan tidak ada yang muncul pada tempatnya. Spesifikasi yang salah dapat mencakup kolom yang tidak ada, kolom dengan ejaan atau huruf besar yang salah, atau JSON yang tidak terstruktur dengan baik, seperti ada koma, tanda kutip, atau tanda kurung kurawal yang hilang.

Untuk memperbaiki error ini, periksa JSON kartu pada dokumen referensi kartu. Secara khusus, bandingkan widget ButtonList apa pun dengan panduan widget ButtonList.

Contoh: Dalam panduan widget ButtonList, meneruskan tindakan onClick yang tidak lengkap di tombol pertama akan mencegah seluruh kartu dirender.

Lihat cuplikan JSON kartu yang salah

Error: Objek onClick tidak memiliki kolom yang ditentukan, sehingga seluruh kartu tidak muncul.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {


              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Lihat cuplikan JSON kartu yang benar

Diperbaiki: Objek onClick kini memiliki kolom openLink, sehingga kartu muncul seperti yang diharapkan.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {
              "openLink": {
                "url": "https://example.com/share",
              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Error: Dialog tertutup, terhenti, atau tidak terbuka

Jika dialog tertutup secara tidak terduga, gagal dimuat, atau tidak terbuka, kemungkinan penyebabnya adalah masalah pada antarmuka kartunya.

Berikut adalah alasan yang paling umum:

Penyebab: CardFixedFooter tidak memiliki primaryButton

Dalam dialog dengan widget CardFixedFooter, diperlukan primaryButton dengan teks dan warna. Menghilangkan primaryButton atau menyetelnya dengan tidak benar akan mencegah seluruh dialog muncul.

Untuk memperbaiki error ini, pastikan widget CardFixedFooter menyertakan primaryButton yang ditentukan dengan benar.

Lihat cuplikan JSON kartu yang salah

Error: Objek fixedFooter tidak memiliki kolom primaryButton yang ditetapkan, sehingga menyebabkan dialog gagal dimuat atau dibuka.

    . . .
    "fixedFooter": {

        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

Lihat cuplikan JSON kartu yang benar

Perbaikan: fixedFooter kini memiliki kolom primaryButton yang ditentukan, sehingga dialog berfungsi seperti yang diharapkan.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

Penyebab: Setelan onClick salah di FixedFooter

Dalam dialog dengan widget CardFixedFooter, yang menentukan setelan onClick pada tombol mana pun dengan tidak benar, atau menghilangkannya, menyebabkan dialog ditutup, gagal dimuat, atau tidak terbuka.

Untuk memperbaiki error ini, pastikan setiap tombol menyertakan setelan onClick yang ditentukan dengan benar.

Lihat cuplikan JSON kartu yang salah

Error: Objek primaryButton memiliki kolom onClick dengan array `parameters` yang salah eja, sehingga menyebabkan dialog gagal dimuat atau dibuka.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          "action": {
            "function": "setLanguageType",
            "parrammetters": [
              {
                "key": "languageType",
                "value": "C++"
              }
            ]
          }
        }
      },
      "secondaryButton": {
        "text": "Cancel",
        "onClick": {
          "action": {
            "function": "reset"
          }
        }
      }
    }
    . . .

Lihat cuplikan JSON kartu yang benar

Perbaikan: Objek primaryButton memiliki kolom onClick dengan array `parameters` yang dieja dengan benar, sehingga dialog berfungsi seperti yang diharapkan.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          "action": {
            "function": "setLanguageType",
            "parameters": [
              {
                "key": "languageType",
                "value": "C++"
              }
            ]
          }
        }
      },
      "secondaryButton": {
        "text": "Cancel",
        "onClick": {
          "action": {
            "function": "reset"
          }
        }
      }
    }
    . . .

Penyebab: TextInput tidak memiliki name

Jika dialog menyertakan widget TextInput yang mengecualikan kolom name, dialog tidak akan berperilaku seperti yang diharapkan. Halaman mungkin tertutup, terbuka tetapi gagal dimuat, atau tidak terbuka.

Untuk memperbaiki error ini, pastikan setiap widget TextInput menyertakan kolom name yang sesuai. Pastikan setiap kolom name di kartu unik.

Lihat cuplikan JSON kartu yang salah

Error: Objek textInput tidak memiliki kolom name yang ditetapkan, sehingga menyebabkan dialog ditutup, gagal dimuat, atau gagal dibuka.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",

      }
    }
    . . .

Lihat cuplikan JSON kartu yang benar

Perbaikan: textInput kini memiliki kolom name yang ditentukan, sehingga dialog berfungsi seperti yang diharapkan.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",
        "name": "contactName"
      }
    }
    . . .

Dialog buka, kirim, atau batalkan tindakan gagal dengan arsitektur aplikasi asinkron

Jika aplikasi Chat Anda menampilkan pesan error Could not load dialog. Invalid response returned by bot. saat menangani dialog, hal ini mungkin karena aplikasi Anda menggunakan arsitektur asinkron, seperti Cloud Pub/Sub atau metode Create Message API.

Membuka, mengirimkan, atau membatalkan dialog memerlukan respons sinkron dari aplikasi Chat dengan DialogEventType. Oleh karena itu, dialog tidak didukung oleh aplikasi yang dibuat dengan arsitektur asinkron.

Sebagai solusinya, pertimbangkan untuk menggunakan pesan kartu, bukan dialog.

Error kartu dan dialog lainnya

Jika perbaikan yang dijelaskan di halaman ini tidak menyelesaikan error terkait kartu yang dialami aplikasi Anda, kueri log error aplikasi. Membuat kueri log dapat membantu menemukan error di JSON kartu atau kode aplikasi, dan log tersebut menyertakan pesan error deskriptif untuk membantu Anda memperbaikinya.

Untuk mendapatkan bantuan dalam memperbaiki error aplikasi Google Chat, lihat Memecahkan masalah dan memperbaiki aplikasi Google Chat serta Men-debug aplikasi Chat.