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

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

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

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

ज़्यादा उदाहरणों के लिए, Google Chat ऐप्लिकेशन के सैंपल देखें.

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

Node.js

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

Python

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

Java

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

Apps Script

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हों. Apps Script में इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यह शुरुआती लेख पढ़ें.

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

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

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

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

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

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

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

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

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

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

Node.js

node/contact-form-app/index.js

GitHub पर देखना

buttonList: { buttons: [{
  text: "Add Contact",
  onClick: { action: {
    function: "openInitialDialog",
    interaction: "OPEN_DIALOG"
  }}
}]}

Python

python/contact-form-app/main.py

GitHub पर देखना

'buttonList': { 'buttons': [{
  'text': "Add Contact",
  'onClick': { 'action': {
    'function': "openInitialDialog",
    'interaction': "OPEN_DIALOG"
  }}
}]}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

.setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
  .setText("Add Contact")
  .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
    .setFunction("openInitialDialog")
    .setInteraction("OPEN_DIALOG"))))))));

Apps Script

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

apps-script/contact-form-app/main.gs

GitHub पर देखना

buttonList: { buttons: [{
  text: "Add Contact",
  onClick: { action: {
    function: "openInitialDialog",
    interaction: "OPEN_DIALOG"
  }}
}]}

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

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

डायलॉग बॉक्स खोलने के लिए, आपका Chat ऐप्लिकेशन, type को DIALOG पर सेट करके और Message ऑब्जेक्ट के साथ actionResponse ऑब्जेक्ट को दिखाकर, अनुरोध का जवाब दे सकता है. डायलॉग के कॉन्टेंट की जानकारी देने के लिए, ये ऑब्जेक्ट शामिल करें:

• actionResponse ऑब्जेक्ट, जिसका type DIALOG पर सेट है.
• dialogAction ऑब्जेक्ट. body फ़ील्ड में, कार्ड में दिखाए जाने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं. इनमें एक या उससे ज़्यादा विजेट sections शामिल होते हैं. उपयोगकर्ताओं से जानकारी इकट्ठा करने के लिए, फ़ॉर्म इनपुट विजेट और बटन विजेट तय किए जा सकते हैं. फ़ॉर्म इनपुट डिज़ाइन करने के बारे में ज़्यादा जानने के लिए, उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना लेख पढ़ें.

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

Node.js

node/contact-form-app/index.js

GitHub पर देखना

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

Python

python/contact-form-app/main.py

GitHub पर देखना

def open_initial_dialog() -> dict:
  """Opens the initial step of the dialog that lets users add contact details."""
  return { 'actionResponse': {
    'type': "DIALOG",
    'dialogAction': { 'dialog': { 'body': { 'sections': [{
      'header': "Add new contact",
      'widgets': CONTACT_FORM_WIDGETS + [{
        'buttonList': { 'buttons': [{
          'text': "Review and submit",
          'onClick': { 'action': { 'function': "openConfirmation" }}
        }]}
      }]
    }]}}}
  }}

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

// Opens the initial step of the dialog that lets users add contact details.
Message openInitialDialog() {
  return new Message().setActionResponse(new ActionResponse()
    .setType("DIALOG")
    .setDialogAction(new DialogAction().setDialog(new Dialog().setBody(new GoogleAppsCardV1Card()
      .setSections(List.of(new GoogleAppsCardV1Section()
        .setHeader("Add new contact")
        .setWidgets(Stream.concat(
          CONTACT_FORM_WIDGETS.stream(),
          List.of(new GoogleAppsCardV1Widget()
            .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
            .setText("Review and submit")
            .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
              .setFunction("openConfirmation"))))))).stream()).collect(Collectors.toList()))))))));
}

Apps Script

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

apps-script/contact-form-app/main.gs

GitHub पर देखना

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

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

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

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

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

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

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

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

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

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

Node.js

node/contact-form-app/index.js

GitHub पर देखना

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.common.invokedFunction === "openConfirmation") {
    return openConfirmation(event);
  // Submission dialog form page
  } else if (event.common.invokedFunction === "submitForm") {
    return submitForm(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns the second step as a dialog or card message that lets users confirm details.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} returns a dialog or private card message.
 */
function openConfirmation(event) {
  const name = fetchFormValue(event, "contactName") ?? "";
  const birthdate = fetchFormValue(event, "contactBirthdate") ?? "";
  const type = fetchFormValue(event, "contactType") ?? "";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (event.isDialogEvent) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: event.user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

Python

python/contact-form-app/main.py

GitHub पर देखना

def on_card_click(event: dict) -> dict:
  """Responds to CARD_CLICKED interaction events in Google Chat."""
  # Initial dialog form page
  if "openInitialDialog" == event.get('common').get('invokedFunction'):
    return open_initial_dialog()
  # Confirmation dialog form page
  elif "openConfirmation" == event.get('common').get('invokedFunction'):
    return open_confirmation(event)
  # Submission dialog form page
  elif "submitForm" == event.get('common').get('invokedFunction'):
    return submit_form(event)


def open_initial_dialog() -> dict:
  """Opens the initial step of the dialog that lets users add contact details."""
  return { 'actionResponse': {
    'type': "DIALOG",
    'dialogAction': { 'dialog': { 'body': { 'sections': [{
      'header': "Add new contact",
      'widgets': CONTACT_FORM_WIDGETS + [{
        'buttonList': { 'buttons': [{
          'text': "Review and submit",
          'onClick': { 'action': { 'function': "openConfirmation" }}
        }]}
      }]
    }]}}}
  }}


def open_confirmation(event: dict) -> dict:
  """Returns the second step as a dialog or card message that lets users confirm details."""
  name = fetch_form_value(event, "contactName") or ""
  birthdate = fetch_form_value(event, "contactBirthdate") or ""
  type = fetch_form_value(event, "contactType") or ""
  card_confirmation = {
    'header': "Your contact",
    'widgets': [{
      'textParagraph': { 'text': "Confirm contact information and submit:" }}, {
      'textParagraph': { 'text': "<b>Name:</b> " + name }}, {
      'textParagraph': {
        'text': "<b>Birthday:</b> " + convert_millis_to_date_string(birthdate)
      }}, {
      'textParagraph': { 'text': "<b>Type:</b> " + type }}, {
      'buttonList': { 'buttons': [{
        'text': "Submit",
        'onClick': { 'action': {
          'function': "submitForm",
          'parameters': [{
            'key': "contactName", 'value': name }, {
            'key': "contactBirthdate", 'value': birthdate }, {
            'key': "contactType", 'value': type
          }]
        }}
      }]}
    }]
  }

  # Returns a dialog with contact information that the user input.
  if event.get('isDialogEvent'): 
    return { 'action_response': {
      'type': "DIALOG",
      'dialogAction': { 'dialog': { 'body': { 'sections': [card_confirmation] }}}
    }}

  # Updates existing card message with contact information that the user input.
  return {
    'actionResponse': { 'type': "UPDATE_MESSAGE" },
    'privateMessageViewer': event.get('user'),
    'cardsV2': [{
      'card': { 'sections': [card_confirmation] }
    }]
  }

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

// Responds to CARD_CLICKED interaction events in Google Chat.
Message onCardClick(JsonNode event) {
  String invokedFunction = event.at("/common/invokedFunction").asText();
  // Initial dialog form page
  if ("openInitialDialog".equals(invokedFunction)) {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if ("openConfirmation".equals(invokedFunction)) {
    return openConfirmation(event);
  // Submission dialog form page
  } else if ("submitForm".equals(invokedFunction)) {
    return submitForm(event);
  }
  return null; 
}

// Opens the initial step of the dialog that lets users add contact details.
Message openInitialDialog() {
  return new Message().setActionResponse(new ActionResponse()
    .setType("DIALOG")
    .setDialogAction(new DialogAction().setDialog(new Dialog().setBody(new GoogleAppsCardV1Card()
      .setSections(List.of(new GoogleAppsCardV1Section()
        .setHeader("Add new contact")
        .setWidgets(Stream.concat(
          CONTACT_FORM_WIDGETS.stream(),
          List.of(new GoogleAppsCardV1Widget()
            .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
            .setText("Review and submit")
            .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
              .setFunction("openConfirmation"))))))).stream()).collect(Collectors.toList()))))))));
}

// Returns the second step as a dialog or card message that lets users confirm details.
Message openConfirmation(JsonNode event) {
  String name = fetchFormValue(event, "contactName") != null ?
    fetchFormValue(event, "contactName") : "";
  String birthdate = fetchFormValue(event, "contactBirthdate") != null ?
    fetchFormValue(event, "contactBirthdate") : "";
  String type = fetchFormValue(event, "contactType") != null ?
    fetchFormValue(event, "contactType") : "";
  GoogleAppsCardV1Section cardConfirmationSection = new GoogleAppsCardV1Section()
    .setHeader("Your contact")
    .setWidgets(List.of(
      new GoogleAppsCardV1Widget().setTextParagraph(new GoogleAppsCardV1TextParagraph()
        .setText("Confirm contact information and submit:")),
      new GoogleAppsCardV1Widget().setTextParagraph(new GoogleAppsCardV1TextParagraph()
        .setText("<b>Name:</b> " + name)),
      new GoogleAppsCardV1Widget().setTextParagraph(new GoogleAppsCardV1TextParagraph()
        .setText("<b>Birthday:</b> " + convertMillisToDateString(birthdate))),
      new GoogleAppsCardV1Widget().setTextParagraph(new GoogleAppsCardV1TextParagraph()
        .setText("<b>Type:</b> " + type)),
      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))))))))));

  // Returns a dialog with contact information that the user input.
  if (event.at("/isDialogEvent") != null && event.at("/isDialogEvent").asBoolean()) {
    return new Message().setActionResponse(new ActionResponse()
      .setType("DIALOG")
      .setDialogAction(new DialogAction().setDialog(new Dialog().setBody(new GoogleAppsCardV1Card()
        .setSections(List.of(cardConfirmationSection))))));
  }

  // Updates existing card message with contact information that the user input.
  return new Message()
    .setActionResponse(new ActionResponse()
      .setType("UPDATE_MESSAGE"))
    .setPrivateMessageViewer(new User().setName(event.at("/user/name").asText()))
    .setCardsV2(List.of(new CardWithId().setCard(new GoogleAppsCardV1Card()
      .setSections(List.of(cardConfirmationSection)))));
}

Apps Script

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

apps-script/contact-form-app/main.gs

GitHub पर देखना

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.common.invokedFunction === "openConfirmation") {
    return openConfirmation(event);
  // Submission dialog form page
  } else if (event.common.invokedFunction === "submitForm") {
    return submitForm(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns the second step as a dialog or card message that lets users confirm details.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} returns a dialog or private card message.
 */
function openConfirmation(event) {
  const name = fetchFormValue(event, "contactName") ?? "";
  const birthdate = fetchFormValue(event, "contactBirthdate") ?? "";
  const type = fetchFormValue(event, "contactType") ?? "";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (event.isDialogEvent) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: event.user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

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

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

• eventType CARD_CLICKED है.
• dialogEventType SUBMIT_DIALOG है.

Chat ऐप्लिकेशन को एक ऐसा ActionResponse ऑब्जेक्ट दिखाना चाहिए जिसका type, DIALOG और dialogAction पर सेट हो.

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

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

Chat ऐप्लिकेशन, actionStatus सेट करके ActionResponse को दिखाकर, कार्रवाई पूरी होने या गड़बड़ी की सूचना दे सकता है.

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

Node.js

node/contact-form-app/index.js

GitHub पर देखना

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.
if (!contactName) {
  const errorMessage = "Don't forget to name your new contact!";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  } else {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }
}

Python

python/contact-form-app/main.py

GitHub पर देखना

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.
if contact_name == "":
  error_message = "Don't forget to name your new contact!"
  if "SUBMIT_DIALOG" == event.get('dialogEventType'):
    return { 'actionResponse': {
      'type': "DIALOG",
      'dialogAction': { 'actionStatus': {
        'statusCode': "INVALID_ARGUMENT",
        'userFacingMessage': error_message
      }}
    }}
  else:
    return {
      'privateMessageViewer': event.get('user'),
      'text': error_message
    }

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

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.
if (contactName.isEmpty()) {
  String errorMessage = "Don't forget to name your new contact!";
  if (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))));
  } else {
    return new Message()
      .setPrivateMessageViewer(new User().setName(event.at("/user/name").asText()))
      .setText(errorMessage);
  }
}

Apps Script

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

apps-script/contact-form-app/main.gs

GitHub पर देखना

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.
if (!contactName) {
  const errorMessage = "Don't forget to name your new contact!";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  } else {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }
}

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

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

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

नया मैसेज भेजने के लिए, type को NEW_MESSAGE पर सेट करके, ActionResponse ऑब्जेक्ट दिखाएं. इस उदाहरण में, टेक्स्ट सूचना और पुष्टि करने वाले टेक्स्ट मैसेज के साथ डायलॉग बॉक्स बंद किया गया है:

Node.js

node/contact-form-app/index.js

GitHub पर देखना

// The Chat app indicates that it received form data from the dialog or card.
// Sends private text message that confirms submission.
const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
if (event.dialogEventType === "SUBMIT_DIALOG") {
  return {
    actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "OK",
        userFacingMessage: "Success " + contactName
      }}
    }
  }
} else {
  return {
    actionResponse: { type: "NEW_MESSAGE" },
    privateMessageViewer: event.user,
    text: confirmationMessage
  };
}

Python

python/contact-form-app/main.py

GitHub पर देखना

# The Chat app indicates that it received form data from the dialog or card.
# Sends private text message that confirms submission.
confirmation_message = "✅ " + contact_name + " has been added to your contacts.";
if "SUBMIT_DIALOG" == event.get('dialogEventType'):
  return {
    'actionResponse': {
      'type': "DIALOG",
      'dialogAction': { 'actionStatus': {
        'statusCode': "OK",
        'userFacingMessage': "Success " + contact_name
      }}
    }
  }
else:
  return {
    'actionResponse': { 'type': "NEW_MESSAGE" },
    'privateMessageViewer': event.get('user'),
    'text': confirmation_message
  }

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java

GitHub पर देखना

// The Chat app indicates that it received form data from the dialog or card.
// Sends private text message that confirms submission.
String confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
if (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("OK")
      .setUserFacingMessage("Success " + contactName))));
} else {
  return new Message()
    .setActionResponse(new ActionResponse().setType("NEW_MESSAGE"))
    .setPrivateMessageViewer(new User().setName(event.at("/user/name").asText()))
    .setText(confirmationMessage);
}

Apps Script

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

apps-script/contact-form-app/main.gs

GitHub पर देखना

// The Chat app indicates that it received form data from the dialog or card.
// Sends private text message that confirms submission.
const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
if (event.dialogEventType === "SUBMIT_DIALOG") {
  return {
    actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "OK",
        userFacingMessage: "Success " + contactName
      }}
    }
  }
} else {
  return {
    actionResponse: { type: "NEW_MESSAGE" },
    privateMessageViewer: event.user,
    text: confirmationMessage
  };
}

किसी मैसेज को अपडेट करने के लिए, actionResponse ऑब्जेक्ट दिखाएं. इसमें अपडेट किया गया मैसेज शामिल होना चाहिए. साथ ही, type को इनमें से किसी एक पर सेट करें:

• UPDATE_MESSAGE: उस मैसेज को अपडेट करता है जिसकी वजह से डायलॉग बॉक्स का अनुरोध ट्रिगर हुआ.
• UPDATE_USER_MESSAGE_CARDS: लिंक की झलक से कार्ड की जानकारी अपडेट करता है.

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

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

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

मिलते-जुलते विषय

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