ইন্টারেক্টিভ ডায়ালগ তৈরি করুন

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

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

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

পূর্বশর্ত

HTTP সম্পর্কে

একটি Google Workspace অ্যাড-অন যা Google Chat কে প্রসারিত করে। এটি তৈরি করতে, HTTP কুইকস্টার্ট সম্পূর্ণ করুন।

অ্যাপস স্ক্রিপ্ট

একটি Google Workspace অ্যাড-অন যা Google Chat কে প্রসারিত করে। এটি তৈরি করতে, Apps Script quickstart সম্পূর্ণ করুন।

একটি ডায়ালগ খুলুন

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

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

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

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

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

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

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

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

নোড.জেএস

নোড/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/ইনডেক্স.জেএস
{ buttonList: { buttons: [{
  text: "ADD CONTACT",
  onClick: { action: {
    function: FUNCTION_URL,
    interaction: "OPEN_DIALOG",
    parameters: [
      { key: "actionName", value: "openInitialDialog" }
    ]
  }}
}]}}

FUNCTION_URL HTTP এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

পাইথন

পাইথন/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/মেইন.পি
{ 'buttonList': { 'buttons': [{
  'text': "ADD CONTACT",
  'onClick': { 'action': {
    'function': FUNCTION_URL,
    'interaction': "OPEN_DIALOG",
    'parameters': [
      { 'key': "actionName", 'value': "openInitialDialog" }
    ]
  }}
}]}}

FUNCTION_URL HTTP এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

জাভা

জাভা/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/কন্ট্যাক্ট/অ্যাপ.জাভা
.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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

অ্যাপস স্ক্রিপ্ট

এই উদাহরণটি JSON কার্ড ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/কোড.জিএস
{ buttonList: { buttons: [{
  text: "ADD CONTACT",
  onClick: { action: {
    function: "openInitialDialog",
    interaction: "OPEN_DIALOG"
  }}
}]}}

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

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

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

নিম্নলিখিত কোড নমুনাটি দেখায় যে কীভাবে একটি চ্যাট অ্যাপ একটি ডায়ালগ খোলার প্রতিক্রিয়া ফেরত দেয়:

নোড.জেএস

নোড/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/ইনডেক্স.জেএস
/**
 * 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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

পাইথন

পাইথন/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/মেইন.পি
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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

জাভা

জাভা/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/কন্ট্যাক্ট/অ্যাপ.জাভা
/**
 * 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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

অ্যাপস স্ক্রিপ্ট

এই উদাহরণটি JSON কার্ড ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/কোড.জিএস
/**
 * 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" }}
    }]}}
  ]}]}}]}};
}

ডায়ালগ জমা দেওয়ার কাজটি পরিচালনা করুন

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

আপনার চ্যাট অ্যাপকে নিম্নলিখিত যেকোনো একটি করে ইভেন্ট অবজেক্টের প্রতি সাড়া দিতে হবে:

ঐচ্ছিক: আরেকটি ডায়ালগ ফেরত দিন

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

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

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

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

নোড.জেএস

নোড/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/ইনডেক্স.জেএস
/**
 * 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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

পাইথন

পাইথন/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/মেইন.পি
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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

জাভা

জাভা/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/কন্ট্যাক্ট/অ্যাপ.জাভা
/**
 * 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 এন্ডপয়েন্ট দিয়ে প্রতিস্থাপন করুন যা বোতামের ক্লিকগুলি পরিচালনা করে।

অ্যাপস স্ক্রিপ্ট

এই উদাহরণটি JSON কার্ড ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/কোড.জিএস
/**
 * 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

চ্যাট অ্যাপটি EndNavigation CLOSE_DIALOG তে সেট করা একটি RenderActions অবজেক্ট ফিরিয়ে দেবে।

ঐচ্ছিক: একটি অস্থায়ী বিজ্ঞপ্তি প্রদর্শন করুন

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

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

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

নোড.জেএস

নোড/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/ইনডেক্স.জেএস
// Validate the parameters.
if (!event.commonEventObject.parameters["contactName"]) {
  return { action: {
    navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
    notification: { text: "Failure, the contact name was missing!" }
  }};
}

পাইথন

পাইথন/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/মেইন.পি
# 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!" }
  }}

জাভা

জাভা/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/কন্ট্যাক্ট/অ্যাপ.জাভা
    // 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."));
          }});
        }});
      }});
    }};
  }
}

অ্যাপস স্ক্রিপ্ট

এই উদাহরণটি JSON কার্ড ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/কোড.জিএস
// Validate the parameters.
if (!event.commonEventObject.parameters["contactName"]) {
  return { action: {
    navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
    notification: { text: "Failure, the contact name was missing!" }
  }};
}

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

ঐচ্ছিক: একটি নিশ্চিতকরণ চ্যাট বার্তা পাঠান

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

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

নিম্নলিখিত উদাহরণটি একটি নতুন বার্তা পাঠানোর ডায়ালগ বন্ধ করে দেয়:

নোড.জেএস

নোড/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/ইনডেক্স.জেএস
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

পাইথন

পাইথন/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/মেইন.পি
return { 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': { 'message': {
  'text': "✅ " + event.get('commonEventObject').get('parameters')["contactName"] + " has been added to your contacts."
}}}}}

জাভা

জাভা/চ্যাট/কন্ট্যাক্ট-ফর্ম-অ্যাপ/এসআরসি/মেইন/জাভা/কম/গুগল/চ্যাট/কন্ট্যাক্ট/অ্যাপ.জাভা
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."));
      }});
    }});
  }});
}};

অ্যাপস স্ক্রিপ্ট

এই উদাহরণটি JSON কার্ড ফেরত দিয়ে একটি কার্ড বার্তা পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড পরিষেবাও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/চ্যাট/কন্টাক্ট-ফর্ম-অ্যাপ/কোড.জিএস
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

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

সমস্যা সমাধান

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

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