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

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

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

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

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

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

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

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

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

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

"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 Chat ऐप्लिकेशन के लिए उपलब्ध है.

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

Google Workspace से आइटम पॉप्युलेट करना

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

यहां दिए गए कोड में एक ड्रॉप-डाउन मेन्यू दिखाया गया है, जिसमें Google Workspace के उपयोगकर्ताओं की जानकारी अपने-आप भर जाती है:

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "dataSourceConfigs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "minCharactersTrigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}

किसी बाहरी डेटा सोर्स से आइटम भरना

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

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

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

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

एक से ज़्यादा विकल्प चुनने वाला मेन्यू जोड़ना

यहां एक कार्ड दिखाया गया है. इसमें उपयोगकर्ता से, एक से ज़्यादा विकल्प चुनने की सुविधा देने वाले मेन्यू से संपर्क चुनने के लिए कहा गया है:

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

• Google Workspace के उपयोगकर्ता: उपयोगकर्ताओं को सिर्फ़ उसी Google Workspace संगठन में पॉप्युलेट किया जा सकता है.
• Chat स्पेस: एक से ज़्यादा आइटम चुनने की सुविधा देने वाले मेन्यू में आइटम डालने वाला उपयोगकर्ता, सिर्फ़ उन स्पेस को देख सकता है और चुन सकता है जो उसके Google Workspace संगठन से जुड़े हैं.

Google Workspace के डेटा सोर्स इस्तेमाल करने के लिए, आपको platformDataSource फ़ील्ड की वैल्यू देनी होगी. अन्य सिलेक्शन इनपुट टाइप के उलट, आपको SelectionItem ऑब्जेक्ट को शामिल नहीं करना होता है. ऐसा इसलिए, क्योंकि ये सिलेक्शन आइटम, Google Workspace से डाइनैमिक तौर पर सोर्स किए जाते हैं.

यहां दिए गए कोड में, Google Workspace के उपयोगकर्ताओं के लिए एक से ज़्यादा विकल्प चुनने वाला मेन्यू दिखाया गया है. उपयोगकर्ताओं की जानकारी भरने के लिए, सिलेक्शन इनपुट commonDataSource को USER पर सेट करता है:

{
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

यहां दिए गए कोड में, Chat स्पेस के लिए एक से ज़्यादा विकल्प चुनने की सुविधा वाला मेन्यू दिखाया गया है. स्पेस में डेटा भरने के लिए, चुने गए इनपुट में hostAppDataSource फ़ील्ड की जानकारी दी जाती है. एक से ज़्यादा विकल्प चुनने की सुविधा देने वाला मेन्यू, defaultToCurrentSpace को true पर भी सेट करता है. इससे मौजूदा स्पेस, मेन्यू में डिफ़ॉल्ट तौर पर चुना जाता है:

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

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

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

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

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

selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: FUNCTION_URL },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': FUNCTION_URL },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_suggested_contact("3")]
}

.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  .setItems(List.of(getSuggestedContact("3")))))))))));

selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "queryContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

डाइनैमिक डेटा सोर्स से सुझाए गए आइटम भरना

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

सुझाए गए आइटम दिखाने के लिए, बाहरी डेटा सोर्स से क्वेरी करने वाले फ़ंक्शन को ये काम करने होंगे:

1. इवेंट ऑब्जेक्ट को मैनेज करना. यह ऑब्जेक्ट, Chat ऐप्लिकेशन को तब मिलता है, जब उपयोगकर्ता मेन्यू में कुछ टाइप करते हैं.
2. इवेंट ऑब्जेक्ट से, उपयोगकर्ता की टाइप की गई वैल्यू पाएं. इसे event.commonEventObject.parameters["autocomplete_widget_query"] फ़ील्ड में दिखाया जाता है.
3. उपयोगकर्ता से मिले इनपुट की वैल्यू का इस्तेमाल करके, डेटा सोर्स से क्वेरी करें. इससे आपको एक या उससे ज़्यादा SelectionItems मिलेंगे, जिन्हें उपयोगकर्ता को सुझाया जा सकता है.
4. सुझाए गए आइटम दिखाने के लिए, modifyCard ऑब्जेक्ट के साथ RenderActions कार्रवाई दिखाएं.

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

/**
 * Web app that responds to events sent from a Google Chat space.
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
app.post('/', async (req, res) => {
  // Stores the Google Chat event
  const chatEvent = req.body.chat;

  // Handle user interaction with multiselect.
  if(chatEvent.widgetUpdatedPayload) {
    return res.json(queryContacts(req.body));
  }

  // Replies with a card that contains the multiselect menu.
  return res.json({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    cardsV2: [{
      cardId: "contactSelector",
      card: { sections:[{ widgets: [{
        selectionInput: {
          name: "contacts",
          type: "MULTI_SELECT",
          label: "Selected contacts",
          multiSelectMaxSelectedItems: 3,
          multiSelectMinQueryLength: 1,
          externalDataSource: { function: FUNCTION_URL },
          // Suggested items loaded by default.
          // The list is static here but it could be dynamic.
          items: [getSuggestedContact("3")]
        }
      }]}]}
    }]
  }}}}});
});

/**
 * Get contact suggestions based on text typed by users.
 *
 * @param {Object} event the event object that contains the user's query
 * @return {Object} suggestions
 */
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("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 selection item in the menu.
 */
function getSuggestedContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: The response
  """
  # Stores the Google Chat event
  chatEvent = request.get_json().get('chat')

  # Handle user interaction with multiselect.
  if chatEvent.get('widgetUpdatedPayload') is not None:
    return json.jsonify(query_contacts(request.get_json()))

  # Replies with a card that contains the multiselect menu.
  return json.jsonify({ 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': {
    'message': { 'cardsV2': [{
      'cardId': "contactSelector",
      'card': { 'sections':[{ 'widgets': [{
        'selectionInput': {
          'name': "contacts",
          'type': "MULTI_SELECT",
          'label': "Selected contacts",
          'multiSelectMaxSelectedItems': 3,
          'multiSelectMinQueryLength': 1,
          'externalDataSource': { 'function': FUNCTION_URL },
          # Suggested items loaded by default.
          # The list is static here but it could be dynamic.
          'items': [get_suggested_contact("3")]
        }
      }]}]}
    }]}
  }}}})


def query_contacts(event: dict) -> dict:
  """Get contact suggestions based on text typed by users.

  Args:
      event (Mapping[str, Any]): The event object that contains the user's query

  Returns:
      Mapping[str, Any]: The response with contact suggestions.
  """
  query = event.get("commonEventObject").get("parameters").get("autocomplete_widget_query")
  return { 'action': { 'modifyOperations': [{ 'updateWidget': { 'selectionInputWidgetSuggestions': { 'suggestions': list(
    filter(lambda e: query is None or query in e["text"], [
      # The list is static here but it could be dynamic.
      get_suggested_contact("1"), get_suggested_contact("2"), get_suggested_contact("3"), get_suggested_contact("4"), get_suggested_contact("5")
    # Only return items based on the query from the user
    ])
  )}}}]}}


def get_suggested_contact(id: str) -> dict:
  """Generate a suggested contact given an ID.

  Args:
      id (str): The ID of the contact to return.

  Returns:
      Mapping[str, Any]: The contact formatted as a selection item in the menu.
  """
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

@SpringBootApplication
@RestController
// Web app that responds to events sent from a Google Chat space.
public class App {
  private static final String FUNCTION_URL = "your-function-url";

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

  /**
   * Handle requests from Google Chat
   * 
   * @param event the event object sent by Google Chat
   * @return The response to be sent back to Google Chat
   */
  @PostMapping("/")
  @ResponseBody
  public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
    // Stores the Google Chat event
    JsonNode chatEvent = event.at("/chat");

    // Handle user interaction with multiselect.
    if (!chatEvent.at("/widgetUpdatedPayload").isEmpty()) {
      return queryContacts(event);
    }

    // Replies with a card that contains the multiselect menu.
    Message message = new Message().setCardsV2(List.of(new CardWithId()
      .setCardId("contactSelector")
      .setCard(new GoogleAppsCardV1Card()
        .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(new GoogleAppsCardV1Widget()
          .setSelectionInput(new GoogleAppsCardV1SelectionInput()
            .setName("contacts")
            .setType("MULTI_SELECT")
            .setLabel("Selected contacts")
            .setMultiSelectMaxSelectedItems(3)
            .setMultiSelectMinQueryLength(1)
            .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
            // Suggested items loaded by default.
            // The list is static here but it could be dynamic.
            .setItems(List.of(getSuggestedContact("3")))))))))));

    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("createMessageAction", new GenericJson() {{
            put("message", message);
          }});
        }});
      }});
    }};
  }

  /**
   * Get contact suggestions based on text typed by users.
   *
   * @param event the event object that contains the user's query.
   * @return The response with contact suggestions.
   */
  GenericJson queryContacts(JsonNode event) throws Exception {
    String query = event.at("/commonEventObject/parameters/autocomplete_widget_query").asText();
    List<GoogleAppsCardV1SelectionItem> suggestions = List.of(
      // The list is static here but it could be dynamic.
      getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
    // Only return items based on the query from the user
    ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList();

    return new GenericJson() {{
      put("action", new GenericJson() {{
        put("modifyOperations", List.of(new GenericJson() {{
          put("updateWidget", new GenericJson() {{
            put("selectionInputWidgetSuggestions", new GenericJson() {{
              put("suggestions", suggestions);
            }});
          }});
        }}));
      }});
    }};
  }

  /**
   * Generate a suggested contact given an ID.
   * 
   * @param id The ID of the contact to return.
   * @return The contact formatted as a selection item in the menu.
   */
  GoogleAppsCardV1SelectionItem getSuggestedContact(String id) {
    return new GoogleAppsCardV1SelectionItem()
      .setValue(id)
      .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
      .setText("Contact " + id);
  }
}

/**
* Responds to a Message trigger in Google Chat.
*
* @param {Object} event the event object from Google Chat
* @return {Object} Response from the Chat app.
*/
function onMessage(event) {
  // Replies with a card that contains the multiselect menu.
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    cardsV2: [{
      cardId: "contactSelector",
      card: { sections:[{ widgets: [{
        selectionInput: {
          name: "contacts",
          type: "MULTI_SELECT",
          label: "Selected contacts",
          multiSelectMaxSelectedItems: 3,
          multiSelectMinQueryLength: 1,
          externalDataSource: { function: "queryContacts" },
          // Suggested items loaded by default.
          // The list is static here but it could be dynamic.
          items: [getSuggestedContact("3")]
        }
      }]}]}
    }]
  }}}}};
}

/**
* Get contact suggestions based on text typed by users.
*
* @param {Object} event the event object that contains the user's query
* @return {Object} suggestions
*/
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("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 selection item in the menu.
*/
function getSuggestedContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

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

इस पेज पर, कार्ड के action और विजेट में डाले गए डेटा की पुष्टि करने का तरीका बताया गया है. उदाहरण के लिए, यह पुष्टि की जा सकती है कि टेक्स्ट इनपुट फ़ील्ड में उपयोगकर्ता ने टेक्स्ट डाला है या उसमें वर्णों की तय संख्या है.

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

कार्ड के action के हिस्से के तौर पर, उन विजेट के नाम जोड़ें जिनकी ज़रूरत किसी कार्रवाई को अपनी requiredWidgets सूची में होती है.

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

जब किसी कार्रवाई के लिए "allWidgetsAreRequired": true सेट किया जाता है, तो कार्ड में मौजूद सभी विजेट के लिए यह कार्रवाई ज़रूरी होती है.

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

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "allWidgetsAreRequired": 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 में allWidgetsAreRequired कार्रवाई सेट करें

{
  "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":{
              "allWidgetsAreRequired": 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"
          }
        }
      ]
    }
  ]
}

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

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "allWidgetsAreRequired": 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 विजेट के पुष्टि करने वाले फ़ील्ड में, टेक्स्ट इनपुट विजेट के लिए वर्ण सीमा और इनपुट टाइप तय किया जा सकता है.

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

{
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"characterLimit": 15},
            "onChangeAction":{
              "allWidgetsAreRequired": true
            }
          }
        }
      ]
    }
  ]
}

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

{
  "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": {
              "inputType": "EMAIL"
            },
            "onChangeAction": {
              "allWidgetsAreRequired": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "inputType": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "inputType": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

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

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

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

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

• ButtonList
• Button
• Color
• knownIcon
• SelectionInput
• TextInput
• DateTimePicker विजेट

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

'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")]
}

.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")))))))))));

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

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

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
  }

// 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);
}

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