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

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

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

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

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

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

Card Builder खोलें

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

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

कोई बटन जोड़ना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TextInput विजेट एक ऐसा फ़ील्ड उपलब्ध कराता है जिसमें उपयोगकर्ता टेक्स्ट डाल सकते हैं. यह विजेट, सुझावों के साथ-साथ ऑन-चेंज ऐक्शन की सुविधा देता है. सुझावों की मदद से, उपयोगकर्ता एक जैसा डेटा डाल पाते हैं. वहीं, ऑन-च101}ऐक्शन, Actions होते हैं. ये ऐक्शन, टेक्स्ट इनपुट फ़ील्ड में बदलाव होने पर चलते हैं. जैसे, उपयोगकर्ता के टेक्स्ट जोड़ने या मिटाने पर.

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

यहां एक ऐसा कार्ड दिखाया गया है जिसमें TextInput विजेट शामिल है:

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

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

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

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

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

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

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

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

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

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

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

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

कोई स्विच जोड़ना

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

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

ड्रॉप-डाउन मेन्यू में डाइनैमिक तरीके से आइटम जोड़ना

यह सुविधा, Google Chat ऐप्लिकेशन के लिए उपलब्ध है.

Google Workspace में मौजूद डेटा सोर्स या किसी बाहरी डेटा सोर्स से, ड्रॉप-डाउन मेन्यू के लिए डाइनैमिक तरीके से आइटम जोड़े जा सकते हैं. डाइनैमिक डेटा सोर्स का इस्तेमाल करने के लिए, data_source_configs फ़ील्ड तय करें. यह DataSourceConfig ऑब्जेक्ट का कलेक्शन होता है. हर DataSourceConfig में, platformDataSource या remoteDataSource में से कोई एक हो सकता है. फ़िलहाल, सिर्फ़ एक DataSourceConfig की सुविधा उपलब्ध है.

Google Workspace से आइटम जोड़ना

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

यहां दिए गए कोड में, Google Workspace के उपयोगकर्ताओं को जोड़ने वाला ड्रॉप-डाउन मेन्यू दिखाया गया है:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}
किसी बाहरी डेटा सोर्स से आइटम जोड़ना

तीसरे पक्ष या बाहरी डेटा सोर्स से आइटम जोड़ने के लिए, जैसे कि कस्टमर रिलेशनशिप मैनेजमेंट (सीआरएम) सिस्टम, DataSourceConfig में remoteDataSource फ़ील्ड का इस्तेमाल करें. इससे, ऐसा फ़ंक्शन तय किया जा सकता है जो डेटा सोर्स से आइटम दिखाता है.

यहां दिए गए कोड में, getCrmLeads फ़ंक्शन चलाकर, बाहरी संपर्कों के सेट से आइटम जोड़ने वाला ड्रॉप-डाउन मेन्यू दिखाया गया है:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

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

कोई मल्टीसेलेक्ट मेन्यू जोड़ना

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

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

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