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

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

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

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

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

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

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

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 विजेट शामिल है. एक बटन, knownIcon फ़ील्ड का इस्तेमाल करके, Google Chat का बिल्ट-इन ईमेल आइकॉन दिखाता है. दूसरे बटन में 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 के डेटा सोर्स या किसी बाहरी डेटा सोर्स से, ड्रॉप-डाउन मेन्यू के लिए आइटम डाइनैमिक तौर पर भरे जा सकते हैं. डाइनैमिक डेटा सोर्स का इस्तेमाल करने के लिए, data_source_configs फ़ील्ड तय करें. यह DataSourceConfig ऑब्जेक्ट का एक कलेक्शन होता है. हर DataSourceConfig में, platformDataSource या remoteDataSource में से कोई एक हो सकता है. फ़िलहाल, सिर्फ़ एक DataSourceConfig का इस्तेमाल किया जा सकता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

यहां दिए गए कोड में, चैट स्पेस का मल्टीसिलेक्ट मेन्यू दिखाया गया है. स्पेस की जानकारी भरने के लिए, चुने गए इनपुट में 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 टाइप करना शुरू करता है, तो Chat ऐप्लिकेशन, उपयोगकर्ता के टाइपिंग पूरी करने से पहले ही Atlanta का सुझाव दे सकता है. ज़्यादा से ज़्यादा 100 आइटम के सुझाव दिए जा सकते हैं.

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

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

यहां दिए गए कोड सैंपल में बताया गया है कि Chat ऐप्लिकेशन, कार्ड पर मौजूद मल्टीसिलेक्ट मेन्यू में आइटम के सुझाव डाइनैमिक तरीके से कैसे देता है. जब कोई उपयोगकर्ता मेन्यू में टाइप करता है, तो विजेट के 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 सूची में होती है.

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

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

मल्टीसिलेक्ट में all_widgets_are_required ऐक्शन सेट करना

{
  "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 ऐक्शन सेट करना

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

{
  "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 विजेट के पुष्टि करने वाले फ़ील्ड में, इस टेक्स्ट इनपुट विजेट के लिए वर्ण सीमा और इनपुट टाइप तय किया जा सकता है.

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

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

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

{
  "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 से जुड़ी गड़बड़ियों को ठीक करना लेख पढ़ें.

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

• 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
  };
}