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

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

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

Chat ऐप्लिकेशन, Chat में या इसके बाहर कार्रवाइयां करने के लिए, लोगों से जानकारी का अनुरोध करते हैं. इसमें ये तरीके शामिल हैं:

  • सेटिंग कॉन्फ़िगर करें. उदाहरण के लिए, लोगों को सूचना सेटिंग को पसंद के मुताबिक बनाने की अनुमति देने या एक या उससे ज़्यादा स्पेस में Chat ऐप्लिकेशन को कॉन्फ़िगर करने और जोड़ने की अनुमति देने के लिए.
  • Google Workspace के अन्य ऐप्लिकेशन में जानकारी बनाना या अपडेट करना. उदाहरण के लिए, उपयोगकर्ताओं को Google Calendar इवेंट बनाने की अनुमति दें.
  • इससे उपयोगकर्ताओं को अन्य ऐप्लिकेशन या वेब सेवाओं में मौजूद संसाधनों को ऐक्सेस करने और उन्हें अपडेट करने की अनुमति मिलती है. उदाहरण के लिए, Chat ऐप्लिकेशन की मदद से उपयोगकर्ता, सीधे Chat स्पेस से सहायता टिकट की स्थिति अपडेट कर सकते हैं.

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

HTTP

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

Apps Script

Google Chat ऐप्लिकेशन, जो उपयोगकर्ता के इंटरैक्शन को स्वीकार करता है और उनका जवाब देता है. इसे बनाने के लिए, Apps Script क्विकस्टार्ट पूरा करें.

कार्ड का इस्तेमाल करके फ़ॉर्म बनाना

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

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

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

  • ऐसे फ़ॉर्म इनपुट विजेट जो उपयोगकर्ताओं से जानकारी मांगते हैं. आपके पास फ़ॉर्म इनपुट विजेट में पुष्टि करने की सुविधा जोड़ने का विकल्प होता है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ता जानकारी को सही तरीके से डालें और फ़ॉर्मैट करें. चैट ऐप्लिकेशन, फ़ॉर्म में जानकारी डालने के लिए इन विजेट का इस्तेमाल कर सकते हैं:

  • बटन विजेट, ताकि लोग कार्ड में डाली गई वैल्यू सबमिट कर सकें. जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तो चैट ऐप्लिकेशन मिली जानकारी को प्रोसेस कर सकता है.

यहां दिए गए उदाहरण में, कार्ड में संपर्क जानकारी इकट्ठा करने के लिए टेक्स्ट इनपुट, तारीख और समय चुनने वाले टूल, और चुनने के लिए इनपुट का इस्तेमाल किया गया है:

जानकारी इकट्ठा करने के लिए इस्तेमाल किए जा सकने वाले इंटरैक्टिव विजेट के ज़्यादा उदाहरण देखने के लिए, इंटरैक्टिव कार्ड या डायलॉग डिज़ाइन करना लेख पढ़ें.

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

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

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

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

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

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

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

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

सुझाए गए आइटम वापस करने का तरीका दिखाने वाले पूरे उदाहरण के लिए, चुने गए आइटम सुझाएं सेक्शन देखें.

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

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

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

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

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

Google Workspace के डेटा सोर्स का इस्तेमाल करने के लिए, SelectionInput विजेट में 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"
    }
  }
}

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

JSON

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

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

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

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

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

Node.js

node/chat/selection-input/index.js
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")]
}

FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.

Python

python/chat/selection-input/main.py
'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")]
}

FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.

Java

java/chat/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(FUNCTION_URL))
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  .setItems(List.of(getSuggestedContact("3")))))))))));

FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/chat/selection-input/selection-input.gs
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")]
}

सुझाए गए आइटम वापस करने का तरीका दिखाने वाले पूरे उदाहरण के लिए, चुने गए आइटम सुझाएं सेक्शन देखें.

इंटरैक्टिव विजेट से डेटा पाना

जब भी उपयोगकर्ता किसी बटन पर क्लिक करते हैं, तो Chat ऐप्लिकेशन की कार्रवाई ट्रिगर होती है. इसमें इंटरैक्शन के बारे में जानकारी होती है. इवेंट पेलोड के commonEventObject में, formInputs ऑब्जेक्ट में वे वैल्यू शामिल होती हैं जिन्हें उपयोगकर्ता ने डाला है.

ऑब्जेक्ट event.commonEventObject.formInputs.WIDGET_NAME से वैल्यू वापस पाई जा सकती हैं. यहां WIDGET_NAME, name फ़ील्ड है, जिसे आपने विजेट के लिए तय किया है. वैल्यू को विजेट के लिए, किसी खास डेटा टाइप के तौर पर दिखाया जाता है.

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

{
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

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

फ़ॉर्म इनपुट विजेट इनपुट डेटा का टाइप इवेंट ऑब्जेक्ट से इनपुट वैल्यू उदाहरण के तौर पर दी गई वैल्यू
textInput stringInputs event.commonEventObject.formInputs.contactName.stringInputs.value[0] Kai O
selectionInput stringInputs पहली या सिर्फ़ एक वैल्यू पाने के लिए, event.commonEventObject.formInputs.contactType.stringInputs.value[0] Personal
dateTimePicker जो सिर्फ़ तारीखें स्वीकार करता है. dateInput event.commonEventObject.formInputs.contactBirthdate.dateInput.msSinceEpoch. 1000425600000

Chat ऐप्लिकेशन को डेटा मिलने के बाद, इनमें से कोई भी काम किया जा सकता है:

चुने गए आइटम के बारे में सुझाव देना

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

किसी सिलेक्शन इनपुट में आइटम सुझाने और उन्हें डाइनैमिक तरीके से भरने के लिए, कार्ड पर मौजूद SelectionInput विजेट को एक ऐसे फ़ंक्शन के बारे में बताना होगा जो बाहरी डेटा सोर्स से क्वेरी करता हो. एक से ज़्यादा विकल्प चुनने वाले मेन्यू के लिए, आपको externalDataSource फ़ील्ड तय करना होता है. ड्रॉप-डाउन मेन्यू के लिए, DataSourceConfig ऑब्जेक्ट में remoteDataSource फ़ील्ड तय करें.

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

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

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

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

Node.js

node/chat/selection-input/index.js
/**
 * 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
  };
}

FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.

Python

python/chat/selection-input/main.py
@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
  }

FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.

Java

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
@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);
  }
}

FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/chat/selection-input/selection-input.gs
/**
* 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
  };
}

डेटा को किसी दूसरे कार्ड में ट्रांसफ़र करना

जब कोई व्यक्ति कार्ड की जानकारी सबमिट करता है, तो आपको इनमें से कोई भी काम करने के लिए, अतिरिक्त कार्ड वापस करने पड़ सकते हैं:

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

शुरुआती कार्ड से इनपुट किए गए डेटा को ट्रांसफ़र करने के लिए, button विजेट बनाएं. इसमें actionParameters शामिल करें. इसमें विजेट का name और उपयोगकर्ता की ओर से डाली गई वैल्यू शामिल होती है. इसे यहां दिए गए उदाहरण में दिखाया गया है:

Node.js

node/chat/contact-form-app/index.js
{ buttonList: { buttons: [{
  text: "SUBMIT",
  onClick: { action: {
    function: FUNCTION_URL,
    parameters: [
      { key: "actionName", value: "submitDialog" },
      // Pass input values as parameters for last dialog step (submission)
      { key: "contactName", value: name },
      { key: "contactBirthdate", value: birthdate },
      { key: "contactType", value: type }
    ]
  }}
}]}}

FUNCTION_URL को उस एचटीटीपी एंडपॉइंट से बदलें जो बटन क्लिक को हैंडल करता है.

Python

python/chat/contact-form-app/main.py
{ 'buttonList': { 'buttons': [{
  'text': "SUBMIT",
  'onClick': { 'action': {
    'function': FUNCTION_URL,
    'parameters': [
      { 'key': "actionName", 'value': "submitDialog" },
      # Pass input values as parameters for last dialog step (submission)
      { 'key': "contactName", 'value': name },
      { 'key': "contactBirthdate", 'value': birthdate },
      { 'key': "contactType", 'value': type }
    ]
  }}
}]}}

FUNCTION_URL को उस एचटीटीपी एंडपॉइंट से बदलें जो बटन क्लिक को हैंडल करता है.

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
  new GoogleAppsCardV1Button()
    .setText("SUBMIT")
    .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
      .setFunction(FUNCTION_URL)
      .setParameters(List.of(
        new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("submitDialog"),
        // Pass input values as parameters for last dialog step (submission)
        new GoogleAppsCardV1ActionParameter().setKey("contactName").setValue(name),
        new GoogleAppsCardV1ActionParameter().setKey("contactBirthdate").setValue(birthdate),
        new GoogleAppsCardV1ActionParameter().setKey("contactType").setValue(type))))))))))));

FUNCTION_URL को उस एचटीटीपी एंडपॉइंट से बदलें जो बटन क्लिक को हैंडल करता है.

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/chat/contact-form-app/Code.gs
{ buttonList: { buttons: [{
  text: "SUBMIT",
  onClick: { action: {
    function: "submitDialog",
    // Pass input values as parameters for last dialog step (submission)
    parameters: [
      { key: "contactName", value: name },
      { key: "contactBirthdate", value: birthdate },
      { key: "contactType", value: type }
    ]
  }}
}]}}

जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तो आपके Chat ऐप्लिकेशन को एक इवेंट ऑब्जेक्ट मिलता है. इससे डेटा पाया जा सकता है.

फ़ॉर्म सबमिट करने वाले व्यक्ति को जवाब देना

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

यहां दिए गए उदाहरण में, Chat ऐप्लिकेशन एक टेक्स्ट मैसेज भेजता है. इससे यह पुष्टि होती है कि उसे कार्ड मैसेज से सबमिट किया गया फ़ॉर्म मिल गया है.

Node.js

node/chat/contact-form-app/index.js
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

Python

python/chat/contact-form-app/main.py
return { 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': { 'message': {
  'text': "✅ " + event.get('commonEventObject').get('parameters')["contactName"] + " has been added to your contacts."
}}}}}

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
return new GenericJson() {{
  put("hostAppDataAction", new GenericJson() {{
    put("chatDataAction", new GenericJson() {{
      put("createMessageAction", new GenericJson() {{
        put("message", new Message()
          .setText( "✅ " + event.at("/commonEventObject/parameters/contactName").asText() +
                    " has been added to your contacts."));
      }});
    }});
  }});
}};

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/chat/contact-form-app/Code.gs
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

डायलॉग को प्रोसेस करने और बंद करने के लिए, आपको एक RenderActions ऑब्जेक्ट वापस भेजना होगा. इससे यह तय होता है कि आपको पुष्टि करने वाला मैसेज भेजना है, ओरिजनल मैसेज या कार्ड को अपडेट करना है या सिर्फ़ डायलॉग को बंद करना है. इसका तरीका जानने के लिए, डायलॉग बॉक्स बंद करना लेख पढ़ें.

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

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

डायलॉग इंटरैक्शन में "ऐड-ऑन चालू करने के दौरान अनजान गड़बड़ी हुई" मैसेज दिखता है

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

इस गड़बड़ी को ठीक करने के लिए:

  • अपने एचटीटीपी एंडपॉइंट के लॉग देखें. देखें कि कहीं कोई ऐसी गड़बड़ी तो नहीं हुई है जिसे ठीक नहीं किया गया है या कोई क्रैश तो नहीं हुआ है.
  • पुष्टि करें कि आपका एंडपॉइंट, अनुरोधों का जवाब 30 सेकंड के अंदर देता हो. अगर एंडपॉइंट को चलने में 30 सेकंड से ज़्यादा समय लगता है, तो Chat जवाब को प्रोसेस नहीं कर सकता और इंटरैक्शन पूरा नहीं हो पाता. ज़्यादा जानकारी के लिए, दर की सीमाएं और सबसे सही तरीके देखें.
  • पक्का करें कि आपका एंडपॉइंट, मान्य जवाब दे रहा हो. डायलॉग सबमिट करने के लिए, एंडपॉइंट को सही JSON फ़ॉर्मैट में RenderActions ऑब्जेक्ट दिखाना होगा. अगर जवाब में बदलाव किया गया है या इसमें ज़रूरी फ़ील्ड नहीं हैं, तो हो सकता है कि डायलॉग इंटरैक्शन काम न करे.

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

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

ऐसे Chat ऐप्लिकेशन जो ऐड-ऑन नहीं हैं: कार्ड पर उपयोगकर्ताओं के डाले गए फ़ॉर्म डेटा को पढ़ सकते हैं

यहां दिया गया दस्तावेज़, Google Workspace ऐड-ऑन के अलावा अन्य Chat ऐप्लिकेशन पर लागू होता है. अगर आपको किसी ऐसे Chat ऐप्लिकेशन को माइग्रेट करना है जो ऐड-ऑन नहीं है, तो Google Chat ऐप्लिकेशन को Google Workspace ऐड-ऑन में बदलना लेख पढ़ें.

कार्ड का इस्तेमाल करके फ़ॉर्म बनाना

यहां एक ऐसे Chat ऐप्लिकेशन का उदाहरण दिया गया है जो ऐड-ऑन नहीं है. इसमें टेक्स्ट इनपुट, तारीख और समय चुनने वाला टूल, और चुनने के लिए इनपुट वाला संपर्क फ़ॉर्म इस्तेमाल किया जाता है. इसके लिए, यह कोड देखें:

Node.js

node/contact-form-app/index.js
/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

Python

python/contact-form-app/main.py
# The section of the contact card that contains the form input widgets. Used in a dialog and card message.
# To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": False
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": False
        }
      ]
    }
  }
]

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java
// The section of the contact card that contains the form input widgets. Used in a dialog and card message.
// To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
final static private List<GoogleAppsCardV1Widget> CONTACT_FORM_WIDGETS = List.of(
  new GoogleAppsCardV1Widget().setTextInput(new GoogleAppsCardV1TextInput()
    .setName("contactName")
    .setLabel("First and last name")
    .setType("SINGLE_LINE")),
  new GoogleAppsCardV1Widget().setDateTimePicker(new GoogleAppsCardV1DateTimePicker()
    .setName("contactBirthdate")
    .setLabel("Birthdate")
    .setType("DATE_ONLY")),
  new GoogleAppsCardV1Widget().setSelectionInput(new GoogleAppsCardV1SelectionInput()
    .setName("contactType")
    .setLabel("Contact type")
    .setType("RADIO_BUTTON")
    .setItems(List.of(
      new GoogleAppsCardV1SelectionItem()
        .setText("Work")
        .setValue("Work")
        .setSelected(false),
      new GoogleAppsCardV1SelectionItem()
        .setText("Personal")
        .setValue("Personal")
        .setSelected(false)))));

Apps Script

apps-script/contact-form-app/contactForm.gs
/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

इंटरैक्टिव विजेट से डेटा पाना

जब भी उपयोगकर्ता किसी बटन पर क्लिक करते हैं, तो ऐड-ऑन के तौर पर उपलब्ध नहीं कराए गए Chat ऐप्लिकेशन को इंटरैक्शन इवेंट मिलता है. यह इवेंट, बटन की जगह के हिसाब से तय होता है:

  • अगर बटन किसी मैसेज या डायलॉग में है, तो ऐड-ऑन नहीं होने वाले Chat ऐप्लिकेशन को CARD_CLICKED इंटरैक्शन इवेंट मिलता है. इसमें इंटरैक्शन के बारे में जानकारी होती है. CARD_CLICKED इंटरैक्शन इवेंट के पेलोड में, common.formInputs ऑब्जेक्ट (event.common.formInputs) होता है. इसमें उपयोगकर्ता की ओर से डाली गई वैल्यू शामिल होती हैं.

    ऑब्जेक्ट common.formInputs.WIDGET_NAME से वैल्यू वापस पाई जा सकती हैं. यहां WIDGET_NAME, name फ़ील्ड है, जिसे आपने विजेट के लिए तय किया है. वैल्यू को विजेट के लिए, किसी खास डेटा टाइप के तौर पर दिखाया जाता है. इसे Inputs ऑब्जेक्ट के तौर पर दिखाया जाता है.

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

    HTTP

    {
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

    Apps Script 

    {
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}

  • अगर बटन होम पेज पर है, तो ऐड-ऑन के तौर पर उपलब्ध नहीं कराए गए Chat ऐप्लिकेशन को SUBMIT_FORM इंटरैक्शन इवेंट मिलता है. इंटरैक्शन इवेंट के पेलोड में, commonEventObject.formInputs ऑब्जेक्ट (event.commonEventObject.formInputs) होता है. इसमें उपयोगकर्ता की ओर से डाली गई वैल्यू शामिल होती हैं.

    ऑब्जेक्ट commonEventObject.formInputs.WIDGET_NAME से वैल्यू वापस पाई जा सकती हैं. यहां WIDGET_NAME, name फ़ील्ड है, जिसे आपने विजेट के लिए तय किया है. वैल्यू को विजेट के लिए, किसी खास डेटा टाइप के तौर पर दिखाया जाता है. इसे Inputs ऑब्जेक्ट के तौर पर दिखाया जाता है.

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

    HTTP

    {
  "type": "SUBMIT_FORM",
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

    Apps Script 

    {
  "type": "SUBMIT_FORM",
  "commonEventObject": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}

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

फ़ॉर्म इनपुट विजेट इनपुट डेटा का टाइप इंटरैक्शन इवेंट से मिली इनपुट वैल्यू उदाहरण के तौर पर दी गई वैल्यू
textInput stringInputs event.common.formInputs.contactName.stringInputs.value[0] Kai O
selectionInput stringInputs पहली या सिर्फ़ एक वैल्यू पाने के लिए, event.common.formInputs.contactType.stringInputs.value[0] Personal
dateTimePicker जो सिर्फ़ तारीखें स्वीकार करता है. dateInput event.common.formInputs.contactBirthdate.dateInput.msSinceEpoch. 1000425600000

डेटा को किसी दूसरे कार्ड में ट्रांसफ़र करना

अगर आपको किसी ऐसे Chat ऐप्लिकेशन में शुरुआती कार्ड से इनपुट किया गया डेटा ट्रांसफ़र करना है जो ऐड-ऑन नहीं है, तो button विजेट बनाएं. इसके लिए, actionParameters का इस्तेमाल करें. इसमें विजेट का name और उपयोगकर्ता की ओर से डाला गया मान शामिल होता है. इसे यहां दिए गए उदाहरण में दिखाया गया है:

Node.js

node/contact-form-app/index.js
buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

Python

python/contact-form-app/main.py
'buttonList': { 'buttons': [{
  'text': "Submit",
  'onClick': { 'action': {
    'function': "submitForm",
    'parameters': [{
      'key': "contactName", 'value': name }, {
      'key': "contactBirthdate", 'value': birthdate }, {
      'key': "contactType", 'value': type
    }]
  }}
}]}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java
new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
  .setText("Submit")
  .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
    .setFunction("submitForm")
    .setParameters(List.of(
      new GoogleAppsCardV1ActionParameter().setKey("contactName").setValue(name),
      new GoogleAppsCardV1ActionParameter().setKey("contactBirthdate").setValue(birthdate),
      new GoogleAppsCardV1ActionParameter().setKey("contactType").setValue(type))))))))));

Apps Script

apps-script/contact-form-app/main.gs
buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तो ऐड-ऑन नहीं होने वाला Chat ऐप्लिकेशन, CARD_CLICKED इंटरैक्शन इवेंट पाता है. इससे आपको डेटा मिल सकता है.

फ़ॉर्म सबमिट करने वाले व्यक्ति को जवाब देना

यहां दिए गए उदाहरण में, ऐड-ऑन नहीं है. यह चैट ऐप्लिकेशन, टेक्स्ट मैसेज भेजकर पुष्टि करता है कि उसे डायलॉग या कार्ड मैसेज से सबमिट किया गया फ़ॉर्म मिल गया है:

Node.js

node/contact-form-app/index.js
const contactName = event.common.parameters["contactName"];
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
const errorMessage = "Don't forget to name your new contact!";
if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { actionStatus: {
      statusCode: "INVALID_ARGUMENT",
      userFacingMessage: errorMessage
    }}
  }};
}

Python

python/contact-form-app/main.py
contact_name = event.get('common').get('parameters')["contactName"]
# Checks to make sure the user entered a contact name.
# If no name value detected, returns an error message.
error_message = "Don't forget to name your new contact!"
if contact_name == "" and "SUBMIT_DIALOG" == event.get('dialogEventType'):
  return { 'actionResponse': {
    'type': "DIALOG",
    'dialogAction': { 'actionStatus': {
      'statusCode': "INVALID_ARGUMENT",
      'userFacingMessage': error_message
    }}
  }}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java
String contactName = event.at("/common/parameters/contactName").asText();
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
String errorMessage = "Don't forget to name your new contact!";
if (contactName.isEmpty() && event.at("/dialogEventType") != null && "SUBMIT_DIALOG".equals(event.at("/dialogEventType").asText())) {
  return new Message().setActionResponse(new ActionResponse()
    .setType("DIALOG")
    .setDialogAction(new DialogAction().setActionStatus(new ActionStatus()
      .setStatusCode("INVALID_ARGUMENT")
      .setUserFacingMessage(errorMessage))));
}

Apps Script

apps-script/contact-form-app/main.gs
const contactName = event.common.parameters["contactName"];
// Checks to make sure the user entered a contact name.
// If no name value detected, returns an error message.
const errorMessage = "Don't forget to name your new contact!";
if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { actionStatus: {
      statusCode: "INVALID_ARGUMENT",
      userFacingMessage: errorMessage
    }}
  }};
}

किसी ऐसे Chat ऐप्लिकेशन में डायलॉग को प्रोसेस करने और बंद करने के लिए जो ऐड-ऑन नहीं है, ActionResponse ऑब्जेक्ट दिखाएं. इससे यह तय किया जा सकेगा कि आपको पुष्टि करने वाला मैसेज भेजना है, ओरिजनल मैसेज या कार्ड को अपडेट करना है या सिर्फ़ डायलॉग को बंद करना है. इसका तरीका जानने के लिए, डायलॉग बॉक्स बंद करना लेख पढ़ें.