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

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

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

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

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

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

कार्ड बिल्डर खोलना

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

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

बटन जोड़ना

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

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

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

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

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

Material Design स्टाइल में बटन जोड़ना

यहां अलग-अलग Material Design बटन स्टाइल में बटन का एक सेट दिखाया गया है.

Material Design स्टाइल लागू करने के लिए, 'रंग' एट्रिब्यूट शामिल न करें.

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

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

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

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

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

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

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

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

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

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

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

चिप की सूची जोड़ना

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 फ़ील्ड तय करना होगा. चुनने के लिए दिए गए अन्य इनपुट टाइप के उलट, SelectionItem ऑब्जेक्ट को शामिल नहीं किया जाता. इसकी वजह यह है कि चुनने के लिए दिए गए ये आइटम, 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
          }
        }
      }
    }
  }
}

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

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

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

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

Node.js

node/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Python

python/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': "getContacts" },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_contact("3")]
}

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

Apps Script

apps-script/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

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

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

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

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

Node.js

node/selection-input/index.js
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py
def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

Apps Script

apps-script/selection-input/selection-input.gs
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

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

इस पेज पर, कार्ड के 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
              }
            ]
          }
        }
      ]
    }
  ]
}
dateTimePicker में 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 ऐप्लिकेशन या कार्ड से अनचाहा नतीजा मिल सकता है. उदाहरण के लिए, हो सकता है कि कार्ड का मैसेज न दिखे.

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