इस गाइड में बताया गया है कि Google Chat ऐप्लिकेशन, कार्ड पर आधारित इंटरफ़ेस में फ़ॉर्म इनपुट बनाकर, उपयोगकर्ताओं से जानकारी कैसे इकट्ठा और प्रोसेस कर सकते हैं.
Chat ऐप्लिकेशन, Chat में या इसके बाहर कार्रवाइयां करने के लिए, उपयोगकर्ताओं से जानकारी का अनुरोध करते हैं. इसमें ये तरीके शामिल हैं:
- सेटिंग कॉन्फ़िगर करें. उदाहरण के लिए, उपयोगकर्ताओं को सूचना सेटिंग को पसंद के मुताबिक बनाने की अनुमति देने के लिए या एक या उससे ज़्यादा स्पेस में Chat ऐप्लिकेशन को कॉन्फ़िगर करने और जोड़ने के लिए.
- Google Workspace के अन्य ऐप्लिकेशन में जानकारी बनाना या अपडेट करना. उदाहरण के लिए, उपयोगकर्ताओं को Google Calendar इवेंट बनाने की अनुमति दें.
- उपयोगकर्ताओं को अन्य ऐप्लिकेशन या वेब सेवाओं में मौजूद संसाधनों को ऐक्सेस करने और उन्हें अपडेट करने की अनुमति दें. उदाहरण के लिए, Chat ऐप्लिकेशन की मदद से उपयोगकर्ता, सहायता टिकट की स्थिति को सीधे Chat स्पेस से अपडेट कर सकते हैं.
ज़रूरी शर्तें
HTTP
Google Workspace ऐड-ऑन, जो Google Chat की सुविधाओं को बढ़ाता है. इसे बनाने के लिए, एचटीटीपी क्विकस्टार्ट पूरा करें.
Apps Script
Google Workspace ऐड-ऑन, जो Google Chat की सुविधाओं को बढ़ाता है. इसे बनाने के लिए, Apps Script की क्विकस्टार्ट गाइड पढ़ें.
कार्ड का इस्तेमाल करके फ़ॉर्म बनाना
जानकारी इकट्ठा करने के लिए, Chat ऐप्लिकेशन फ़ॉर्म और उनके इनपुट डिज़ाइन करते हैं. साथ ही, उन्हें कार्ड में बनाते हैं. उपयोगकर्ताओं को कार्ड दिखाने के लिए, Chat ऐप्लिकेशन इन Chat इंटरफ़ेस का इस्तेमाल कर सकते हैं:
- चैट मैसेज, जिनमें एक या उससे ज़्यादा कार्ड शामिल हैं.
- डायलॉग, जो ऐसे कार्ड होते हैं जो मैसेज और होम पेज से नई विंडो में खुलते हैं.
चैट ऐप्लिकेशन, इन विजेट का इस्तेमाल करके कार्ड बना सकते हैं:
फ़ॉर्म इनपुट विजेट, जो उपयोगकर्ताओं से जानकारी मांगते हैं. फ़ॉर्म इनपुट विजेट में मान्यकरण जोड़ा जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ता, जानकारी को सही तरीके से डालें और फ़ॉर्मैट करें. चैट ऐप्लिकेशन, फ़ॉर्म में जानकारी डालने के लिए इन विजेट का इस्तेमाल कर सकते हैं:
- टेक्स्ट इनपुट
(
textInput) फ़्री-फ़ॉर्म या सुझाए गए टेक्स्ट के लिए. चुने जा सकने वाले इनपुट (
selectionInput) ऐसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं जिन्हें चुना जा सकता है. जैसे, चेकबॉक्स, रेडियो बटन, और ड्रॉप-डाउन मेन्यू. चुने गए इनपुट विजेट, Google Workspace के डेटा (जैसे, Chat स्पेस) या डाइनैमिक डेटा सोर्स से आइटम भी भर सकते हैं और उनके सुझाव दे सकते हैं. ज़्यादा जानकारी के लिए, एक से ज़्यादा विकल्प चुनने वाला मेन्यू जोड़ना सेक्शन देखें.तारीख और समय की एंट्री के लिए, तारीख और समय पिकर (
dateTimePicker).
- टेक्स्ट इनपुट
(
बटन विजेट, ताकि लोग कार्ड में डाली गई वैल्यू सबमिट कर सकें. जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तब Chat ऐप्लिकेशन मिली हुई जानकारी को प्रोसेस कर सकता है.
यहां दिए गए उदाहरण में, एक कार्ड में संपर्क जानकारी इकट्ठा की जा रही है. इसके लिए, टेक्स्ट इनपुट, तारीख और समय चुनने वाला टूल, और चुनने के लिए इनपुट का इस्तेमाल किया जा रहा है:
जानकारी इकट्ठा करने के लिए इस्तेमाल किए जा सकने वाले इंटरैक्टिव विजेट के ज़्यादा उदाहरण देखने के लिए, Google Chat API के दस्तावेज़ में इंटरैक्टिव कार्ड या डायलॉग डिज़ाइन करना लेख पढ़ें.
चुने जाने के कई विकल्पों वाला मेन्यू जोड़ना
चुनने के लिए उपलब्ध आइटम को पसंद के मुताबिक बनाने या उपयोगकर्ताओं को डाइनैमिक डेटा सोर्स से आइटम चुनने की अनुमति देने के लिए, 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
FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.
Python
FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.
Java
FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.
Apps Script
इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.
सुझाए गए आइटम वापस भेजने का तरीका दिखाने वाले पूरे उदाहरण के लिए, एक से ज़्यादा आइटम चुनने का सुझाव देना सेक्शन देखें.
इंटरैक्टिव विजेट से डेटा पाना
जब भी उपयोगकर्ता किसी बटन पर क्लिक करते हैं, तो Chat ऐप्लिकेशन का ऐक्शन ट्रिगर हो जाता है. इसमें इंटरैक्शन के बारे में जानकारी होती है. इवेंट पेलोड के commonEventObject में, formInputs ऑब्जेक्ट में वे वैल्यू शामिल होती हैं जिन्हें उपयोगकर्ता ने डाला है.
ऑब्जेक्ट 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 टाइप करता है, तो आपका चैट ऐप्लिकेशन, व्यक्ति के टाइपिंग पूरी करने से पहले ही Atlanta का सुझाव दे सकता है. Chat ऐप्लिकेशन, ज़्यादा से ज़्यादा 100 आइटम के सुझाव दे सकता है.
मल्टीसिलेक्ट मेन्यू में आइटम के सुझाव देने और उन्हें डाइनैमिक तरीके से भरने के लिए, कार्ड पर मौजूद SelectionInput विजेट को ऐसा फ़ंक्शन तय करना होगा जो बाहरी डेटा सोर्स से क्वेरी करता हो. सुझाए गए आइटम दिखाने के लिए, फ़ंक्शन को ये काम करने होंगे:
- इवेंट ऑब्जेक्ट को मैनेज करें. यह ऑब्जेक्ट, Chat ऐप्लिकेशन को तब मिलता है, जब उपयोगकर्ता मेन्यू में टाइप करते हैं.
- इवेंट ऑब्जेक्ट से, उपयोगकर्ता की ओर से टाइप की गई वैल्यू पाएं. यह वैल्यू
event.commonEventObject.parameters["autocomplete_widget_query"]फ़ील्ड में दिखती है. - उपयोगकर्ता से मिली वैल्यू का इस्तेमाल करके, डेटा सोर्स से क्वेरी करें. इससे एक या उससे ज़्यादा
SelectionItemsमिलेंगे, जिन्हें उपयोगकर्ता को सुझाव के तौर पर दिखाया जा सकता है. modifyCardऑब्जेक्ट के साथ ऐक्शनRenderActionsको वापस भेजकर, सुझाए गए आइटम दिखाएं.
यहां दिए गए कोड सैंपल में बताया गया है कि Chat ऐप्लिकेशन, कार्ड पर मौजूद मल्टीसिलेक्ट मेन्यू में आइटम के सुझाव डाइनैमिक तरीके से कैसे देता है. जब कोई उपयोगकर्ता मेन्यू में टाइप करता है, तो विजेट के externalDataSource फ़ील्ड में दिया गया फ़ंक्शन या एंडपॉइंट, किसी बाहरी डेटा सोर्स से क्वेरी करता है. साथ ही, ऐसे आइटम के सुझाव देता है जिन्हें उपयोगकर्ता चुन सकता है.
Node.js
FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.
Python
FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.
Java
FUNCTION_URL की जगह, बाहरी डेटा सोर्स से क्वेरी करने वाला एचटीटीपी एंडपॉइंट डालें.
Apps Script
इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.
डेटा को किसी दूसरे कार्ड में ट्रांसफ़र करना
जब कोई उपयोगकर्ता कार्ड की जानकारी सबमिट करता है, तो आपको इनमें से कोई भी काम करने के लिए, अतिरिक्त कार्ड वापस करने पड़ सकते हैं:
- अलग-अलग सेक्शन बनाकर, उपयोगकर्ताओं को लंबे फ़ॉर्म भरने में मदद करें.
- उपयोगकर्ताओं को शुरुआती कार्ड में दी गई जानकारी की झलक देखने और उसकी पुष्टि करने की सुविधा दें, ताकि वे जवाब सबमिट करने से पहले उनकी समीक्षा कर सकें.
- फ़ॉर्म के बाकी हिस्सों में जानकारी अपने-आप भर जाती है. उदाहरण के लिए, लोगों को अपॉइंटमेंट बनाने के लिए प्रॉम्प्ट करने के लिए, कोई चैट ऐप्लिकेशन एक शुरुआती कार्ड दिखा सकता है. इसमें अपॉइंटमेंट की वजह पूछी जाती है. इसके बाद, वह एक और कार्ड दिखाता है. इसमें अपॉइंटमेंट के टाइप के आधार पर, उपलब्ध समय की जानकारी दी जाती है.
पहले कार्ड से इनपुट किए गए डेटा को ट्रांसफ़र करने के लिए, button
विजेट बनाएं. इसमें
actionParameters
विजेट का name और उपयोगकर्ता की ओर से डाली गई वैल्यू शामिल होनी चाहिए. इसे यहां दिए गए उदाहरण में दिखाया गया है:
Node.js
FUNCTION_URL को उस एचटीटीपी एंडपॉइंट से बदलें जो बटन क्लिक को हैंडल करता है.
Python
FUNCTION_URL को उस एचटीटीपी एंडपॉइंट से बदलें जो बटन क्लिक को हैंडल करता है.
Java
FUNCTION_URL को उस एचटीटीपी एंडपॉइंट से बदलें जो बटन क्लिक को हैंडल करता है.
Apps Script
इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.
जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तो आपके Chat ऐप्लिकेशन को एक इवेंट ऑब्जेक्ट मिलता है. इससे डेटा पाया जा सकता है.
फ़ॉर्म सबमिट करने वाले व्यक्ति को जवाब देना
कार्ड मैसेज या डायलॉग से डेटा मिलने के बाद, Chat ऐप्लिकेशन जवाब देता है. इसमें वह डेटा मिलने की पुष्टि करता है या गड़बड़ी की जानकारी देता है.
यहां दिए गए उदाहरण में, Chat ऐप्लिकेशन एक टेक्स्ट मैसेज भेजकर यह पुष्टि करता है कि उसे कार्ड मैसेज से सबमिट किया गया फ़ॉर्म मिल गया है.
Node.js
Python
Java
Apps Script
इस उदाहरण में, कार्ड JSON को वापस भेजकर, कार्ड मैसेज भेजा जाता है. Apps Script की कार्ड सेवा का भी इस्तेमाल किया जा सकता है.
डायलॉग को प्रोसेस करने और बंद करने के लिए, आपको एक RenderActions ऑब्जेक्ट वापस करना होगा. इससे यह तय होता है कि आपको पुष्टि करने वाला मैसेज भेजना है, ओरिजनल मैसेज या कार्ड को अपडेट करना है या सिर्फ़ डायलॉग को बंद करना है. इसका तरीका जानने के लिए, डायलॉग बॉक्स बंद करना लेख पढ़ें.
समस्या हल करें
जब कोई Google Chat ऐप्लिकेशन या कार्ड कोई गड़बड़ी दिखाता है, तो Chat इंटरफ़ेस पर एक मैसेज दिखता है. इसमें लिखा होता है कि "कोई गड़बड़ी हुई." या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat के यूज़र इंटरफ़ेस (यूआई) में कोई गड़बड़ी का मैसेज नहीं दिखता है, लेकिन Chat ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिलता है. उदाहरण के लिए, ऐसा हो सकता है कि कार्ड मैसेज न दिखे.
ऐसा हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, Chat ऐप्लिकेशन के लिए गड़बड़ी के लॉगिंग की सुविधा चालू होने पर, गड़बड़ियों को ठीक करने में आपकी मदद करने के लिए, गड़बड़ी के बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होता है. गड़बड़ियों को देखने, डीबग करने, और ठीक करने के बारे में मदद पाने के लिए, Google Chat से जुड़ी गड़बड़ियों को ठीक करना लेख पढ़ें.