इंटरैक्टिव डायलॉग खोलना

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

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

डायलॉग बॉक्स, विंडो वाले और कार्ड पर आधारित इंटरफ़ेस होते हैं. ये चैट स्पेस या मैसेज से खुलते हैं. डायलॉग और उसका कॉन्टेंट सिर्फ़ उस उपयोगकर्ता को दिखता है जिसने उसे खोला है.

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

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

Node.js

Google Workspace का एक ऐड-ऑन, जो Google Chat की सुविधाओं को बेहतर बनाता है. इसे बनाने के लिए, एचटीटीपी से जुड़ी शुरुआती जानकारी वाला लेख पढ़ें.

ध्यान दें: इस गाइड में दिए गए कोड सैंपल, Node.js के लिए Google Cloud फ़ंक्शन के तौर पर चलाने के लिए लिखे गए हैं.

Apps Script

Google Workspace का एक ऐड-ऑन, जो Google Chat की सुविधाओं को बेहतर बनाता है. कोई ऐप्लिकेशन बनाने के लिए, Apps Script का शुरुआती कोर्स पूरा करें.

डायलॉग बॉक्स खोलना

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

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

1. उपयोगकर्ता के इंटरैक्शन से डायलॉग बॉक्स का अनुरोध ट्रिगर करना.
2. डायलॉग बॉक्स खोलकर और उस पर वापस जाकर, अनुरोध को मैनेज करें.
3. उपयोगकर्ताओं के जानकारी सबमिट करने के बाद, डायलॉग बॉक्स को बंद करके या कोई दूसरा डायलॉग दिखाकर, सबमिट की गई जानकारी को प्रोसेस करें.

डायलॉग बॉक्स का अनुरोध ट्रिगर करना

Chat ऐप्लिकेशन, उपयोगकर्ता के इंटरैक्शन के जवाब में ही डायलॉग खोल सकता है. जैसे, स्लैश कमांड या कार्ड में मौजूद मैसेज पर बटन दबाने पर.

उपयोगकर्ताओं को डायलॉग बॉक्स के ज़रिए जवाब देने के लिए, चैट ऐप्लिकेशन को ऐसा इंटरैक्शन बनाना होगा जिससे डायलॉग बॉक्स का अनुरोध ट्रिगर हो. जैसे:

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

दूसरा इलस्ट्रेशन: चैट ऐप्लिकेशन, उपयोगकर्ताओं को /addContact स्लैश कमांड का इस्तेमाल करने के लिए कहता है.
मैसेज में एक बटन भी शामिल होता है. इस पर क्लिक करके, उपयोगकर्ता निर्देश को ट्रिगर कर सकते हैं.

यहां दिए गए JSON में, कार्ड मैसेज में बटन से डायलॉग अनुरोध को ट्रिगर करने का तरीका बताया गया है. डायलॉग बॉक्स खोलने के लिए, बटन के फ़ील्ड को OPEN_DIALOG पर सेट करें:onClick.action.interaction

{
  "buttonList": { "buttons": [{
    "text": "BUTTON_TEXT",
    "onClick": { "action": {
      "function": "ACTION_FUNCTION",
      "interaction": "OPEN_DIALOG"
    }}
  }]}
}

यहां BUTTON_TEXT वह टेक्स्ट है जो बटन में दिखता है और ACTION_FUNCTION वह फ़ंक्शन है जो शुरुआती डायलॉग खोलने के लिए चलता है.

शुरुआती डायलॉग बॉक्स खोलना

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

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

नीचे दिए गए JSON से पता चलता है कि Chat ऐप्लिकेशन, डायलॉग खोलने वाला रिस्पॉन्स कैसे दिखाता है:

{
  "action": { "navigations": [{ "pushCard": { "sections": [{ "widgets": [{
    WIDGETS,
    { "buttonList": { "buttons": [{
      "text": "BUTTON_TEXT",
      "onClick": {
        "action": { "function": "ACTION_FUNCTION" }
      }
    }]}}
  }]}]}}]}
}

BUTTON_TEXT, बटन में दिखने वाला टेक्स्ट है, जैसे कि Next या Submit. WIDGETS, एक या उससे ज़्यादा फ़ॉर्म इनपुट विजेट दिखाता है. ACTION_FUNCTION, कार्रवाई का कॉलबैक फ़ंक्शन है, जो उपयोगकर्ताओं के बटन पर क्लिक करने पर चलता है.

डायलॉग सबमिशन को मैनेज करना

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

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

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

ज़रूरी नहीं: कोई दूसरा डायलॉग दिखाना

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

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

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

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

Node.js

यह सैंपल, Google Cloud फ़ंक्शन के तौर पर चलता है.

/**
 * 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;
  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handleMessage(req.body));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    switch(req.body.commonEventObject.parameters.actionName) {
        case "openInitialDialog":
            return res.send(openInitialDialog(req.body));
        case "openConfirmationDialog":
            return res.send(openConfirmationDialog(req.body));
        case "submitDialog":
            return res.send(submitDialog(req.body));
    }
  }
};

/**
 * Responds to a message in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} response that handles dialogs.
 */
function handleMessage(event) {
  // Reply with a message that contains a button to open the initial dialog
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "To add a contact, use the `ADD CONTACT` button below.",
    accessoryWidgets: [{ buttonList: { buttons: [{
      text: "ADD CONTACT",
      onClick: { action: {
        // Use runtime environment variable set with self URL
        function: process.env.BASE_URL,
        parameters: [{ key: "actionName", value: "openInitialDialog" }],
        interaction: "OPEN_DIALOG"
      }}
    }]}}]
  }}}}};
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} open the dialog.
 */
function openInitialDialog(event) {
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    textInput: {
      name: "contactName",
      label: "First and last name",
      type: "SINGLE_LINE"
    }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: {
        // Use runtime environment variable set with self URL
        function: process.env.BASE_URL,
        parameters: [{ key: "actionName", value: "openConfirmationDialog" }]
      }}
    }]}}
  ]}]}}]}};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} update the dialog.
 */
function openConfirmationDialog(event) {
  // Retrieve the form input values
  const name = event.commonEventObject.formInputs["contactName"].stringInputs.value[0];
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    // Display the input values for confirmation
    textParagraph: { text: "<b>Name:</b> " + name }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "SUBMIT",
      onClick: { action: {
        // Use runtime environment variable set with self URL
        function: process.env.BASE_URL,
        parameters: [{
          key: "actionName", value: "submitDialog" }, {
          // Pass input values as parameters for last dialog step (submission)
          key: "contactName", value: name
        }]
      }}
    }]}}]
  }]}}]}};
}

Apps Script

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

/**
 * Responds to a message in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} response that handles dialogs.
 */
function onMessage(event) {
  // Reply with a message that contains a button to open the initial dialog
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "To add a contact, use the `ADD CONTACT` button below.",
    accessoryWidgets: [{ buttonList: { buttons: [{
      text: "ADD CONTACT",
      onClick: { action: {
        function: "openInitialDialog",
        interaction: "OPEN_DIALOG"
      }}
    }]}}]
  }}}}};
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} open the dialog.
 */
function openInitialDialog(event) {
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    textInput: {
      name: "contactName",
      label: "First and last name",
      type: "SINGLE_LINE"
    }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: { function : "openConfirmationDialog" }}
    }]}}
  ]}]}}]}};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} update the dialog.
 */
function openConfirmationDialog(event) {
  // Retrieve the form input values
  const name = event.commonEventObject.formInputs["contactName"].stringInputs.value[0];
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [{
    // Display the input values for confirmation
    textParagraph: { text: "<b>Name:</b> " + name }},
    WIDGETS, {
    buttonList: { buttons: [{
      text: "SUBMIT",
      onClick: { action: {
        function: "submitDialog",
        // Pass input values as parameters for last dialog step (submission)
        parameters: [{ key: "contactName", value: name }]
      }}
    }]}}]
  }]}}]}};
}

यहां WIDGETS, किसी भी दूसरे फ़ॉर्म इनपुट विजेट को दिखाता है.

डायलॉग बंद करें

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

• isDialogEvent true है.
• dialogEventType SUBMIT_DIALOG है.

Chat ऐप्लिकेशन को एक ऐसा RenderActions ऑब्जेक्ट दिखाना चाहिए जिसमें EndNavigation को CLOSE_DIALOG पर सेट किया गया हो.

ज़रूरी नहीं: सूचना दिखाना

डायलॉग बॉक्स बंद करने पर, टेक्स्ट सूचना भी दिखाई जा सकती है.

सूचना दिखाने के लिए, फ़ील्ड notification सेट करके RenderActions ऑब्जेक्ट दिखाएं.

यहां दिए गए उदाहरण में, यह जांच की जाती है कि पैरामीटर मान्य हैं या नहीं. साथ ही, नतीजे के आधार पर टेक्स्ट सूचना के साथ डायलॉग बॉक्स बंद किया जाता है:

Node.js

यह सैंपल, Google Cloud फ़ंक्शन के तौर पर चलता है.

/**
 * Handles submission and closes the dialog.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} close the dialog with a status in text notification.
 */
function submitDialog(event) {
  // Validate the parameters.
  if (!event.commonEventObject.parameters["contactName"]) {
    return { action: {
      navigations: [{ endNavigation: "CLOSE_DIALOG"}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { action: {
    navigations: [{ endNavigation: "CLOSE_DIALOG"}],
    notification: { text: "Success, the contact was added!" }
  }};
}

Apps Script

/**
 * Handles submission and closes the dialog.
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 * @return {Object} close the dialog with a status in text notification.
 */
function submitDialog(event) {
  // Validate the parameters.
  if (!event.commonEventObject.parameters["contactName"]) {
    return { action: {
      navigations: [{ endNavigation: "CLOSE_DIALOG"}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { action: {
    navigations: [{ endNavigation: "CLOSE_DIALOG"}],
    notification: { text: "Success, the contact was added!" }
  }};
}

डायलॉग बॉक्स के बीच पैरामीटर पास करने के बारे में ज़्यादा जानने के लिए, डेटा को किसी दूसरे कार्ड पर ट्रांसफ़र करना लेख पढ़ें.

ज़रूरी नहीं: पुष्टि करने वाला मैसेज भेजना

डायलॉग बॉक्स बंद करने के बाद, नया मैसेज भेजा जा सकता है या मौजूदा मैसेज को अपडेट किया जा सकता है.

नया मैसेज भेजने के लिए, DataActions ऑब्जेक्ट को फ़ील्ड के साथ दिखाएंCreateMessageAction, जो नए मैसेज के साथ सेट किया गया है. उदाहरण के लिए, डायलॉग बॉक्स को बंद करने और टेक्स्ट मैसेज भेजने के लिए, यह रिटर्न करें:

{ "hostAppDataAction": { "chatDataAction": { "createMessageAction": { "message": {
  "text": "Your information has been submitted."
}}}}}

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

• UpdateMessageAction: Chat ऐप्लिकेशन से भेजे गए मैसेज को अपडेट करता है. जैसे, वह मैसेज जिसमें उपयोगकर्ता ने डायलॉग बॉक्स का अनुरोध किया था.
• UpdateInlinePreviewAction: लिंक की झलक से कार्ड की जानकारी अपडेट करता है.

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

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

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