इंटरैक्टिव कार्ड या डायलॉग बॉक्स डिज़ाइन करना

इस पेज में कार्ड या डायलॉग मैसेज में विजेट और यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ने का तरीका बताया गया है. इससे उपयोगकर्ता आपके Google Chat ऐप्लिकेशन से इंटरैक्ट कर सकते हैं. जैसे: किसी बटन पर क्लिक करके या जानकारी सबमिट करना.

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

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

ज़रूरी शर्तें

  • आपके पास Google Workspace खाता होना चाहिए, जिसमें Google Chat का ऐक्सेस हो.
  • पब्लिश किया गया Chat ऐप्लिकेशन. Chat ऐप्लिकेशन बनाने के लिए, इस quickstart को फ़ॉलो करें.

    • बटन जोड़ें

    ButtonList विजेट, बटन का सेट दिखाता है. बटन में टेक्स्ट, एक आइकॉन या टेक्स्ट और एक आइकॉन, दोनों दिखाए जा सकते हैं. हर Button में एक OnClick कार्रवाई होती है, जो तब होती है, जब उपयोगकर्ता बटन पर क्लिक करते हैं. उदाहरण के लिए:

    • उपयोगकर्ताओं को ज़्यादा जानकारी देने के लिए, OpenLink वाला हाइपरलिंक खोलें.
    • ऐसा action चलाएं जो कस्टम फ़ंक्शन चलाता हो. जैसे, एपीआई कॉल करना.

    सुलभता के लिए, बटन पर वैकल्पिक टेक्स्ट काम करता है.

    कस्टम फ़ंक्शन चलाने वाला बटन जोड़ें

    नीचे दिया गया कार्ड दो बटन वाला ButtonList विजेट है. एक बटन दबाने से, Google Chat डेवलपर दस्तावेज़ नए टैब में खुल जाता है. दूसरा बटन, goToView() नाम का एक कस्टम फ़ंक्शन चलाता है और viewType="BIRD EYE VIEW" पैरामीटर को पास करता है.

    पसंद के मुताबिक रंग वाला और बंद किया गया बटन जोड़ें

    "disabled": "true" सेट करके, उपयोगकर्ताओं को बटन पर क्लिक करने से रोका जा सकता है.

    नीचे एक कार्ड दिखाया गया है, जिसमें दो बटन वाला ButtonList विजेट है. एक बटन, बटन के बैकग्राउंड के रंग को पसंद के मुताबिक बनाने के लिए, Color फ़ील्ड का इस्तेमाल करता है. दूसरे बटन को Disabled फ़ील्ड की मदद से बंद किया जाता है. इस वजह से, उपयोगकर्ता उस बटन पर क्लिक नहीं कर पाता और फ़ंक्शन को एक्ज़ीक्यूट नहीं कर पाता.

    आइकॉन वाला बटन जोड़ें

    नीचे एक कार्ड दिखाया गया है, जिसमें दो आइकॉन Button विजेट वाला ButtonList विजेट है. एक बटन, knownIcon फ़ील्ड का इस्तेमाल करके, Google Chat में पहले से मौजूद ईमेल आइकॉन को दिखाता है. दूसरा बटन, कस्टम आइकॉन विजेट दिखाने के लिए, iconUrl फ़ील्ड का इस्तेमाल करता है.

    आइकॉन और टेक्स्ट वाला बटन जोड़ें

    नीचे एक कार्ड दिखाया गया है, जिसमें ButtonList विजेट है. यह उपयोगकर्ता को ईमेल भेजने के लिए कहता है. पहले बटन में ईमेल आइकॉन और दूसरे बटन में टेक्स्ट दिखता है. sendEmail फ़ंक्शन को चलाने के लिए, उपयोगकर्ता आइकॉन या टेक्स्ट बटन पर क्लिक कर सकता है.

    चुने जा सकने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ें

    SelectionInput विजेट से आपको चेकबॉक्स, रेडियो बटन, स्विच या ड्रॉप-डाउन मेन्यू जैसे चुने जा सकने वाले आइटम का एक सेट मिलता है. इस विजेट का इस्तेमाल करके, उपयोगकर्ताओं से तय और स्टैंडर्ड डेटा इकट्ठा किया जा सकता है. उपयोगकर्ताओं से तय नहीं डेटा इकट्ठा करने के लिए, TextInput विजेट का इस्तेमाल करें.

    SelectionInput विजेट में सुझावों के साथ-साथ, एक जैसा डेटा डालने और बदलाव करने पर की जाने वाली कार्रवाइयां करने में मदद मिलती है. ये कार्रवाइयां, Actions से चुनी जाती हैं. ये कार्रवाइयां, चुनने के लिए इस्तेमाल होने वाले इनपुट फ़ील्ड में बदलाव होने पर चलती हैं. जैसे, कोई आइटम चुनने या चुने हुए का निशान हटाने पर.

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

    इस सेक्शन में, SelectionInput विजेट का इस्तेमाल करने वाले कार्ड के उदाहरण दिए गए हैं. उदाहरणों में अलग-अलग तरह के सेक्शन इनपुट का इस्तेमाल किया गया है:

    चेकबॉक्स जोड़ना

    नीचे एक डायलॉग बॉक्स दिखाया गया है, जिसमें उपयोगकर्ता से यह बताने के लिए कहा जाता है कि संपर्क, पेशेवर है, निजी है या दोनों तरह का है. साथ ही, इसमें चेकबॉक्स का इस्तेमाल करने वाले SelectionInput विजेट की जानकारी दी गई है:

    रेडियो बटन जोड़ें

    स्क्रीन पर एक डायलॉग बॉक्स दिखाया गया है, जिसमें उपयोगकर्ता से पूछा जाता है कि वह संपर्क पेशेवर है या निजी है. इसके लिए रेडियो बटन का इस्तेमाल करने वाला SelectionInput विजेट मौजूद है:

    कोई स्विच जोड़ें

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

    नीचे एक डायलॉग बॉक्स दिखाया गया है, जिसमें उपयोगकर्ता से यह बताने के लिए कहा जाता है कि संपर्क, पेशेवर है या निजी है. इसके लिए, SelectionInput विजेट में एक ड्रॉप-डाउन मेन्यू का इस्तेमाल किया जाएगा:

    कई आइटम चुनने का मेन्यू जोड़ें

    नीचे एक डायलॉग बॉक्स दिखाया गया है, जिसमें उपयोगकर्ता को एक से ज़्यादा विकल्पों वाले मेन्यू से संपर्क चुनने के लिए कहा जाता है:

    एक से ज़्यादा आइटम चुनने के मेन्यू के लिए डेटा सोर्स इस्तेमाल करें

    नीचे दिए गए सेक्शन में, Google Workspace ऐप्लिकेशन या बाहरी डेटा सोर्स जैसे डाइनैमिक सोर्स से डेटा भरने के लिए, एक से ज़्यादा आइटम चुनने वाले मेन्यू के इस्तेमाल का तरीका बताया गया है.

    Google Workspace के डेटा सोर्स

    Google Workspace में, इन डेटा सोर्स से कई आइटम चुनने का मेन्यू में आइटम अपने-आप भरे जा सकते हैं:

    • Google Workspace उपयोगकर्ता: सिर्फ़ एक ही Google Workspace संगठन के उपयोगकर्ताओं का डेटा इकट्ठा किया जा सकता है.
    • चैट स्पेस: मल्टीसिलेक्ट मेन्यू में आइटम डालने पर, उपयोगकर्ता सिर्फ़ उन स्पेस को देख और चुन सकते हैं जो उनके Google Workspace संगठन से जुड़े हैं.

    Google Workspace के डेटा सोर्स इस्तेमाल करने के लिए, आपको platformDataSource फ़ील्ड की जानकारी देनी होगी. चुने गए अन्य इनपुट टाइप के उलट, इसमें SectionItem ऑब्जेक्ट को शामिल नहीं किया जाता, क्योंकि ये चुने गए आइटम Google Workspace से डाइनैमिक तौर पर लिए जाते हैं.

    नीचे दिया गया कोड, Google Workspace के उपयोगकर्ताओं के लिए, एक से ज़्यादा आइटम चुनने का मेन्यू दिखाता है. उपयोगकर्ताओं का डेटा अपने-आप भरने के लिए, चुना गया इनपुट commonDataSource को USER पर सेट करता है:

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

    नीचे दिया गया कोड, चैट स्पेस के एक से ज़्यादा विकल्पों वाला मेन्यू दिखाता है. स्पेस में जानकारी भरने के लिए, चुने गए इनपुट के हिसाब से hostAppDataSource फ़ील्ड चुना जाता है. एक से ज़्यादा आइटम चुनने का मेन्यू defaultToCurrentSpace को true पर भी सेट कर देता है, जिससे मौजूदा स्पेस को मेन्यू में डिफ़ॉल्ट विकल्प के तौर पर सेट कर दिया जाता है:

    JSON

    {
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}
    Google Workspace से बाहर के डेटा सोर्स

    एक से ज़्यादा आइटम चुनने वाले मेन्यू की मदद से, किसी तीसरे पक्ष या बाहरी डेटा सोर्स के आइटम भी अपने-आप भर सकते हैं. उदाहरण के लिए, एक से ज़्यादा आइटम चुनने वाले मेन्यू का इस्तेमाल किया जा सकता है. इससे उपयोगकर्ता को कस्टमर रिलेशनशिप मैनेजमेंट (सीआरएम) सिस्टम से बिक्री में दिलचस्पी (लीड) की सूची में से चुनने में मदद मिल सकती है.

    किसी बाहरी डेटा सोर्स का इस्तेमाल करने के लिए, externalDataSource फ़ील्ड का इस्तेमाल करके उस फ़ंक्शन के बारे में बताएं जो डेटा सोर्स से आइटम दिखाता है.

    किसी बाहरी डेटा सोर्स के लिए किए गए अनुरोधों को कम करने के लिए, सुझाए गए आइटम शामिल किए जा सकते हैं. ये आइटम, मेन्यू में टाइप करने से पहले, एक से ज़्यादा आइटम चुनने वाले मेन्यू में दिखते हैं. उदाहरण के लिए, उपयोगकर्ता के लिए हाल ही में खोजे गए संपर्कों को पॉप्युलेट किया जा सकता है. किसी बाहरी डेटा सोर्स से सुझाए गए आइटम की जानकारी अपने-आप भरने के लिए, SelectionItem ऑब्जेक्ट की जानकारी दें.

    नीचे दिया गया कोड, उपयोगकर्ता के लिए संपर्कों के बाहरी सेट में से कई आइटम को चुनने का मेन्यू दिखाता है. यह मेन्यू डिफ़ॉल्ट रूप से एक संपर्क दिखाता है. साथ ही, बाहरी डेटा सोर्स से आइटम वापस पाने और उन्हें पॉप्युलेट करने के लिए, getContacts फ़ंक्शन को चलाता है:

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 2,
    "externalDataSource": {
      "function": "getContacts"
    },
    "items": [
      {
        "text": "Contact 3",
        "value": "contact-3",
        "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
        "bottomText": "Contact three description",
        "selected": false
      }
    ]
  }
}

    बाहरी डेटा सोर्स के लिए, उन आइटम को भी अपने-आप पूरा किया जा सकता है जिन्हें उपयोगकर्ता एक से ज़्यादा आइटम चुनने के मेन्यू में टाइप करना शुरू करते हैं. उदाहरण के लिए, अगर कोई व्यक्ति ऐसे मेन्यू के लिए Atl टाइप करना शुरू करता है जिसमें अमेरिका के शहरों की जानकारी अपने-आप भर जाती है, तो आपका Chat ऐप्लिकेशन, टाइप करना पूरा करने से पहले ही Atlanta का सुझाव अपने-आप दे सकता है. ज़्यादा से ज़्यादा 100 आइटम अपने-आप पूरे किए जा सकते हैं.

    आइटम को अपने-आप पूरा करने के लिए, एक ऐसा फ़ंक्शन बनाया जाता है जो बाहरी डेटा सोर्स के बारे में क्वेरी करता है और जब भी कोई उपयोगकर्ता एक से ज़्यादा आइटम चुनने के मेन्यू में टाइप करता है, तो आइटम दिखाता है. फ़ंक्शन को ये काम करने होंगे:

    • कोई ऐसा इवेंट ऑब्जेक्ट पास करें जो मेन्यू के साथ उपयोगकर्ता इंटरैक्शन को दिखाता हो.
    • देखें कि इंटरैक्शन इवेंट की invokedFunction वैल्यू, externalDataSource फ़ील्ड के फ़ंक्शन से मेल खाती है.
    • फ़ंक्शन के मैच होने पर, बाहरी डेटा सोर्स से सुझाए गए आइटम दिखाएं. उपयोगकर्ता किस तरह का है, इसके आधार पर आइटम का सुझाव देने के लिए, autocomplete_widget_query कुंजी का मान पाएं. यह मान दिखाता है कि उपयोगकर्ता मेन्यू में क्या टाइप करता है.

    यहां दिया गया कोड, किसी बाहरी डेटा रिसॉर्स से आइटम को अपने-आप पूरा करता है. पिछले उदाहरण का इस्तेमाल करते हुए, Chat ऐप्लिकेशन getContacts फ़ंक्शन के ट्रिगर होने के पैटर्न के हिसाब से आइटम के सुझाव देता है:

    Apps Script

    apps-script/selection-input/on-widget-update.gs
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          items: [
            {
              value: "contact-1",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 1",
              bottomText: "Contact one description",
              selected: false
            },
            {
              value: "contact-2",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 2",
              bottomText: "Contact two description",
              selected: false
            },
            {
              value: "contact-3",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 3",
              bottomText: "Contact three description",
              selected: false
            },
            {
              value: "contact-4",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 4",
              bottomText: "Contact four description",
              selected: false
            },
            {
              value: "contact-5",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 5",
              bottomText: "Contact five description",
              selected: false
            },
          ]
        }
      }
    }
  };
}

    Node.js

    node/selection-input/on-widget-update.js
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          items: [
            {
              value: "contact-1",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 1",
              bottomText: "Contact one description",
              selected: false
            },
            {
              value: "contact-2",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 2",
              bottomText: "Contact two description",
              selected: false
            },
            {
              value: "contact-3",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 3",
              bottomText: "Contact three description",
              selected: false
            },
            {
              value: "contact-4",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 4",
              bottomText: "Contact four description",
              selected: false
            },
            {
              value: "contact-5",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 5",
              bottomText: "Contact five description",
              selected: false
            },
          ]
        }
      }
    }
  };
}

    वह फ़ील्ड जोड़ें जिसमें उपयोगकर्ता टेक्स्ट डाल सके

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

    जब आपको उपयोगकर्ताओं से ऐब्सट्रैक्ट या अनजान डेटा इकट्ठा करने की ज़रूरत हो, तब इस TextInput विजेट का इस्तेमाल करें. उपयोगकर्ताओं से तय किया गया डेटा इकट्ठा करने के लिए, SelectionInput विजेट का इस्तेमाल करें.

    उपयोगकर्ता जो टेक्स्ट डालते हैं उसे प्रोसेस करने के लिए, फ़ॉर्म का डेटा पाना देखें.

    नीचे दिए गए कार्ड में TextInput विजेट शामिल है:

    उपयोगकर्ता को तारीख और समय चुनने की सुविधा दें

    DateTimePicker विजेट की मदद से उपयोगकर्ता, तारीख, समय या तारीख और समय, दोनों डाल सकते हैं. इसके अलावा, उपयोगकर्ता तारीख और समय चुनने के लिए पिकर का इस्तेमाल कर सकते हैं. अगर उपयोगकर्ता गलत तारीख या समय डालते हैं, तो पिकर उन्हें एक गड़बड़ी दिखाता है. इसमें उपयोगकर्ताओं को सही जानकारी डालने के लिए कहा जाता है.

    उपयोगकर्ता ने तारीख और समय जो वैल्यू डाली हैं उन्हें प्रोसेस करने के लिए, फ़ॉर्म का डेटा पाना लेख पढ़ें.

    नीचे एक कार्ड दिखाया गया है, जिसमें तीन अलग-अलग तरह के DateTimePicker विजेट हैं:

    कार्ड में डाले गए डेटा की पुष्टि करना

    इस पेज पर, कार्ड के action और विजेट में डाले गए डेटा की पुष्टि करने का तरीका बताया गया है. उदाहरण के लिए, आपके पास यह पुष्टि करने का विकल्प है कि टेक्स्ट इनपुट फ़ील्ड में, उपयोगकर्ता का डाला गया टेक्स्ट है या उसमें तय संख्या में वर्ण हैं.

    कार्रवाइयों के लिए ज़रूरी विजेट सेट करें

    कार्ड के action के हिस्से के तौर पर, उन विजेट के नाम जोड़ें जिनकी किसी कार्रवाई की requiredWidgets सूची में ज़रूरी है.

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

    जब "all_widgets_are_required": "true" को किसी कार्रवाई के लिए सेट किया जाता है, तो इस कार्रवाई के लिए कार्ड के सभी विजेट की ज़रूरत होती है.

    एक से ज़्यादा आइटम चुनने के लिए, all_widgets_are_required कार्रवाई सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "value": "contact-1",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 1",
                "bottomText": "Contact one description",
                "selected": false
              },
              {
                "value": "contact-2",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 2",
                "bottomText": "Contact two description",
                "selected": false
              },
              {
                "value": "contact-3",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 3",
                "bottomText": "Contact three description",
                "selected": false
              },
              {
                "value": "contact-4",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 4",
                "bottomText": "Contact four description",
                "selected": false
              },
              {
                "value": "contact-5",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 5",
                "bottomText": "Contact five description",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

    तारीख समय पिकर में all_widgets_are_required कार्रवाई सेट करें

    JSON

    {
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}

    ड्रॉप-डाउन मेन्यू में, all_widgets_are_required कार्रवाई सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

    टेक्स्ट इनपुट विजेट के लिए पुष्टि सेट करें

    textInput विजेट के पुष्टि करने वाले फ़ील्ड में, इस टेक्स्ट इनपुट विजेट के लिए वर्ण सीमा और इनपुट टाइप तय किया जा सकता है.

    टेक्स्ट इनपुट विजेट के लिए वर्ण सीमा सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        }
      ]
    }
  ]
}

    टेक्स्ट इनपुट विजेट के लिए इनपुट प्रकार सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

    समस्या हल करें

    जब Google Chat ऐप्लिकेशन या कार्ड की ओर से गड़बड़ी का मैसेज मिलता है, तो Chat के इंटरफ़ेस पर "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी चैट के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का कोई मैसेज नहीं दिखता, लेकिन Chat ऐप्लिकेशन या कार्ड अचानक कोई ऐसा नतीजा देता है जिसकी उम्मीद नहीं थी. उदाहरण के लिए, हो सकता है कि कार्ड का मैसेज न दिखे.

    हालांकि, हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, चैट ऐप्लिकेशन के लिए गड़बड़ी लॉग करने की सुविधा चालू होने पर, गड़बड़ी के मैसेज और लॉग डेटा की मदद से गड़बड़ियों को ठीक किया जा सकता है. गड़बड़ियों को देखने, डीबग करने, और ठीक करने में मदद के लिए, Google Chat की गड़बड़ियों को ठीक करना और समस्या हल करना देखें.