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

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

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

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

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

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

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

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

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

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

Google Cloud Functions की मदद से एचटीटीपी सेवा
Google Apps Script
Google Cloud Dialogflow CX
Google Cloud Pub/Sub

बटन जोड़ना

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

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

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

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

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

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 फ़ील्ड की जानकारी देनी होगी. चुनने के लिए दिए गए अन्य इनपुट टाइप के उलट, 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 ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिल सकता है. उदाहरण के लिए, हो सकता है कि कार्ड का मैसेज न दिखे.

ऐसा हो सकता है कि 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` कार्रवाई सेट करना