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

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

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

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

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

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

जानकारी इकट्ठा करने के लिए, 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 पर सेट किया जाता है:

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

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

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

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

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

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

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

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

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

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

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

एक से ज़्यादा आइटम चुनने का सुझाव देना

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

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

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

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

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

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

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

/**
 * Get contact suggestions based on text typed by users.
 *
 * @param {Object} event the event object that contains the user's query
 * @return {Object} suggestions
 */
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
  // Only return items based on the query from the user.
  ].filter(e => !query || e.text.includes(query)) }}}]}};
}

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

/**
* Get contact suggestions based on text typed by users.
*
* @param {Object} event the event object that contains the user's query
* @return {Object} suggestions
*/
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
  // Only return items based on the query from the user.
  ].filter(e => !query || e.text.includes(query)) }}}]}};
}

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

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

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

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

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

{
  "buttonList": { "buttons": [{
    "text": "Submit",
    "onClick": { "action": {
      "function": "FUNCTION_URL", // Must be an `https` endpoint.
      "parameters": [
        {
          "key": "WIDGET_NAME",
          "value": "USER_INPUT_VALUE"
        },
        // Can specify multiple parameters
      ]
    }}
  }]}
}

{
  "buttonList": { "buttons": [{
    "text": "Submit",
    "onClick": { "action": {
      "function": "submitForm",
      "parameters": [
        {
          "key": "WIDGET_NAME",
          "value": "USER_INPUT_VALUE"
        },
        // Can specify multiple parameters
      ]
    }}
  }]}
}

यहां WIDGET_NAME, विजेट का name है और USER_INPUT_VALUE, उपयोगकर्ता का इनपुट है. उदाहरण के लिए, किसी व्यक्ति का नाम इकट्ठा करने वाले टेक्स्ट इनपुट के लिए, विजेट का नाम contactName है और वैल्यू का उदाहरण Kai O है.

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

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

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

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

/**
 * Google Cloud Function that handles all Google Workspace Add On events for
 * the contact manager app.
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.contactManager = function contactManager(req, res) {
  const chatEvent = req.body.chat;
  const chatMessage = chatEvent.messagePayload.message;

  // Handle message payloads in the event object
  if(chatEvent.messagePayload) {
    return res.send(handleMessage(chatMessage, chatEvent.user));
  // Handle button clicks on the card
  } else if(chatEvent.buttonClickedPayload) {
    switch(req.body.commonEventObject.parameters.actionName) {
        case "openDialog":
            return res.send(openDialog());
        case "openNextCard":
            return res.send(openNextCard(req.body));
        case "submitForm":
            return res.send(submitForm(req.body));
    }
  }
};

/**
 * Submits information from a dialog or card message.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} a message response that posts a private message.
 */
function submitForm(event) {
  const chatUser = event.chat.user;
  const contactName = event.commonEventObject.parameters["contactName"];

  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    privateMessageViewer: chatUser,
    text: "✅ " + contactName + " has been added to your contacts."
  }}}}};
}

/**
 * Sends private text message that confirms submission.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} a message response that posts a private message.
 */
function submitForm(event) {
  const chatUser = event.chat.user;
  const contactName = event.commonEventObject.parameters["contactName"];

  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    privateMessageViewer: chatUser,
    text: "✅ " + contactName + " has been added to your contacts."
  }}}}};
}

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

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

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

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