कार्ड और डायलॉग से जुड़ी समस्याएं हल करना और उन्हें ठीक करना

इस गाइड में, कार्ड से जुड़ी उन सामान्य गड़बड़ियों के बारे में बताया गया है जो आपके सामने आ सकती हैं. साथ ही, उन्हें कैसे ठीक करें, यह भी बताया गया है.

---

Chat ऐप्लिकेशन के लिए मैसेजिंग और यूज़र इंटरफ़ेस को डिज़ाइन करने और उनकी झलक देखने के लिए, Card Builder का इस्तेमाल करें:

कार्ड बिल्डर खोलें

---

कार्ड से जुड़ी गड़बड़ियां कैसे दिखती हैं

कार्ड से जुड़ी गड़बड़ियां कई तरह से दिख सकती हैं:

• कार्ड का कोई हिस्सा, जैसे कि विजेट या कॉम्पोनेंट नहीं दिखता या उम्मीद के मुताबिक रेंडर नहीं होता.
• पूरा कार्ड नहीं दिखता.
• डायलॉग बॉक्स बंद हो जाता है, खुलता नहीं है या लोड नहीं होता है.

अगर आपको इस तरह की समस्या आती है, तो इसका मतलब है कि आपके ऐप्लिकेशन के कार्ड में कोई गड़बड़ी है.

रेफ़रंस के लिए: काम करने वाला, बिना किसी गड़बड़ी वाला कार्ड मैसेज और डायलॉग

कार्ड के गलत उदाहरणों की जांच करने से पहले, काम कर रहे कार्ड के इस मैसेज और डायलॉग पर ध्यान दें. गड़बड़ी के हर उदाहरण और उसे ठीक करने के तरीके को दिखाने के लिए, इस कार्ड के JSON में गड़बड़ियां जोड़ी गई हैं.

कार्ड में कोई गड़बड़ी न होने पर दिखने वाला मैसेज

यहां कार्ड मैसेज का एक ऐसा उदाहरण दिया गया है जिसमें संपर्क जानकारी दी गई है. इसमें हेडर, सेक्शन, और सजाए गए टेक्स्ट और बटन जैसे विजेट शामिल हैं. यह कार्ड मैसेज सही तरीके से काम करता है और इसमें कोई गड़बड़ी नहीं है:

गड़बड़ी से मुक्त डायलॉग

यहां काम करने वाला और बिना गड़बड़ी वाला ऐसा डायलॉग दिया गया है जो उपयोगकर्ताओं से जानकारी इकट्ठा करके संपर्क बनाता है. इसमें फ़ुटर, टेक्स्ट इनपुट और स्विच जैसे बदलाव किए जा सकने वाले विजेट, और बटन शामिल हैं:

गड़बड़ी: कार्ड का कुछ हिस्सा नहीं दिखता

कभी-कभी कार्ड रेंडर हो जाते हैं, लेकिन कार्ड का वह हिस्सा नहीं दिखता जो आपको दिखना चाहिए. इसकी ये वजहें हो सकती हैं:

• ज़रूरी JSON फ़ील्ड मौजूद नहीं है.
• किसी JSON फ़ील्ड के नाम की स्पेलिंग गलत है या उसे गलत तरीके से कैपिटल किया गया है.

वजह: ज़रूरी JSON फ़ील्ड मौजूद नहीं है

इस उदाहरण में, ज़रूरी JSON फ़ील्ड title मौजूद नहीं है. इस वजह से, कार्ड रेंडर हो जाता है. हालांकि, कार्ड के वे हिस्से नहीं दिखते जो दिखने चाहिए. ज़रूरी फ़ील्ड की जानकारी शामिल न करने पर, यह अनुमान लगाना मुश्किल हो सकता है कि कार्ड कैसे रेंडर होंगे.

इस गड़बड़ी को ठीक करने के लिए, ज़रूरी JSON फ़ील्ड जोड़ें. इस उदाहरण में, title.

यह जानने के लिए कि कोई JSON फ़ील्ड ज़रूरी है या नहीं, Cards v2 का रेफ़रंस दस्तावेज़ देखें. इस उदाहरण में, CardHeader पर मौजूद title फ़ील्ड की जानकारी देखें.

यहां दो उदाहरण दिए गए हैं:

उदाहरण 1: subtitle को तय करने के बाद, ज़रूरी title को शामिल न करने पर, पूरा हेडर खाली दिखता है:

पहली इमेज: इस कार्ड का हेडर इसलिए नहीं दिख रहा है, क्योंकि ज़रूरी फ़ील्ड title मौजूद नहीं है.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: header में ज़रूरी फ़ील्ड title मौजूद नहीं है.

    . . .
    "header": {

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

कार्ड के JSON स्निपेट को सही तरीके से देखना

ठीक किया गया: ज़रूरी फ़ील्ड title, header स्पेसिफ़िकेशन का हिस्सा है.

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

दूसरा उदाहरण: subtitle, imageUrl, imageType, और imageAltText को शामिल किया गया है, लेकिन ज़रूरी title को शामिल नहीं किया गया है. इससे इमेज उम्मीद के मुताबिक रेंडर होती है, लेकिन सबटाइटल नहीं:

दूसरी इमेज: इस कार्ड के हेडर में सबटाइटल नहीं दिख रहा है, क्योंकि ज़रूरी फ़ील्ड title मौजूद नहीं है. हालांकि, इमेज उम्मीद के मुताबिक रेंडर हो रही है.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: header में ज़रूरी फ़ील्ड title मौजूद नहीं है.

    . . .
    "header": {

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

कार्ड के JSON स्निपेट को सही तरीके से देखना

ठीक किया गया: ज़रूरी फ़ील्ड title, header स्पेसिफ़िकेशन का हिस्सा है.

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

वजह: JSON में गलत स्पेलिंग या कैपिटल लेटर का इस्तेमाल किया गया है

इस उदाहरण में दी गई गड़बड़ी में, कार्ड के JSON में सभी ज़रूरी फ़ील्ड शामिल हैं. हालांकि, एक फ़ील्ड, imageUrl को गलत तरीके से imageURL (कैपिटल R कैपिटल L) के तौर पर लिखा गया है. इसकी वजह से गड़बड़ी होती है: यह जिस इमेज की ओर इशारा करता है वह रेंडर नहीं होती.

इस गड़बड़ी और इससे मिलती-जुलती अन्य गड़बड़ियों को ठीक करने के लिए, JSON फ़ॉर्मैटिंग का सही तरीके से इस्तेमाल करें. इस मामले में, imageUrl सही है. अगर आपको कोई संदेह है, तो कार्ड के रेफ़रंस दस्तावेज़ के हिसाब से, कार्ड के JSON की जांच करें.

तीसरी इमेज: इस कार्ड के हेडर में सबटाइटल नहीं दिख रहा है, क्योंकि ज़रूरी फ़ील्ड title मौजूद नहीं है. हालांकि, इमेज उम्मीद के मुताबिक रेंडर हो रही है.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: फ़ील्ड imageURL में कैपिटल लेटर का इस्तेमाल गलत तरीके से किया गया है. यह imageUrl होना चाहिए.

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

कार्ड के JSON स्निपेट को सही तरीके से देखना

ठीक कर दिया गया: imageUrl फ़ील्ड में कैपिटल लेटर का इस्तेमाल सही तरीके से किया गया है.

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

गड़बड़ी: पूरा कार्ड नहीं दिख रहा है

कभी-कभी कार्ड नहीं दिखता है. इसकी ये वजहें हो सकती हैं:

• ButtonList विजेट को गलत तरीके से तय किया गया है.
• CardFixedFooter विजेट में बटन की जानकारी गलत तरीके से दी गई है.

वजह: buttonList या cardFixedFooter एट्रिब्यूट की वैल्यू गलत तरीके से दी गई है

अगर किसी कार्ड मैसेज या डायलॉग में गलत तरीके से तय किया गया ButtonList विजेट या गलत तरीके से तय किए गए बटन वाला CardFixedFooter विजेट शामिल है, तो पूरा कार्ड नहीं दिखता. साथ ही, उसकी जगह पर कुछ भी नहीं दिखता. गलत स्पेसिफ़िकेशन में ये शामिल हो सकते हैं: फ़ील्ड मौजूद न होना, फ़ील्ड के नाम की स्पेलिंग गलत होना या कैपिटल लेटर का इस्तेमाल गलत तरीके से किया जाना या JSON का स्ट्रक्चर सही न होना. जैसे, कॉमा, कोटेशन मार्क या कर्ली ब्रेसिस मौजूद न होना.

इस गड़बड़ी को ठीक करने के लिए, कार्ड के रेफ़रंस दस्तावेज़ के हिसाब से कार्ड JSON की जांच करें. खास तौर पर, किसी भी ButtonList विजेट की तुलना ButtonList विजेट गाइड से करें.

उदाहरण: ButtonList विजेट गाइड में, पहले बटन में अधूरी onClick कार्रवाई पास करने से, पूरा कार्ड रेंडर नहीं होता.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: onClick ऑब्जेक्ट में कोई फ़ील्ड नहीं दिया गया है. इसलिए, पूरा कार्ड नहीं दिखता.

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


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

कार्ड के JSON स्निपेट की सही जानकारी देखना

ठीक किया गया: onClick ऑब्जेक्ट में अब openLink फ़ील्ड है. इसलिए, कार्ड अब उम्मीद के मुताबिक दिखता है.

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

गड़बड़ी: डायलॉग बॉक्स बंद हो जाता है, रुक जाता है या खुलता नहीं है

अगर कोई डायलॉग अचानक बंद हो जाता है, लोड नहीं होता या खुलता नहीं है, तो इसकी वजह कार्ड इंटरफ़ेस से जुड़ी कोई समस्या हो सकती है.

आम तौर पर, ऐसा इन वजहों से होता है:

• CardFixedFooter विजेट में कोई primaryButton नहीं है.
• CardFixedFooter विजेट में मौजूद किसी बटन में onClick कार्रवाई नहीं की गई है या उसकी onClick कार्रवाई गलत तरीके से तय की गई है.
• TextInput विजेट में name फ़ील्ड मौजूद नहीं है.

वजह: CardFixedFooter के पास primaryButton नहीं है

CardFixedFooter विजेट वाले डायलॉग में, टेक्स्ट और रंग, दोनों के साथ primaryButton तय करना ज़रूरी है. primaryButton को शामिल न करने या इसे गलत तरीके से सेट करने पर, पूरा डायलॉग नहीं दिखता.

इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि CardFixedFooter विजेट में primaryButton को सही तरीके से शामिल किया गया हो.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: fixedFooter ऑब्जेक्ट में primaryButton फ़ील्ड के बारे में कोई जानकारी नहीं दी गई है. इस वजह से, डायलॉग बॉक्स लोड या खोला नहीं जा सका.

    . . .
    "fixedFooter": {

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

कार्ड के JSON स्निपेट की सही जानकारी देखना

ठीक किया गया: fixedFooter में अब primaryButton फ़ील्ड तय किया गया है, इसलिए डायलॉग बॉक्स उम्मीद के मुताबिक काम करता है.

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

वजह: FixedFooter में onClick की सेटिंग गलत है

CardFixedFooter विजेट वाले डायलॉग में, किसी भी बटन पर onClick सेटिंग को गलत तरीके से सेट करने या उसे शामिल न करने की वजह से, डायलॉग बंद हो जाता है, लोड नहीं होता या खुलता नहीं है.

इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि हर बटन में onClick सेटिंग सही तरीके से दी गई हो.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: primaryButton ऑब्जेक्ट में onClick फ़ील्ड है. इसमें `parameters` ऐरे की स्पेलिंग गलत है. इस वजह से, डायलॉग लोड या नहीं खुल पा रहा है.

    . . .
    "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"
          }
        }
      }
    }
    . . .
    

कार्ड के JSON स्निपेट की सही जानकारी देखना

ठीक किया गया: primaryButton ऑब्जेक्ट में onClick फ़ील्ड है. इसमें `parameters` ऐरे की स्पेलिंग सही है. इसलिए, डायलॉग बॉक्स उम्मीद के मुताबिक काम करता है.

    . . .
    "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"
          }
        }
      }
    }
    . . .
    

वजह: TextInput के पास name नहीं है

अगर किसी डायलॉग में ऐसा TextInput विजेट शामिल है जिसमें name फ़ील्ड शामिल नहीं है, तो डायलॉग उम्मीद के मुताबिक काम नहीं करता. ऐसा हो सकता है कि ऐप्लिकेशन बंद हो जाए, खुल जाए, लेकिन लोड न हो या खुले ही नहीं.

इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि हर TextInput विजेट में सही name फ़ील्ड शामिल हो. पक्का करें कि कार्ड में मौजूद हर name फ़ील्ड यूनीक हो.

गड़बड़ी वाले कार्ड का JSON स्निपेट देखें

गड़बड़ी: textInput ऑब्जेक्ट में name फ़ील्ड के बारे में कोई जानकारी नहीं दी गई है. इस वजह से, डायलॉग बॉक्स बंद हो जाता है, लोड नहीं होता या खुलता नहीं है.

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

      }
    }
    . . .
    

कार्ड के JSON स्निपेट की सही जानकारी देखना

ठीक किया गया: textInput में अब name फ़ील्ड तय किया गया है, इसलिए डायलॉग बॉक्स उम्मीद के मुताबिक काम करता है.

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

एसिंक्रोनस ऐप्लिकेशन आर्किटेक्चर के साथ, डायलॉग बॉक्स खोलने, सबमिट करने या रद्द करने की कार्रवाइयां पूरी नहीं होती हैं

अगर डायलॉग के साथ काम करते समय, आपका Chat ऐप्लिकेशन गड़बड़ी का मैसेज Could not load dialog. Invalid response returned by bot. दिखाता है, तो ऐसा इसलिए हो सकता है, क्योंकि आपका ऐप्लिकेशन एसिंक्रोनस आर्किटेक्चर का इस्तेमाल करता है. जैसे, Cloud Pub/Sub या Create Message एपीआई तरीका.

डायलॉग खोलने, सबमिट करने या रद्द करने के लिए, Chat ऐप्लिकेशन से सिंक्रोनस जवाब पाना ज़रूरी है. इसके लिए, RenderActions ऑब्जेक्ट का इस्तेमाल किया जाता है. उदाहरण के लिए, action.navigations के साथ pushCard या endNavigation. इसलिए, एसिंक्रोनस आर्किटेक्चर का इस्तेमाल करके बनाए गए ऐप्लिकेशन, डायलॉग की सुविधा के साथ काम नहीं करते.

इसके बजाय, डायलॉग के बजाय कार्ड मैसेज का इस्तेमाल करें.

कार्ड और डायलॉग से जुड़ी अन्य गड़बड़ियां

अगर इस पेज पर बताए गए तरीकों से, आपके ऐप्लिकेशन में कार्ड से जुड़ी गड़बड़ी ठीक नहीं होती है, तो ऐप्लिकेशन के गड़बड़ी वाले लॉग देखें. लॉग की क्वेरी करने से, कार्ड के JSON या ऐप्लिकेशन कोड में मौजूद गड़बड़ियों का पता लगाया जा सकता है. साथ ही, लॉग में गड़बड़ियों के बारे में जानकारी देने वाले मैसेज शामिल होते हैं, ताकि उन्हें ठीक किया जा सके.

मिलते-जुलते विषय

Google Chat ऐप्लिकेशन से जुड़ी गड़बड़ियां ठीक करने के लिए, Google Chat ऐप्लिकेशन से जुड़ी समस्याओं को हल करना और Chat ऐप्लिकेशन डीबग करना लेख पढ़ें.

ऐसे चैट ऐप्लिकेशन जो ऐड-ऑन नहीं हैं: कार्ड और डायलॉग बॉक्स से जुड़ी समस्याओं को हल करना

यहां दिया गया दस्तावेज़, उन Chat ऐप्लिकेशन पर लागू होता है जो Google Workspace ऐड-ऑन नहीं हैं. अगर आपको किसी ऐसे Chat ऐप्लिकेशन को माइग्रेट करना है जो ऐड-ऑन नहीं है, तो Chat ऐप्लिकेशन को Google Workspace ऐड-ऑन में बदलना लेख पढ़ें.

ऐड-ऑन के तौर पर उपलब्ध नहीं कराए गए Chat ऐप्लिकेशन के लिए, डायलॉग खोलने, सबमिट करने या रद्द करने के लिए, DialogEventType के साथ सिंक्रोनस ActionResponse की ज़रूरत होती है.