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

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

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

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

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

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

HTTP

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

Apps Script

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

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

जानकारी इकट्ठा करने के लिए, 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",
            "dataSourceConfigs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "minCharactersTrigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}

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

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

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

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

JSON

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

शुरुआती कार्ड से डेटा इनपुट ट्रांसफ़र करने के लिए, 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 ऐप्लिकेशन जवाब देता है. इसके लिए, वह डेटा मिलने की पुष्टि करता है या गड़बड़ी का मैसेज दिखाता है.

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

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

ऐड-ऑन के तौर पर काम न करने वाले चैट ऐप्लिकेशन: कार्ड पर उपयोगकर्ताओं के डाले गए फ़ॉर्म डेटा को पढ़ना

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

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

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

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 ऐप्लिकेशन को इंटरैक्शन इवेंट मिलता है. यह इवेंट, बटन की जगह के हिसाब से तय होता है:

  • अगर बटन किसी मैसेज या डायलॉग में है, तो ऐड-ऑन के तौर पर काम न करने वाले चैट ऐप्लिकेशन को 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

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

किसी चैट ऐप्लिकेशन के शुरुआती कार्ड से डेटा इनपुट ट्रांसफ़र करने के लिए, 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
    }]
  }}
}]}

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

सबमिट किए गए फ़ॉर्म का जवाब देना

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

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