ইন্টার‍্যাক্টিভ ডায়ালগ কাজ করে

এই পৃষ্ঠায় বর্ণনা করা হয়েছে যে কীভাবে Google Chat অ্যাপ ডায়ালগ খুলে ইউজার ইন্টারফেস (UI) দেখাতে এবং ব্যবহারকারীদের উত্তর দিতে পারে।

ডায়ালগ হল উইন্ডো-ভিত্তিক, কার্ড-ভিত্তিক ইন্টারফেস যা Chat স্পেস বা মেসেজ থেকে খোলে। ডায়ালগ ও এর বিষয়বস্তু শুধুমাত্র সেই ব্যবহারকারী দেখতে পাবেন যিনি এটি খুলেছেন।

চ্যাট অ্যাপ, মাল্টি-স্টেপ ফর্ম সহ চ্যাট ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও অনুরোধ করার জন্য ডায়ালগ ব্যবহার করতে পারে। ফর্ম ইনপুট তৈরি করা সম্পর্কে আরও বিবরণ পেতে, ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা দেখুন।

পূর্বশর্ত

HTTP

Google Chat অ্যাপ যা ব্যবহারকারীর ইন্টার‍্যাকশন গ্রহণ করে এবং উত্তর দেয়। এটি তৈরি করতে, HTTP কুইকস্টার্ট সম্পূর্ণ করুন।

Apps Script

Google Chat অ্যাপ যা ব্যবহারকারীর ইন্টার‍্যাকশন গ্রহণ করে এবং উত্তর দেয়। এটি তৈরি করতে, অ্যাপ স্ক্রিপ্ট কুইকস্টার্ট সম্পূর্ণ করুন।

ডায়ালগ খুলুন

বিভিন্ন ধরনের উইজেট সহ একটি ডায়ালগ।
ছবি ১: একটি নমুনা চ্যাট অ্যাপ যা যোগাযোগের তথ্য সংগ্রহ করার জন্য একটি ডায়ালগ খোলে।

এই বিভাগে কীভাবে উত্তর দিতে হয় এবং নিম্নলিখিত কাজগুলি করে ডায়ালগ সেট-আপ করতে হয় তা ব্যাখ্যা করা হয়েছে:

  1. ব্যবহারকারীর ইন্টার‍্যাকশন থেকে ডায়ালগ অনুরোধ ট্রিগার করুন।
  2. একটি ডায়ালগ রিটার্ন ও খোলার মাধ্যমে অনুরোধটি হ্যান্ডেল করুন।
  3. ব্যবহারকারী তথ্য জমা দেওয়ার পরে, ডায়ালগ বন্ধ করে অথবা অন্য ডায়ালগ দেখিয়ে জমা দেওয়া তথ্য প্রসেস করুন।

ডায়ালগ অনুরোধ ট্রিগার করা

চ্যাট অ্যাপ শুধুমাত্র ব্যবহারকারীর ইন্টার‍্যাকশনের উত্তর দেওয়ার জন্য ডায়ালগ খুলতে পারে, যেমন কার্ডের মেসেজ থেকে কোনও কমান্ড বা বোতামে ক্লিক করা।

ডায়ালগের মাধ্যমে ব্যবহারকারীদের উত্তর দিতে, Chat অ্যাপকে অবশ্যই এমন ইন্টার‍্যাকশন তৈরি করতে হবে যা ডায়ালগ অনুরোধ ট্রিগার করে, যেমন নিম্নলিখিত:

  • কমান্ডের উত্তর দাও। কোনও কমান্ড থেকে অনুরোধ ট্রিগার করতে, আপনাকে অবশ্যই কমান্ড কনফিগার করার সময় একটি ডায়ালগ খোলে চেকবক্সে টিকচিহ্ন দিতে হবে।
  • কার্ডের অংশ হিসেবে অথবা মেসেজের নিচে মেসেজে বোতামে ক্লিক করার ব্যাপারে উত্তর দাও। মেসেজের বোতাম থেকে অনুরোধ ট্রিগার করতে, বোতামের onClick অ্যাকশন কনফিগার করতে, এর interaction-কে OPEN_DIALOG হিসেবে সেট করুন।
  • Chat অ্যাপের হোমপেজে বোতামে ক্লিক করার ব্যাপারে উত্তর দাও। হোমপেজ থেকে ডায়ালগ খোলা সম্পর্কে জানতে, আপনার Google Chat অ্যাপের জন্য হোমপেজ তৈরি করুন দেখুন।
ডায়ালগ ট্রিগার করে এমন বোতাম
ছবি ২: একটি Chat অ্যাপ মেসেজ পাঠায় যা ব্যবহারকারীকে /addContact স্ল্যাশ কমান্ড ব্যবহার করার জন্য প্রম্পট করে।
এছাড়াও, মেসেজে একটি বোতাম থাকে যেটিতে ক্লিক করে ব্যবহারকারী কমান্ড ট্রিগার করতে পারেন।

নিচের কোড স্যাম্পেল থেকে বোঝা যায় যে কীভাবে কার্ড মেসেজের বোতাম থেকে ডায়ালগ অনুরোধ ট্রিগার করতে হয়। ডায়ালগ খুলতে, বোতামের ফিল্ড onClick.action.interaction OPEN_DIALOG হিসেবে সেট করুন:

Node.js

node/chat/contact-form-app/index.js
{ buttonList: { buttons: [{
  text: "ADD CONTACT",
  onClick: { action: {
    function: FUNCTION_URL,
    interaction: "OPEN_DIALOG",
    parameters: [
      { key: "actionName", value: "openInitialDialog" }
    ]
  }}
}]}}

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Python

python/chat/contact-form-app/main.py
{ 'buttonList': { 'buttons': [{
  'text': "ADD CONTACT",
  'onClick': { 'action': {
    'function': FUNCTION_URL,
    'interaction': "OPEN_DIALOG",
    'parameters': [
      { 'key': "actionName", 'value': "openInitialDialog" }
    ]
  }}
}]}}

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
.setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
  .setText("ADD CONTACT")
  .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
    .setFunction(FUNCTION_URL)
    .setInteraction("OPEN_DIALOG")
    .setParameters(List.of(
      new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("openInitialDialog"))))))))));

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Apps Script

এই উদাহরণটি কার্ড JSON রিটার্ন করে একটি কার্ড মেসেজ পাঠায়। এছাড়াও, আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/chat/contact-form-app/Code.gs
{ buttonList: { buttons: [{
  text: "ADD CONTACT",
  onClick: { action: {
    function: "openInitialDialog",
    interaction: "OPEN_DIALOG"
  }}
}]}}

প্রাথমিক ডায়ালগ খুলুন

কোনও ব্যবহারকারী ডায়ালগ অনুরোধ ট্রিগার করলে, আপনার Chat অ্যাপ একটি ইভেন্ট অবজেক্ট পায় যার মধ্যে একটি পেলোড থাকে যা dialogEventType অবজেক্টকে REQUEST_DIALOG হিসেবে নির্দিষ্ট করে।

ডায়ালগ খুলতে, আপনার Chat অ্যাপ, কার্ড দেখানোর জন্য নেভিগেশন pushCard সহ একটি RenderActions অবজেক্ট ফেরত দিয়ে অনুরোধের উত্তর দিতে পারে। কার্ডে এক বা একাধিক sections[] উইজেট সহ যেকোনও ইউজার ইন্টারফেস (UI) এলিমেন্ট থাকতে হবে। ব্যবহারকারীদের থেকে তথ্য সংগ্রহ করতে, আপনি ফর্ম ইনপুট উইজেট ও বোতাম উইজেট নির্দিষ্ট করতে পারবেন। ফর্ম ইনপুট ডিজাইন করা সম্পর্কে আরও জানতে, ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা দেখুন।

নিচের কোড স্যাম্পেল থেকে বোঝা যায় যে কীভাবে কোনও চ্যাট অ্যাপ ডায়ালগ খোলে এমন উত্তর দেয়:

Node.js

node/chat/contact-form-app/index.js
/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} open the dialog.
 */
function openInitialDialog() {
  return { action: { navigations: [{ pushCard: { sections: [{ 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 }
      ]
    }},
    { buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: {
        function: FUNCTION_URL,
        parameters: [
          { key: "actionName", value: "openConfirmationDialog" }
        ]
      }}
    }]}}
  ]}]}}]}};
}

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Python

python/chat/contact-form-app/main.py
def open_initial_dialog() -> Mapping[str, Any]:
  """Opens the initial step of the dialog that lets users add contact details.

  Returns:
    Mapping[str, Any]: open the dialog.
  """
  return { 'action': { 'navigations': [{ 'pushCard': { 'sections': [{ '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 }
      ]
    }},
    { 'buttonList': { 'buttons': [{
      'text': "NEXT",
      'onClick': { 'action': {
        'function': FUNCTION_URL,
        'parameters': [
          { 'key': "actionName", 'value': "openConfirmationDialog" }
        ]
      }}
    }]}}
  ]}]}}]}}

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} open the dialog.
 */
GenericJson openInitialDialog() {
  GoogleAppsCardV1Card cardV2 = new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(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)))),
      new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
        new GoogleAppsCardV1Button()
          .setText("NEXT")
          .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
            .setFunction(FUNCTION_URL)
            .setParameters(List.of(
              new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("openConfirmationDialog"))))))))))));
  return new GenericJson() {{
    put("action", new GenericJson() {{
      put("navigations", List.of(new GenericJson() {{
        put("pushCard", cardV2);
      }}));
    }});
  }};
}

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Apps Script

এই উদাহরণটি কার্ড JSON রিটার্ন করে একটি কার্ড মেসেজ পাঠায়। এছাড়াও, আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/chat/contact-form-app/Code.gs
/**
 * 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"
    }},
    { 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 }
      ]
    }},
    { buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: { function : "openConfirmationDialog" }}
    }]}}
  ]}]}}]}};
}

ডায়ালগ জমা দেওয়ার বিষয়টি ম্যানেজ করা

ব্যবহারকারী কোনও ডায়ালগ জমা দেওয়ার বোতামে ক্লিক করলে, আপনার Chat অ্যাপ একটি ইভেন্ট অবজেক্ট পায় যার মধ্যে একটি buttonClickedPayload অবজেক্ট থাকে। পে-লোডে, dialogEventType-এর মান SUBMIT_DIALOG হিসেবে সেট করা আছে। ডায়ালগে কীভাবে তথ্য সংগ্রহ ও প্রসেস করতে হয় তা বুঝতে, Google Chat ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা লিঙ্ক দেখুন।

আপনার Chat অ্যাপকে অবশ্যই ইভেন্ট অবজেক্টের উত্তর দিতে হবে নিম্নলিখিতগুলির মধ্যে একটি করে:

ঐচ্ছিক: অন্য ডায়ালগ রিটার্ন করা

ব্যবহারকারী প্রাথমিক ডায়লগ জমা দেওয়ার পরে, Chat অ্যাপ ব্যবহারকারীকে জমা দেওয়ার আগে তথ্য পর্যালোচনা করতে সাহায্য করার জন্য এক বা একাধিক অতিরিক্ত ডায়লগ দেখাতে, একাধিক ধাপের ফর্ম সম্পূর্ণ করতে বা ডায়নামিক উপায়ে ফর্মের কন্টেন্ট পূরণ করতে পারে।

ব্যবহারকারীর ইনপুট করা ডেটা প্রসেস করতে, Chat অ্যাপ ইভেন্টের commonEventObject.formInputs অবজেক্টে ডেটা হ্যান্ডেল করে। ইনপুট উইজেট থেকে ভ্যালু রিট্রিভ করা সম্পর্কে আরও জানতে, ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা দেখুন।

প্রাথমিক ডায়ালগ থেকে ব্যবহারকারীর ইনপুট করা ডেটা ট্র্যাক করতে, আপনাকে অবশ্যই পরবর্তী ডায়ালগ খোলার বোতামে প্যারামিটার যোগ করতে হবে। বিস্তারিত জানতে, অন্য কার্ডে ডেটা ট্রান্সফার করুন দেখুন।

এই উদাহরণে, Chat অ্যাপ একটি প্রাথমিক ডায়ালগ খোলে যা জমা দেওয়ার আগে কনফার্মেশনের জন্য দ্বিতীয় ডায়ালগে নিয়ে যায়:

Node.js

node/chat/contact-form-app/index.js
/**
 * Responds to a message in Google Chat.
 *
 * @return {Object} response that handles dialogs.
 */
function handleMessage() {
  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: FUNCTION_URL,
          interaction: "OPEN_DIALOG",
          parameters: [
            { key: "actionName", value: "openInitialDialog" }
          ]
        }}
      }]}}
    ]
  }}}}};
}

/**
 * Responds to a button clicked in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} response depending on the button clicked.
 */
function handleButtonClicked(event) {
  // Initial dialog form page
  if (event.commonEventObject.parameters.actionName === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.commonEventObject.parameters.actionName === "openConfirmationDialog") {
    return openConfirmationDialog(event);
  // Submission dialog form page
  } else if (event.commonEventObject.parameters.actionName === "submitDialog") {
    return submitDialog(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} open the dialog.
 */
function openInitialDialog() {
  return { action: { navigations: [{ pushCard: { sections: [{ 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 }
      ]
    }},
    { buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: {
        function: FUNCTION_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];
  const birthdate = event.commonEventObject.formInputs["contactBirthdate"].dateInput.msSinceEpoch;
  const type = event.commonEventObject.formInputs["contactType"].stringInputs.value[0];
  // Display the input values for confirmation
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [
    { textParagraph: { text: "Confirm contact information and submit:" }},
    { textParagraph: { text: "<b>Name:</b> " + name }},
    { textParagraph: { text: "<b>Birthday:</b> " + new Date(birthdate) }},
    { textParagraph: { text: "<b>Type:</b> " + type }},
    { 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-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Python

python/chat/contact-form-app/main.py
def handle_message() -> Mapping[str, Any]:
  """Responds to a message in Google Chat.

  Returns:
    Mapping[str, Any]: the response that handles dialogs.
  """
  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': FUNCTION_URL,
          'interaction': "OPEN_DIALOG",
          'parameters': [
            { 'key': "actionName", 'value': "openInitialDialog" }
          ]
        }}
      }]}}
    ]
  }}}}}


def handle_button_clicked(event: Mapping[str, Any]) -> Mapping[str, Any]:
  """Responds to a button clicked in Google Chat.

  Args:
    Mapping[str, Any] event: the event object from the Google Workspace add-on

  Returns:
    Mapping[str, Any]: the response depending on the button clicked.
  """
  # Initial dialog form page
  if "openInitialDialog" == event['commonEventObject']['parameters']['actionName']:
    return open_initial_dialog()
  # Confirmation dialog form page
  elif "openConfirmationDialog" == event['commonEventObject']['parameters']['actionName'] :
    return open_confirmation_dialog(event)
  # Submission dialog form page
  elif "submitDialog" == event['commonEventObject']['parameters']['actionName']:
    return submit_dialog(event)


def open_initial_dialog() -> Mapping[str, Any]:
  """Opens the initial step of the dialog that lets users add contact details.

  Returns:
    Mapping[str, Any]: open the dialog.
  """
  return { 'action': { 'navigations': [{ 'pushCard': { 'sections': [{ '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 }
      ]
    }},
    { 'buttonList': { 'buttons': [{
      'text': "NEXT",
      'onClick': { 'action': {
        'function': FUNCTION_URL,
        'parameters': [
          { 'key': "actionName", 'value': "openConfirmationDialog" }
        ]
      }}
    }]}}
  ]}]}}]}}


def open_confirmation_dialog(event: Mapping[str, Any]) -> Mapping[str, Any]:
  """Opens the second step of the dialog that lets users confirm details.

  Args:
    Mapping[str, Any] event: the event object from the Google Workspace add-on

  Returns:
    Mapping[str, Any]: update the dialog.
  """
  name = event.get('commonEventObject').get('formInputs')["contactName"].get('stringInputs').get('value')[0]
  birthdateEpoch = event.get('commonEventObject').get('formInputs')["contactBirthdate"].get('dateInput').get('msSinceEpoch')
  birthdate = datetime.fromtimestamp(int(birthdateEpoch) / 1000.0).strftime("%Y-%m-%d")
  type = event.get('commonEventObject').get('formInputs')["contactType"].get('stringInputs').get('value')[0]
  # Display the input values for confirmation
  return { 'action': { 'navigations': [{ 'pushCard': { 'sections': [{ 'widgets': [
    { 'textParagraph': { 'text': "Confirm contact information and submit:" }},
    { 'textParagraph': { 'text': "<b>Name:</b> " + name }},
    { 'textParagraph': { 'text': "<b>Birthday:</b> " + birthdate }},
    { 'textParagraph': { 'text': "<b>Type:</b> " + type }},
    { '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-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করা হ্যান্ডেল করে।

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
/**
 * Responds to a message in Google Chat.
 *
 * @return response that handles dialogs.
 */
GenericJson handleMessage() {
  Message message = new Message()
    .setText("To add a contact, use the `ADD CONTACT` button below.")
    .setAccessoryWidgets(List.of(new AccessoryWidget()
      .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
        .setText("ADD CONTACT")
        .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
          .setFunction(FUNCTION_URL)
          .setInteraction("OPEN_DIALOG")
          .setParameters(List.of(
            new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("openInitialDialog"))))))))));
  return new GenericJson() {{
    put("hostAppDataAction", new GenericJson() {{
      put("chatDataAction", new GenericJson() {{
        put("createMessageAction", new GenericJson() {{
          put("message", message);
        }});
      }});
    }});
  }};
}

/**
 * Responds to a button clicked in Google Chat.
 *
 * @param event The event object from the Google Workspace add-on.
 * @return response depending on the button clicked.
 */
GenericJson handleButtonClicked(JsonNode event) {
  String actionName = event.at("/commonEventObject/parameters/actionName").asText();
  // Initial dialog form page
  if ("openInitialDialog".equals(actionName)) {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if ("openConfirmationDialog".equals(actionName)) {
    return openConfirmationDialog(event);
  // Submission dialog form page
  } else if ("submitDialog".equals(actionName)) {
    return submitDialog(event);
  }
  return null; 
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} open the dialog.
 */
GenericJson openInitialDialog() {
  GoogleAppsCardV1Card cardV2 = new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(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)))),
      new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
        new GoogleAppsCardV1Button()
          .setText("NEXT")
          .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
            .setFunction(FUNCTION_URL)
            .setParameters(List.of(
              new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("openConfirmationDialog"))))))))))));
  return new GenericJson() {{
    put("action", new GenericJson() {{
      put("navigations", List.of(new GenericJson() {{
        put("pushCard", cardV2);
      }}));
    }});
  }};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param event The event object from the Google Workspace add-on.
 * @return update the dialog.
 */
GenericJson openConfirmationDialog(JsonNode event) {
  // Retrieve the form input values
  String name = event.at("/commonEventObject/formInputs/contactName/stringInputs/value").get(0).asText();
  String birthdateEpoch = event.at("/commonEventObject/formInputs/contactBirthdate/dateInput/msSinceEpoch").asText();
  String birthdate = new SimpleDateFormat("MM/dd/yyyy").format(new Date((long)Double.parseDouble(birthdateEpoch)));
  String type = event.at("/commonEventObject/formInputs/contactType/stringInputs/value").get(0).asText();
  // Display the input values for confirmation
  GoogleAppsCardV1Card cardV2 = new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section().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> " + 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(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))))))))))));
  return new GenericJson() {{
    put("action", new GenericJson() {{
      put("navigations", List.of(new GenericJson() {{
        put("pushCard", cardV2);
      }}));
    }});
  }};
}

FUNCTION_URL-এর পরিবর্তে HTTP এন্ডপয়েন্ট লিখুন যা বোতামে ক্লিক করার প্রক্রিয়া ম্যানেজ করে।

Apps Script

এই উদাহরণটি কার্ড JSON রিটার্ন করে একটি কার্ড মেসেজ পাঠায়। এছাড়াও, আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/chat/contact-form-app/Code.gs
/**
 * 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"
    }},
    { 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 }
      ]
    }},
    { 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];
  const birthdate = event.commonEventObject.formInputs["contactBirthdate"].dateInput.msSinceEpoch;
  const type = event.commonEventObject.formInputs["contactType"].stringInputs.value[0];
  // Display the input values for confirmation
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [
    { textParagraph: { text: "Confirm contact information and submit:" }},
    { textParagraph: { text: "<b>Name:</b> " + name }},
    { textParagraph: { text: "<b>Birthday:</b> " + new Date(birthdate) }},
    { textParagraph: { text: "<b>Type:</b> " + type }},
    { 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 }
        ]
      }}
    }]}}
  ]}]}}]}};
}

ডায়ালগ বন্ধ করুন

ব্যবহারকারী কোনও ডায়ালগে 'জমা দিন' বোতামে ক্লিক করলে, আপনার চ্যাট অ্যাপ এর সাথে যুক্ত অ্যাকশনটি এক্সিকিউট করে এবং buttonClickedPayload নিম্নলিখিত মান সেট করা ইভেন্ট অবজেক্ট প্রদান করে:

  • isDialogEvent true।
  • dialogEventType SUBMIT_DIALOG।

Chat অ্যাপকে RenderActions অবজেক্ট রিটার্ন করতে হবে যার endNavigation CLOSE_DIALOG (endNavigation: "CLOSE_DIALOG") হিসেবে সেট করা আছে।

ঐচ্ছিক: সাময়িক বিজ্ঞপ্তি দেখানো

ডায়ালগ বন্ধ করার সময়, আপনি অ্যাপের সাথে ইন্টার‍্যাক্ট করা ব্যবহারকারীকে একটি সাময়িক টেক্সট বিজ্ঞপ্তিও দেখাতে পারেন।

বিজ্ঞপ্তি দেখাতে, notification সেট করা ফিল্ড সহ RenderActions অবজেক্ট রিটার্ন করুন।

নিম্নলিখিত উদাহরণটি টেক্সট বিজ্ঞপ্তি সহ ডায়ালগটি বন্ধ করে দেয়:

Node.js

node/chat/contact-form-app/index.js
// Validate the parameters.
if (!event.commonEventObject.parameters["contactName"]) {
  return { action: {
    navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
    notification: { text: "Failure, the contact name was missing!" }
  }};
}

Python

python/chat/contact-form-app/main.py
# Validate the parameters.
if event.get('commonEventObject').get('parameters')["contactName"] == "":
  return { 'action': {
    'navigations': [{ 'endNavigation': { 'action': "CLOSE_DIALOG"}}],
    'notification': { 'text': "Failure, the contact name was missing!" }
  }}

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
    // Validate the parameters.
    if (event.at("/commonEventObject/parameters/contactName").asText().isEmpty()) {
      return new GenericJson() {{
        put("action", new GenericJson() {{
          put("navigations", List.of(new GenericJson() {{
            put("endNavigation", new GenericJson() {{
              put("action", "CLOSE_DIALOG");
            }});
          }}));
          put("notification", new GenericJson() {{
            put("text", "Failure, the contact name was missing!");
          }});
        }});
      }};
    }

    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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/chat/contact-form-app/Code.gs
// Validate the parameters.
if (!event.commonEventObject.parameters["contactName"]) {
  return { action: {
    navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
    notification: { text: "Failure, the contact name was missing!" }
  }};
}

ডায়ালগের মধ্যে প্যারামিটার পাস করা সংক্রান্ত বিবরণের জন্য, অন্য কার্ডে ডেটা ট্রান্সফার করা দেখুন।

ঐচ্ছিক: কনফার্মেশন Chat মেসেজ পাঠানো

ডায়ালগ বন্ধ করার পরে, আপনি নতুন চ্যাট মেসেজ পাঠাতে পারেন, অথবা আগে থেকে থাকা মেসেজ আপডেট করতে পারেন।

নতুন মেসেজ পাঠাতে, নতুন মেসেজ সেট করা CreateMessageAction ফিল্ড সহ একটি DataActions অবজেক্ট রিটার্ন করুন। নিচের উদাহরণে একটি নতুন মেসেজ পাঠিয়ে ডায়ালগটি বন্ধ করা হয়েছে:

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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/chat/contact-form-app/Code.gs
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

ব্যবহারকারী কোনও ডায়ালগ জমা দেওয়ার পরে মেসেজ আপডেট করতে, নিম্নলিখিত অ্যাকশনের মধ্যে একটি সহ একটি DataActions অবজেক্ট রিটার্ন করুন:

সমস্যার সমাধান করুন

Google Chat অ্যাপ বা কার্ড কোনও সমস্যার মেসেজ দেখালে, Chat ইন্টারফেস "কিছু সমস্যা হয়েছে" লেখা মেসেজ দেখায়। অথবা "আপনার অনুরোধ প্রসেস করা যায়নি" কখনও কখনও Chat UI কোনও সমস্যার মেসেজ না দেখালেও, Chat অ্যাপ বা কার্ড অপ্রত্যাশিত ফলাফল দেয়; যেমন, কার্ড মেসেজ দেখানো নাও হতে পারে।

যদিও Chat UI-তে কোনও সমস্যার মেসেজ নাও দেখাতে পারে, Chat অ্যাপের জন্য সমস্যা লগ করার সুবিধা চালু করা থাকলে, সমস্যার বিবরণ সহ মেসেজ ও লগ ডেটা আপনাকে সমস্যা সমাধান করতে সাহায্য করার জন্য উপলভ্য থাকে। দেখতে, ডিবাগ করতে এবং সমস্যার সমাধান করতে সাহায্য পেতে, Google Chat সংক্রান্ত সমস্যার সমাধান ও তা ঠিক করা দেখুন।

অ্যাড-অন নয় এমন চ্যাট অ্যাপ: ইন্টার‍্যাক্টিভ ডায়ালগ খুলুন

Google Workspace অ্যাড-অন নয় এমন Chat অ্যাপের ক্ষেত্রে নিম্নলিখিত ডকুমেন্টেশন প্রযোজ্য। অ্যাড-অন নয় এমন Chat অ্যাপ মাইগ্রেট করতে, Google Chat অ্যাপকে Google Workspace অ্যাড-অনে কনভার্ট করুন দেখুন।

ডায়ালগ অনুরোধ ট্রিগার করা

নিচের কোড স্যাম্পেল থেকে বোঝা যায় যে কীভাবে অ্যাড-অন নয় এমন একটি Chat অ্যাপ কার্ড মেসেজের বোতাম থেকে ডায়ালগ অনুরোধ ট্রিগার করে। ডায়ালগ খুলতে, button.interaction ফিল্ডটি OPEN_DIALOG হিসেবে সেট করা আছে:

Node.js

node/contact-form-app/index.js
buttonList: { buttons: [{
  text: "Add Contact",
  onClick: { action: {
    function: "openInitialDialog",
    interaction: "OPEN_DIALOG"
  }}
}]}

Python

python/contact-form-app/main.py
'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
.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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/contact-form-app/main.gs
buttonList: { buttons: [{
  text: "Add Contact",
  onClick: { action: {
    function: "openInitialDialog",
    interaction: "OPEN_DIALOG"
  }}
}]}

প্রাথমিক ডায়ালগ খুলুন

ব্যবহারকারী কোনও ডায়ালগ অনুরোধ ট্রিগার করলে, কোনও অ্যাড-অন নয় এমন চ্যাট অ্যাপ Chat API-তে event টাইপ হিসেবে দেখানো ইন্টার‍্যাকশন ইভেন্ট পায়। ইন্টার‍্যাকশন কোনও ডায়লগ অনুরোধ ট্রিগার করলে, ইভেন্টের dialogEventType ফিল্ড REQUEST_DIALOG হিসেবে সেট করা হয়।

ডায়ালগ খুলতে, অ্যাড-অন নয় এমন Chat অ্যাপ actionResponse type: "DIALOG" ও Message অবজেক্ট সহ অনুরোধের উত্তর দিতে পারে। ডায়ালগের কন্টেন্ট নির্দিষ্ট করতে, আপনাকে নিম্নলিখিত অবজেক্ট অন্তর্ভুক্ত করতে হবে:

  • actionResponse অবজেক্ট, যার type DIALOG হিসেবে সেট করা আছে।
  • dialogAction অবজেক্ট। body ফিল্ডে কার্ডে দেখানোর জন্য ইউজার ইন্টারফেস (UI) এলিমেন্ট থাকে, যার মধ্যে এক বা একাধিক sections উইজেট থাকে। ব্যবহারকারীদের থেকে তথ্য সংগ্রহ করতে, আপনি ফর্ম ইনপুট উইজেট ও বোতাম উইজেট নির্দিষ্ট করতে পারবেন।

নিচের কোড স্যাম্পেল থেকে বোঝা যায় যে কীভাবে অ্যাড-অন নয় এমন একটি Chat অ্যাপ ডায়ালগ খোলার মতো উত্তর দেয়:

Node.js

node/contact-form-app/index.js
/**
 * 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
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
// 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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/contact-form-app/main.gs
/**
 * 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" }}
        }]}
      }])
    }]}}}
  }};
}

ডায়ালগ জমা দেওয়ার বিষয়টি ম্যানেজ করা

ব্যবহারকারী কোনও ডায়ালগ জমা দেওয়ার বোতামে ক্লিক করলে, একটি অ্যাড-অন নয় এমন চ্যাট অ্যাপ একটি CARD_CLICKED ইন্ট্যার‍্যাকশন ইভেন্ট পায় যেখানে dialogEventType SUBMIT_DIALOG হয়।

ঐচ্ছিক: অন্য ডায়ালগ রিটার্ন করা

অ্যাড-অন নয় এমন Chat অ্যাপে ব্যবহারকারীর দেওয়া ডেটা প্রসেস করতে, Chat অ্যাপ event.common.formInputs অবজেক্ট ব্যবহার করে।

এই উদাহরণে, অ্যাড-অন নয় এমন একটি Chat অ্যাপ প্রাথমিক ডায়ালগ খোলে যা জমা দেওয়ার আগে কনফার্মেশনের জন্য দ্বিতীয় ডায়ালগে নিয়ে যায়:

Node.js

node/contact-form-app/index.js
/**
 * 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
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
// 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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/contact-form-app/main.gs
/**
 * 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 অ্যাপ এর সাথে যুক্ত অ্যাকশনটি এক্সিকিউট করে এবং নিম্নলিখিত তথ্য সহ ইভেন্ট অবজেক্ট প্রদান করে:

অ্যাড-অন নয় এমন Chat অ্যাপকে ActionResponse type DIALOG হিসেবে সেট করা এবং dialogAction পপুলেট করা অবজেক্ট রিটার্ন করতে হবে। অ্যাকশনটি ব্যর্থ না হলে, dialogAction.actionStatus-এর মান OK হতে হবে, যেমন নিচে দেখানো উদাহরণে:

Node.js

node/contact-form-app/index.js
// 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
      }}
    }
  };
}

Python

python/contact-form-app/main.py
# 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
      }}
    }
  }

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java
// 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))));
}

Apps Script

এই উদাহরণটি কার্ড JSON রিটার্ন করে একটি কার্ড মেসেজ পাঠায়। এছাড়াও, আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/contact-form-app/main.gs
// 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
      }}
    }
  };
}
ঐচ্ছিক: সাময়িক বিজ্ঞপ্তি দেখানো

অ্যাড-অন নয় এমন কোনও চ্যাট অ্যাপ ActionResponse actionStatus সেট করে, সেটির মাধ্যমে সফল বা ব্যর্থতার বিজ্ঞপ্তি দিয়ে উত্তর দিতে পারে।

নিচের উদাহরণে প্যারামিটার সঠিক কিনা তা চেক করা হয় এবং ভুল হলে টেক্সট বিজ্ঞপ্তি সহ ডায়ালগ বন্ধ করে দেওয়া হয়:

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

এই উদাহরণটি কার্ড JSON রিটার্ন করে একটি কার্ড মেসেজ পাঠায়। এছাড়াও, আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

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 মেসেজ পাঠানো

অ্যাড-অন নয় এমন চ্যাট অ্যাপে ডায়ালগ বন্ধ করার সময় নতুন মেসেজ পাঠাতে, type: "NEW_MESSAGE" সহ ActionResponse অবজেক্ট রিটার্ন করুন। নিচের উদাহরণে কনফার্মেশন টেক্সট মেসেজ সহ ডায়ালগ বন্ধ করা হয়েছে:

Node.js

node/contact-form-app/index.js
return {
  actionResponse: { type: "NEW_MESSAGE" },
  privateMessageViewer: event.user,
  text: confirmationMessage
};

Python

python/contact-form-app/main.py
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
return new Message()
  .setActionResponse(new ActionResponse().setType("NEW_MESSAGE"))
  .setPrivateMessageViewer(new User().setName(event.at("/user/name").asText()))
  .setText(confirmationMessage);

Apps Script

এই উদাহরণটি কার্ড JSON রিটার্ন করে একটি কার্ড মেসেজ পাঠায়। এছাড়াও, আপনি Apps স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

apps-script/contact-form-app/main.gs
return {
  actionResponse: { type: "NEW_MESSAGE" },
  privateMessageViewer: event.user,
  text: confirmationMessage
};

মেসেজ আপডেট করতে, একটি actionResponse অবজেক্ট রিটার্ন করুন যাতে আপডেট করা মেসেজ থাকে এবং type-এর মান নিম্নলিখিতগুলির মধ্যে একটিতে সেট করা থাকে: