इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

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

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

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

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. कोई इंटरैक्टिव 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" पैरामीटर को पास करता है.

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 फ़ील्ड तय करना होगा. चुने गए अन्य इनपुट टाइप के उलट, इसमें 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
          }
        }
      }
    }
  }
}

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

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

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

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

Node.js

node/selection-input/index.js

GitHub पर देखना

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

GitHub पर देखें

'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

GitHub पर देखना

.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

GitHub पर देखना

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

GitHub पर देखना

/**
 * 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

GitHub पर देखें

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

GitHub पर देखें

// 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

GitHub पर देखना

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

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

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

बटन जोड़ना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JSON

JSON

Node.js

Python

Java

Apps Script

Node.js

Python

Java

Apps Script

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

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

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

JSON

dateTimePicker में all_widgets_are_required ऐक्शन सेट करना

JSON

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

JSON

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

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

JSON

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

JSON

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

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

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

dateTimePicker में `all_widgets_are_required` ऐक्शन सेट करना

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