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

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

चैट ऐप्लिकेशन, इन चैट इंटरफ़ेस का इस्तेमाल कर सकते हैं इंटरैक्टिव कार्ड बनाने के लिए:

• मैसेज जिनमें एक या एक से ज़्यादा कार्ड होते हैं.
• होम पेज, यह एक कार्ड है. यह सीधे तौर पर होम टैब से दिखता है Google Chat ऐप्लिकेशन का इस्तेमाल करके मैसेज भेजने के लिए किया जा सकता है.
• डायलॉग: इसमें खुलने वाले कार्ड होते हैं किसी नए विंडो में मैसेज और होम पेज से.

जब उपयोगकर्ता कार्ड से इंटरैक्ट करते हैं, तब Chat ऐप्लिकेशन उस डेटा का इस्तेमाल कर सकते हैं उन्हें इस तरह की जानकारी की प्रोसेसिंग और जवाब देने में मदद मिलती है. जानकारी के लिए, यह देखें Google Chat के उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना.

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

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

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए इंटरैक्टिव चैट ऐप्लिकेशन. इनमें से किसी एक क्विकस्टार्ट के आधार पर उसे पूरा करें का इस्तेमाल करें जिसका इस्तेमाल करना है:

• Google Cloud Functions के साथ एचटीटीपी सेवा
• Google Apps स्क्रिप् ट
• Google Cloud Dialogflow CX
• Google Cloud Pub/Sub

बटन जोड़ें

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

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

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

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

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

मटीरियल डिज़ाइन स्टाइल वाला बटन जोड़ें

नीचे दिए गए बटन, अलग-अलग मटीरियल डिज़ाइन बटन में बटन का एक सेट दिखाते हैं शैलियां.

मटीरियल डिज़ाइन स्टाइल लागू करने के लिए, 'रंग' शामिल न करें एट्रिब्यूट की वैल्यू सबमिट करें.

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

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

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

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

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

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

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

छोटे किए जा सकने वाले सेक्शन के लिए, बटन को पसंद के मुताबिक बनाएं

यह कंट्रोल बटन को अपनी पसंद के मुताबिक बनाता है, जो कार्ड. इमेज के अलग-अलग आइकॉन या इमेज में से चुनें और सेक्शन का कॉन्टेंट शामिल किया जाता है. इससे लोगों को कॉन्टेंट समझने और उसके साथ इंटरैक्ट करने में आसानी होती है जानकारी.

ओवरफ़्लो मेन्यू जोड़ें

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

चिप की सूची जोड़ें

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

उपयोगकर्ताओं से जानकारी इकट्ठा करना

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

उपयोगकर्ता जो जानकारी देते हैं उसे प्रोसेस करने का तरीका जानने के लिए, यह देखें Google Chat के उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना.

टेक्स्ट इकट्ठा करना

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

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

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

तारीखें या समय इकट्ठा करें

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

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

उपयोगकर्ताओं को आइटम चुनने की सुविधा दें

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

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

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

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

• चेकबॉक्स
• रेडियो बटन
• स्विच
• ड्रॉपडाउन मेन्यू
• कई विकल्पों वाला मेन्यू

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

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

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

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

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

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

ड्रॉप-डाउन मेन्यू जोड़ें

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

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

नीचे एक कार्ड दिखता है, जिसमें उपयोगकर्ता से संपर्क चुनने के लिए कहा जाता है कई आइटम चुनने के मेन्यू से:

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

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

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

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

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

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

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

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

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

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

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

{
  "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 फ़ंक्शन ट्रिगर होता है:

/**
 * 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
            },
          ]
        }
      }
    }
  };
}

/**
 * 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
            },
          ]
        }
      }
    }
  };
}

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

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

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

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

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

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

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

{
  "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 कार्रवाई सेट करें

{
  "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 कार्रवाई सेट करें

{
  "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 में विजेट का सत्यापन फ़ील्ड है, तो यह यह टेक्स्ट इनपुट विजेट.

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

{
  "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
            }
          }
        }
      ]
    }
  ]
}

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

{
  "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 ऐप्लिकेशन या card कोई गड़बड़ी दिखाता है, Chat के इंटरफ़ेस पर, "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat यूज़र इंटरफ़ेस (यूआई) गड़बड़ी का कोई मैसेज नहीं दिखाता है. हालांकि, Chat ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिलता है; उदाहरण के लिए, कार्ड मैसेज शायद दिखाना चाहते हैं.

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

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

• ButtonList
• Button
• Color
• knownIcon
• SelectionInput
• TextInput
• DateTimePicker विजेट