Google Chat ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা

কার্ড-ভিত্তিক ইন্টারফেসে ফর্ম ইনপুট তৈরি করে Google Chat অ্যাপ কীভাবে ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করতে পারে, এই নির্দেশিকায় তা বর্ণনা করা হয়েছে।

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

Chat অ্যাপ, Chat-এর মধ্যে বা বাইরে অ্যাকশন পারফর্ম করার জন্য ব্যবহারকারীদের থেকে তথ্য চায়, যার মধ্যে নিম্নলিখিত উপায়গুলি অন্তর্ভুক্ত:

  • সেটিংস কনফিগার করুন। যেমন, ব্যবহারকারীদের বিজ্ঞপ্তি সেটিংস কাস্টমাইজ করতে দেওয়া অথবা এক বা একাধিক স্পেসে Chat অ্যাপ কনফিগার ও যোগ করতে দেওয়া।
  • অন্যান্য Google Workspace অ্যাপ্লিকেশনে তথ্য তৈরি বা আপডেট করুন। যেমন, ব্যবহারকারীদের Google Calendar ইভেন্ট তৈরি করতে দিন।
  • ব্যবহারকারীদের অন্যান্য অ্যাপ বা ওয়েব পরিষেবায় রিসোর্স অ্যাক্সেস এবং আপডেট করার অনুমতি দিন। যেমন, Chat অ্যাপ ব্যবহারকারীদের Chat স্পেস থেকে সরাসরি সহায়তা টিকিটের স্ট্যাটাস আপডেট করতে সাহায্য করতে পারে।

পূর্বশর্ত

HTTP

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

Apps Script

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

কার্ড ব্যবহার করে ফর্ম তৈরি করুন

তথ্য সংগ্রহ করার জন্য, Chat অ্যাপ ফর্ম ও তার ইনপুট ডিজাইন করে এবং কার্ডে সেগুলি তৈরি করে। ব্যবহারকারীদের কার্ড দেখাতে, Chat অ্যাপ নিম্নলিখিত Chat ইন্টারফেস ব্যবহার করতে পারে:

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

চ্যাট অ্যাপ নিম্নলিখিত উইজেট ব্যবহার করে কার্ড তৈরি করতে পারে:

  • ফর্ম ইনপুট উইজেট যা ব্যবহারকারীদের থেকে তথ্য অনুরোধ করে। বিকল্প হিসেবে, ব্যবহারকারী যাতে তথ্য সঠিকভাবে ইনপুট ও ফর্ম্যাট করেন তা নিশ্চিত করতে, আপনি ফর্ম ইনপুট উইজেটে যাচাইকরণ যোগ করতে পারেন। চ্যাট অ্যাপ নিম্নলিখিত ফর্ম ইনপুট উইজেট ব্যবহার করতে পারে:

  • একটি বোতাম উইজেট যাতে ব্যবহারকারীরা কার্ডে ইনপুট করা ভ্যালু জমা দিতে পারেন। ব্যবহারকারী বোতামে ক্লিক করার পরে, Chat অ্যাপ যে তথ্য পায় তা প্রসেস করতে পারে।

নিম্নলিখিত উদাহরণে, একটি কার্ড টেক্সট ইনপুট, তারিখ ও সময় বেছে নেওয়ার টুল এবং সিলেকশন ইনপুট ব্যবহার করে যোগাযোগের তথ্য সংগ্রহ করে:

তথ্য সংগ্রহ করার জন্য আপনি ব্যবহার করতে পারেন এমন ইন্টার‍্যাক্টিভ উইজেটের আরও উদাহরণের জন্য, ইন্টার‍্যাক্টিভ কার্ড বা ডায়ালগ ডিজাইন করুন দেখুন।

ড্রপ-ডাউন মেনু যোগ করুন

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

আপনি নিম্নলিখিত ডেটা সোর্স থেকে ড্রপ-ডাউন মেনুর জন্য আইটেম পপুলেট করতে পারবেন:

Google Workspace ডেটা সোর্স থেকে আইটেম পপুলেট করা

Google Workspace ডেটা সোর্স থেকে আইটেম পপুলেট করতে, যেমন Google Workspace ব্যবহারকারী, DataSourceConfig অবজেক্টের মধ্যে platformDataSource ফিল্ড নির্দিষ্ট করুন। অন্যান্য সিলেকশন ইনপুট টাইপের মতো, আপনি SelectionItem অবজেক্ট বাদ দেন, কারণ এইসব সিলেকশন আইটেম Google Workspace থেকে ডায়নামিকভাবে সোর্স করা হয়।

নিম্নলিখিত কোডটি Google Workspace ব্যবহারকারীদের একটি ড্রপ-ডাউন মেনু দেখায়:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "dataSourceConfigs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "minCharactersTrigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}

এক্সটার্নাল ডেটা সোর্স থেকে আইটেম পপুলেট করুন

ড্রপ-ডাউন মেনু থার্ড-পার্টি বা এক্সটার্নাল ডেটা সোর্স থেকেও আইটেম পপুলেট করতে পারে। এক্সটার্নাল ডেটা সোর্স ব্যবহার করতে, আপনি remoteDataSource ফিল্ডটি একটি DataSourceConfig অবজেক্টের মধ্যে নির্দিষ্ট করেন, যাতে এমন ফাংশন থাকে যা ডেটা সোর্স থেকে আইটেম কোয়েরি করে এবং ফেরত দেয়।

এক্সটার্নাল ডেটা সোর্সে অনুরোধের সংখ্যা কমাতে, ব্যবহারকারী মেনুতে টাইপ করার আগে ড্রপ-ডাউন মেনুতে দেখানো সাজেস্ট করা আইটেম আপনি যোগ করতে পারেন। এক্সটার্নাল ডেটা সোর্স থেকে সাজেস্ট করা আইটেম পপুলেট করতে, স্ট্যাটিক SelectionItem অবজেক্ট নির্দিষ্ট করুন।

নিচের কোডটি একটি ড্রপ-ডাউন মেনু দেখায় যা এক্সটার্নাল ডেটা সোর্স থেকে আইটেম কোয়েরি করে এবং পপুলেট করে:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "dataSourceConfigs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "minCharactersTrigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

সাজেস্ট করা আইটেম কীভাবে ফিরিয়ে দিতে হয় তা দেখায় এমন একটি সম্পূর্ণ উদাহরণের জন্য, সাজেস্ট করা আইটেম বেছে নিন বিভাগটি দেখুন।

একাধিক আইটেম বেছে নেওয়ার মেনু যোগ করুন

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

আপনি নিম্নলিখিত ডেটা সোর্স থেকে মাল্টিসিলেক্ট মেনুর জন্য আইটেম পপুলেট করতে পারবেন:

  • Google Workspace ডেটা, যার মধ্যে ব্যবহারকারী বা Chat স্পেসের ব্যবহারকারী অন্তর্ভুক্ত। মেনুতে শুধু একই Google Workspace সংস্থার আইটেম দেখানো হয়।
  • এক্সটার্নাল ডেটা সোর্স, যেমন রিলেশনাল ডেটাবেস। যেমন, আপনি মাল্টি-সিলেক্ট মেনু ব্যবহার করে কোনও ব্যবহারকারীকে কাস্টমার রিলেশনশিপ ম্যানেজমেন্ট (CRM) সিস্টেম থেকে সেলস লিডের তালিকা থেকে বেছে নিতে সাহায্য করতে পারেন।

Google Workspace ডেটা সোর্স থেকে আইটেম পপুলেট করা

Google Workspace ডেটা সোর্স ব্যবহার করতে, SelectionInput উইজেটে platformDataSource ফিল্ড নির্দিষ্ট করুন। অন্যান্য সিলেকশন ইনপুট টাইপের মতো, আপনি SelectionItem অবজেক্ট বাদ দেন, কারণ এইসব সিলেকশন আইটেম Google Workspace থেকে ডায়নামিকভাবে সোর্স করা হয়।

নিম্নলিখিত কোডটি Google Workspace ব্যবহারকারীদের একটি মাল্টিসিলেক্ট মেনু দেখায়। ব্যবহারকারীদের তথ্য পূরণ করতে, বেছে নেওয়া ইনপুট commonDataSource থেকে USER সেট করে:

JSON

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

নিম্নলিখিত কোড Chat স্পেসের মাল্টি-সিলেক্ট মেনু দেখায়। স্পেস পপুলেট করতে, বেছে নেওয়া ইনপুট hostAppDataSource ফিল্ড নির্দিষ্ট করে। মাল্টিসিলেক্ট মেনুও defaultToCurrentSpace থেকে true সেট করে, যা বর্তমান স্পেসকে মেনুতে ডিফল্ট বাছাই করে তোলে:

JSON

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

এক্সটার্নাল ডেটা সোর্স থেকে আইটেম পপুলেট করুন

এছাড়াও, মাল্টি-সিলেক্ট মেনু থার্ড-পার্টি বা এক্সটার্নাল ডেটা সোর্স থেকে আইটেম পপুলেট করতে পারে। এক্সটার্নাল ডেটা সোর্স ব্যবহার করতে, আপনি SelectionInput উইজেটে externalDataSource ফিল্ড নির্দিষ্ট করেন যাতে এমন ফাংশন থাকে যা ডেটা সোর্স থেকে কোয়েরি করে এবং আইটেম ফিরিয়ে দেয়।

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

নিম্নলিখিত কোড স্যাম্পেল একটি মাল্টিসিলেক্ট মেনু দেখায় যা এক্সটার্নাল ডেটা সোর্স থেকে আইটেম কোয়েরি করে এবং পপুলেট করে:

Node.js

node/chat/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: FUNCTION_URL },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

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

Python

python/chat/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': FUNCTION_URL },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_suggested_contact("3")]
}

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

Java

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  .setItems(List.of(getSuggestedContact("3")))))))))));

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

Apps Script

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

apps-script/chat/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "queryContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

সাজেস্ট করা আইটেম কীভাবে ফিরিয়ে দিতে হয় তা দেখায় এমন একটি সম্পূর্ণ উদাহরণের জন্য, সাজেস্ট করা আইটেম বেছে নিন বিভাগটি দেখুন।

ইন্টার‍্যাক্টিভ উইজেট থেকে ডেটা পান

ব্যবহারকারী কোনও বোতামে ক্লিক করলেই, ইন্টার‍্যাকশন সম্পর্কিত তথ্য সহ Chat অ্যাপের অ্যাকশন ট্রিগার হয়। ইভেন্ট পেলোডের commonEventObject -এ, formInputs অবজেক্টে ব্যবহারকারীর ইনপুট করা যেকোনও মান থাকে।

আপনি অবজেক্ট থেকে ভ্যালু ফিরিয়ে আনতে পারবেন event.commonEventObject.formInputs.WIDGET_NAME, যেখানে WIDGET_NAME হল name ফিল্ড যা আপনি উইজেটের জন্য নির্দিষ্ট করেছেন। উইজেটের জন্য নির্দিষ্ট ডেটার ধরন হিসেবে ভ্যালু দেখানো হয়।

নিচে ইভেন্ট অবজেক্টের একটি অংশ দেখানো হয়েছে যেখানে ব্যবহারকারী প্রতিটি উইজেটের জন্য ভ্যালু লিখেছেন:

{
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

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

ফর্ম ইনপুট উইজেট ইনপুট ডেটার ধরন ইভেন্ট অবজেক্ট থেকে ইনপুট ভ্যালু উদাহরণ হিসেবে দেওয়া ভ্যালু
textInput stringInputs event.commonEventObject.formInputs.contactName.stringInputs.value[0] Kai O
selectionInput stringInputs প্রথম বা একমাত্র ভ্যালু পেতে, event.commonEventObject.formInputs.contactType.stringInputs.value[0] Personal
dateTimePicker যাতে শুধু তারিখ কাজ করে। dateInput event.commonEventObject.formInputs.contactBirthdate.dateInput.msSinceEpoch। 1000425600000

Chat অ্যাপ ডেটা পাওয়ার পরে, এটি নিম্নলিখিত যেকোনও কাজ করতে পারে:

বেছে নেওয়া আইটেম সাজেস্ট করুন

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

কোনও সিলেকশন ইনপুটে আইটেম সাজেস্ট ও ডায়নামিকভাবে পপুলেট করতে, কার্ডের SelectionInput উইজেটকে অবশ্যই এমন একটি ফাংশন নির্দিষ্ট করতে হবে যা এক্সটার্নাল ডেটা সোর্স কোয়েরি করে। একাধিক বিকল্প বেছে নেওয়ার মেনুর জন্য, আপনি externalDataSource ফিল্ড নির্দিষ্ট করেন। ড্রপ-ডাউন মেনুর জন্য, আপনি DataSourceConfig অবজেক্টের মধ্যে remoteDataSource ফিল্ড নির্দিষ্ট করেন।

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

সাজেস্ট করা আইটেম ফিরিয়ে দিতে, ফাংশনকে অবশ্যই নিম্নলিখিত কাজগুলি করতে হবে:

  1. ইভেন্ট অবজেক্ট ম্যানেজ করুন, যা Chat অ্যাপ পায় যখন ব্যবহারকারী মেনুতে টাইপ করেন।
  2. ইভেন্ট অবজেক্ট থেকে, ব্যবহারকারীর টাইপ করা মান পান, যা event.commonEventObject.parameters["autocomplete_widget_query"] ফিল্ডে দেখানো হয়।
  3. ব্যবহারকারীকে সাজেস্ট করার জন্য এক বা একাধিক SelectionItems পেতে, ব্যবহারকারীর ইনপুট ভ্যালু ব্যবহার করে ডেটা সোর্স কোয়েরি করুন।
  4. modifyCard অবজেক্ট সহ RenderActions অ্যাকশন রিটার্ন করে সাজেস্ট করা আইটেম রিটার্ন করুন।

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

Node.js

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

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

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

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

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

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

Python

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

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

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

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


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

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

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


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

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

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

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

Java

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
@SpringBootApplication
@RestController
// Web app that responds to events sent from a Google Chat space.
public class App {
  private static final String FUNCTION_URL = "your-function-url";

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

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

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

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

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

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

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

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

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

Apps Script

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

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

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

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

অন্য কার্ডে ডেটা ট্রান্সফার করুন

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

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

প্রাথমিক কার্ড থেকে ডেটা ইনপুট ট্রান্সফার করতে, আপনি button উইজেট তৈরি করতে পারেন actionParameters দিয়ে যাতে উইজেটের name এবং ব্যবহারকারীর ইনপুট করা ভ্যালু থাকে, যেমন নিচের উদাহরণে দেখানো হয়েছে:

Node.js

node/chat/contact-form-app/index.js
{ 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
{ '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
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))))))))))));

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

Apps Script

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

apps-script/chat/contact-form-app/Code.gs
{ 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 }
    ]
  }}
}]}}

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

ফর্ম জমা দেওয়ার উত্তর দিন

কার্ড মেসেজ বা ডায়ালগ থেকে ডেটা পাওয়ার পরে, Chat অ্যাপ প্রাপ্তি স্বীকার করে অথবা সমস্যা হয়েছে বলে উত্তর দেয়।

নিম্নলিখিত উদাহরণে, একটি Chat অ্যাপ একটি টেক্সট মেসেজ পাঠায় এটি নিশ্চিত করতে যে এটি সফলভাবে একটি কার্ড মেসেজ থেকে জমা দেওয়া একটি ফর্ম পেয়েছে।

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

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

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

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

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

ডায়ালগ ইন্টার‍্যাকশন "অ্যাড-অন কল করার সময় অনির্দিষ্ট সমস্যা হয়েছে" মেসেজ দেখায়

কোনও ডায়ালগের সাথে ইন্টার‍্যাক্ট করার সময়, আপনি যদি "অ্যাড-অন চালু করার সময় অনির্দিষ্ট সমস্যা হয়েছে।" মেসেজ এবং কোড 13 সহ সমস্যার লগ দেখতে পান, তাহলে সাধারণত এটি ইন্টার্নাল সমস্যা বা Chat অ্যাপের HTTP এন্ডপয়েন্ট অনুরোধ প্রসেস করতে বা সঠিক উত্তর দিতে পারেনি বলে ইঙ্গিত করে।

এই সমস্যার সমাধান করতে:

  • কোনও আনহ্যান্ডেলড ব্যতিক্রম বা ক্র্যাশের জন্য আপনার HTTP এন্ডপয়েন্টের লগ চেক করুন।
  • আপনার এন্ডপয়েন্ট ৩০ সেকেন্ডের মধ্যে অনুরোধের উত্তর দিচ্ছে কিনা তা যাচাই করুন। যদি endpoint রান করতে ৩০ সেকেন্ডের বেশি সময় নেয়, তাহলে Chat উত্তর প্রসেস করতে পারে না এবং ইন্টার‍্যাকশন ব্যর্থ হয়। বিস্তারিত জানতে রেট লিমিট ও পেশাদার পদ্ধতি দেখুন।
  • আপনার এন্ডপয়েন্ট যাতে সঠিক উত্তর দেয় তা নিশ্চিত করুন। ডায়ালগ জমা দেওয়ার জন্য, এন্ডপয়েন্টকে অবশ্যই সঠিক JSON ফর্ম্যাটে RenderActions অবজেক্ট রিটার্ন করতে হবে। উত্তরের ফর্ম্যাট ভুল হলে বা প্রয়োজনীয় ফিল্ড না থাকলে, ডায়ালগ ইন্টার‍্যাকশন কাজ নাও করতে পারে।

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

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

অ্যাড-অন নয় এমন Chat অ্যাপ: কার্ডে ব্যবহারকারীর ইনপুট করা ফর্ম ডেটা পড়ে

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

কার্ড ব্যবহার করে ফর্ম তৈরি করুন

অ্যাড-অন নয় এমন Chat অ্যাপের উদাহরণ হিসেবে, টেক্সট ইনপুট, তারিখ ও সময় বেছে নেওয়ার সুবিধা এবং বেছে নেওয়ার ইনপুট সহ কন্ট্যাক্ট ফর্ম ব্যবহার করে এমন অ্যাপের জন্য নিম্নলিখিত কোড দেখুন:

Node.js

node/contact-form-app/index.js
/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_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
        }
      ]
    }
  }
];

Python

python/contact-form-app/main.py
# The section of the contact card that contains the form input widgets. Used in a dialog and card message.
# To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
CONTACT_FORM_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
        }
      ]
    }
  }
]

Java

java/contact-form-app/src/main/java/com/google/chat/contact/App.java
// The section of the contact card that contains the form input widgets. Used in a dialog and card message.
// To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
final static private List<GoogleAppsCardV1Widget> CONTACT_FORM_WIDGETS = 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)))));

Apps Script

apps-script/contact-form-app/contactForm.gs
/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_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
        }
      ]
    }
  }
];

ইন্টার‍্যাক্টিভ উইজেট থেকে ডেটা পান

ব্যবহারকারী কোনও বোতামে ক্লিক করলে, অ্যাড-অন নয় এমন Chat অ্যাপ বোতামের লোকেশনের উপর নির্ভর করে ইন্টার‍্যাকশন ইভেন্ট পায়:

  • বোতামটি কোনও মেসেজ বা ডায়ালগে থাকলে, অ্যাড-অন নয় এমন Chat অ্যাপ CARD_CLICKED ইন্টার‍্যাকশন ইভেন্ট পায়, যাতে ইন্টার‍্যাকশন সম্পর্কে তথ্য থাকে। CARD_CLICKED ইন্টার‍্যাকশন ইভেন্টের পেলোডে common.formInputs অবজেক্ট (event.common.formInputs) থাকে, যার মধ্যে ব্যবহারকারীর ইনপুট করা যেকোনও ভ্যালু থাকে।

    আপনি অবজেক্ট থেকে ভ্যালু ফিরিয়ে আনতে পারবেন common.formInputs.WIDGET_NAME, যেখানে WIDGET_NAME হল name ফিল্ড যা আপনি উইজেটের জন্য নির্দিষ্ট করেছেন। উইজেটের জন্য নির্দিষ্ট ডেটা টাইপ হিসেবে ভ্যালু রিটার্ন করা হয় (Inputs অবজেক্ট হিসেবে দেখানো হয়)।

    নিচে CARD_CLICKED ইন্টার‍্যাকশন ইভেন্টের একটি অংশ দেখানো হয়েছে যেখানে ব্যবহারকারী প্রতিটি উইজেটের জন্য ভ্যালু ইনপুট করেছেন:

    HTTP

    {
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

    Apps Script 

    {
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}

  • বোতামটি হোমপেজে থাকলে, অ্যাড-অন নয় এমন Chat অ্যাপ SUBMIT_FORM ইন্টার‍্যাকশন ইভেন্ট পায়। ইন্টার‍্যাকশন ইভেন্টের পেলোডে একটি commonEventObject.formInputs অবজেক্ট (event.commonEventObject.formInputs) থাকে যার মধ্যে ব্যবহারকারীর ইনপুট করা যেকোনও ভ্যালু থাকে।

    আপনি অবজেক্ট থেকে ভ্যালু ফিরিয়ে আনতে পারবেন commonEventObject.formInputs.WIDGET_NAME, যেখানে WIDGET_NAME হল name ফিল্ড যা আপনি উইজেটের জন্য নির্দিষ্ট করেছেন। উইজেটের জন্য নির্দিষ্ট ডেটা টাইপ হিসেবে ভ্যালু রিটার্ন করা হয় (Inputs অবজেক্ট হিসেবে দেখানো হয়)।

    নিচে SUBMIT_FORM ইন্টার‍্যাকশন ইভেন্টের একটি অংশ দেখানো হয়েছে যেখানে ব্যবহারকারী প্রতিটি উইজেটের জন্য ভ্যালু ইনপুট করেছেন:

    HTTP

    {
  "type": "SUBMIT_FORM",
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

    Apps Script 

    {
  "type": "SUBMIT_FORM",
  "commonEventObject": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}

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

ফর্ম ইনপুট উইজেট ইনপুট ডেটার ধরন ইন্টার‍্যাকশন ইভেন্ট থেকে ইনপুট ভ্যালু উদাহরণ হিসেবে দেওয়া ভ্যালু
textInput stringInputs event.common.formInputs.contactName.stringInputs.value[0] Kai O
selectionInput stringInputs প্রথম বা একমাত্র ভ্যালু পেতে, event.common.formInputs.contactType.stringInputs.value[0] Personal
dateTimePicker যাতে শুধু তারিখ কাজ করে। dateInput event.common.formInputs.contactBirthdate.dateInput.msSinceEpoch। 1000425600000

অন্য কার্ডে ডেটা ট্রান্সফার করুন

অ্যাড-অন নয় এমন Chat অ্যাপে প্রাথমিক কার্ড থেকে ডেটা ইনপুট ট্রান্সফার করতে, actionParameters দিয়ে button উইজেট তৈরি করুন যেটিতে উইজেটের name এবং ব্যবহারকারীর ইনপুট করা ভ্যালু থাকে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Node.js

node/contact-form-app/index.js
buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

Python

python/contact-form-app/main.py
'buttonList': { 'buttons': [{
  'text': "Submit",
  'onClick': { 'action': {
    'function': "submitForm",
    'parameters': [{
      'key': "contactName", 'value': name }, {
      'key': "contactBirthdate", 'value': birthdate }, {
      'key': "contactType", 'value': type
    }]
  }}
}]}

Java

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

Apps Script

apps-script/contact-form-app/main.gs
buttonList: { buttons: [{
  text: "Submit",
  onClick: { action: {
    function: "submitForm",
    parameters: [{
      key: "contactName", value: name }, {
      key: "contactBirthdate", value: birthdate }, {
      key: "contactType", value: type
    }]
  }}
}]}

ব্যবহারকারী বোতামে ক্লিক করলে, Chat অ্যাপ যা অ্যাড-অন নয় সেটি CARD_CLICKED ইন্টার‍্যাকশন ইভেন্ট পায় যেখান থেকে আপনি ডেটা পেতে পারেন।

ফর্ম জমা দেওয়ার উত্তর দিন

নিম্নলিখিত উদাহরণে, অ্যাড-অন নয় এমন একটি Chat অ্যাপ টেক্সট মেসেজ পাঠিয়ে কনফার্ম করে যে এটি ডায়ালগ বা কার্ড মেসেজ থেকে জমা দেওয়া ফর্ম সফলভাবে পেয়েছে:

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

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 অ্যাপে কোনও ডায়ালগ প্রসেস ও বন্ধ করতে, একটি ActionResponse অবজেক্ট রিটার্ন করুন যা আপনি কনফার্মেশন মেসেজ পাঠাতে, আসল মেসেজ বা কার্ড আপডেট করতে অথবা শুধু ডায়ালগ বন্ধ করতে চান কিনা তা নির্দিষ্ট করে। ধাপের জন্য, ডায়ালগ বন্ধ করুন দেখুন।