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

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

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

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

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

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

Card Builder का इस्तेमाल करके, 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" पैरामीटर को पास करता है.

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

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

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

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

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

यहां दिए गए कोड में, Chat spaces का एक से ज़्यादा आइटम चुनने वाला मेन्यू दिखाया गया है. स्पेस की जानकारी भरने के लिए, चुने गए इनपुट में 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 से जुड़ी गड़बड़ियों को ठीक करना लेख पढ़ें.

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

बटन जोड़ना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

स्विच जोड़ना

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

चुने जाने के कई विकल्पों वाला मेन्यू जोड़ना

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` कार्रवाई सेट करना