কার্ডে ইন্টার‍্যাক্টিভ UI এলিমেন্ট যোগ করা

এই পৃষ্ঠায় কার্ডে কীভাবে উইজেট ও UI এলিমেন্ট যোগ করতে হয় তা ব্যাখ্যা করা হয়েছে যাতে ব্যবহারকারীরা আপনার Google Chat অ্যাপের সাথে ইন্টার‍্যাক্ট করতে পারেন, যেমন কোনও বোতামে ক্লিক করা বা তথ্য জমা দেওয়া।

ইন্টার‍্যাক্টিভ কার্ড তৈরি করতে Chat অ্যাপ নিম্নলিখিত Chat ইন্টারফেস ব্যবহার করতে পারে:

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

ব্যবহারকারীরা কার্ডের সাথে ইন্টার‍্যাক্ট করলে, Chat অ্যাপ সেই ডেটা ব্যবহার করে প্রসেস করতে এবং সেই অনুযায়ী উত্তর দিতে পারে। বিস্তারিত জানতে, Google Chat ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা দেখুন।

Chat অ্যাপের জন্য মেসেজিং ও ইউজার ইন্টারফেস ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:

কার্ড বিল্ডার খুলুন

পূর্বশর্ত

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

একটি বোতাম যোগ করুন

ButtonList উইজেট বোতামের একটি সেট দেখায়। বোতামে টেক্সট, আইকন অথবা টেক্সট ও আইকন, দুটিই দেখানো যেতে পারে। প্রতিটি Button একটি OnClick অ্যাকশন সমর্থন করে যা ব্যবহারকারী বোতামে ক্লিক করলে ঘটে। যেমন:

  • ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদান করার জন্য OpenLink, দিয়ে হাইপারলিঙ্ক খুলুন।
  • এমন একটি action রান করুন যা API কল করার মতো কাস্টম ফাংশন রান করে।

অ্যাক্সেসিবিলিটির জন্য, বোতাম বিকল্প টেক্সট সমর্থন করে।

কাস্টম ফাংশন রান করে এমন একটি বোতাম যোগ করুন

নিচে দুটি বোতাম সহ ButtonList উইজেট নিয়ে একটি কার্ড দেখানো হয়েছে। একটি বোতাম নতুন ট্যাবে Google Chat ডেভেলপার ডকুমেন্টেশন খোলে। অন্য বোতামটি goToView() নামের একটি কাস্টম ফাংশন রান করে এবং viewType="BIRD EYE VIEW" প্যারামিটার পাস করে।

মেটেরিয়াল ডিজাইন স্টাইল সহ বোতাম যোগ করা

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

মেটেরিয়াল ডিজাইন স্টাইল প্রয়োগ করতে, 'রঙ' অ্যাট্রিবিউট অন্তর্ভুক্ত করবেন না।

কাস্টম রঙ সহ একটি বোতাম এবং একটি বন্ধ করা বোতাম যোগ করুন

"disabled": "true" সেট করে আপনি ব্যবহারকারীদের কোনও বোতামে ক্লিক করা থেকে আটকাতে পারেন।

নিম্নলিখিতটি দুটি বোতাম সহ ButtonList উইজেট নিয়ে গঠিত একটি কার্ড দেখায়। একটি বোতাম Color ফিল্ড ব্যবহার করে বোতামের ব্যাকগ্রাউন্ডের রঙ কাস্টমাইজ করে। অন্য বোতামটি Disabled ফিল্ডের সাথে বন্ধ করা আছে, যা ব্যবহারকারীকে বোতামে ক্লিক করতে এবং ফাংশনটি কার্যকর করতে বাধা দেয়।

আইকন সহ বোতাম যোগ করুন

নিম্নলিখিতটি দুটি আইকন Button উইজেট সহ একটি ButtonList উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে। একটি বোতাম knownIcon ফিল্ড ব্যবহার করে Google Chat-এর বিল্ট-ইন ইমেল আইকন দেখায়। অন্য বোতামটি কাস্টম আইকন উইজেট দেখানোর জন্য iconUrl ফিল্ড ব্যবহার করে।

আইকন ও টেক্সট সহ বোতাম যোগ করুন

নিম্নলিখিতটি ButtonList উইজেট সহ একটি কার্ড দেখায় যা ব্যবহারকারীকে ইমেল পাঠাতে প্রম্পট করে। প্রথম বোতামে ইমেল আইকন এবং দ্বিতীয় বোতামে টেক্সট দেখানো হয়। sendEmail ফাংশন রান করতে ব্যবহারকারী আইকন বা টেক্সট বোতামে ক্লিক করতে পারেন।

আড়াল করা যায় এমন বিভাগের জন্য বোতাম কাস্টমাইজ করুন

কার্ডের মধ্যে বিভাগগুলি সঙ্কুচিত এবং প্রসারিত করে এমন কন্ট্রোল বোতামটি কাস্টমাইজ করুন। বিভাগের কন্টেন্ট ভিজ্যুয়ালি উপস্থাপন করার জন্য বিভিন্ন আইকন বা ছবি থেকে বেছে নিন, যাতে ব্যবহারকারীরা সহজেই তথ্য বুঝতে এবং ইন্টার‍্যাক্ট করতে পারেন।

ওভারফ্লো মেনু যোগ করুন

Chat কার্ডে Overflow menu ব্যবহার করে অতিরিক্ত বিকল্প ও অ্যাকশন অফার করা যেতে পারে। এটি আপনাকে কার্ডের ইন্টারফেসকে বিশৃঙ্খল না করেই আরও বিকল্প অন্তর্ভুক্ত করতে দেয়, একটি পরিষ্কার এবং সংগঠিত ডিজাইন নিশ্চিত করে।

চিপসের তালিকা যোগ করুন

ChipList উইজেট তথ্য দেখানোর জন্য একটি বহুমুখী এবং দৃশ্যত আকর্ষণীয় উপায় প্রদান করে। ট্যাগ, বিভাগ বা অন্যান্য প্রাসঙ্গিক ডেটা উপস্থাপন করতে চিপ তালিকা ব্যবহার করুন, যাতে ব্যবহারকারীদের জন্য আপনার কন্টেন্ট নেভিগেট করা এবং ইন্টার‍্যাক্ট করা সহজ হয়।

ব্যবহারকারীদের থেকে তথ্য সংগ্রহ করুন

এই বিভাগে ব্যাখ্যা করা হয়েছে যে আপনি কীভাবে এমন উইজেট যোগ করতে পারবেন যা তথ্য সংগ্রহ করে, যেমন টেক্সট বা বাছাই করা আইটেম।

ব্যবহারকারীর ইনপুট কীভাবে প্রসেস করতে হয় তা জানতে, Google Chat ব্যবহারকারীদের থেকে তথ্য সংগ্রহ ও প্রসেস করা দেখুন।

টেক্সট সংগ্রহ করুন

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

ব্যবহারকারীদের থেকে অ্যাবস্ট্রাক্ট বা অজানা ডেটা সংগ্রহ করতে হলে, এই TextInput উইজেট ব্যবহার করুন। ব্যবহারকারীদের থেকে নির্দিষ্ট ডেটা সংগ্রহ করতে, পরিবর্তে SelectionInput উইজেট ব্যবহার করুন।

নিচে একটি কার্ড দেওয়া হল যাতে TextInput উইজেট আছে:

তারিখ বা সময় সংগ্রহ করুন

DateTimePicker উইজেট ব্যবহারকারীদের তারিখ, সময় বা তারিখ ও সময় দু'টিই ইনপুট করতে দেয়। অথবা, ব্যবহারকারীরা তারিখ ও সময় বেছে নিতে পিকার ব্যবহার করতে পারেন। ব্যবহারকারী ভুল তারিখ বা সময় ইনপুট করলে, পিকার একটি সমস্যা দেখায় যা ব্যবহারকারীকে সঠিক তথ্য ইনপুট করতে প্রম্পট করে।

নিচে তিনটি আলাদা ধরনের DateTimePicker উইজেট সহ একটি কার্ড দেখানো হয়েছে:

ব্যবহারকারীদের আইটেম বেছে নিতে দিন

SelectionInput উইজেট বেছে নেওয়া যায় এমন আইটেমের সেট প্রদান করে, যেমন চেকবক্স, রেডিও বোতাম, সুইচ বা ড্রপ-ডাউন মেনু। ব্যবহারকারীদের থেকে নির্দিষ্ট ও স্ট্যান্ডার্ড ডেটা সংগ্রহ করতে আপনি এই উইজেট ব্যবহার করতে পারবেন। ব্যবহারকারীদের থেকে অনির্দিষ্ট ডেটা সংগ্রহ করতে, পরিবর্তে TextInput উইজেট ব্যবহার করুন।

SelectionInput উইজেট সাজেশনকে সাপোর্ট করে, যা ব্যবহারকারীদের একই ধরনের ডেটা লিখতে সাহায্য করে এবং অন-চেঞ্জ অ্যাকশন, যা হল Actions যা সিলেকশন ইনপুট ফিল্ডে কোনও পরিবর্তন হলে রান করে, যেমন ব্যবহারকারী কোনও আইটেম বেছে নিলে বা বেছে না নিলে।

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

এই বিভাগে SelectionInput উইজেট ব্যবহার করে এমন কার্ডের উদাহরণ দেওয়া হয়েছে। উদাহরণগুলি বিভিন্ন ধরনের বিভাগ ইনপুট ব্যবহার করে:

চেকবক্স যোগ করুন

নিম্নলিখিত কার্ডটি ব্যবহারকারীকে জিজ্ঞাসা করে যে কোনও পরিচিতি পেশাদার, ব্যক্তিগত নাকি উভয়ই, একটি SelectionInput উইজেট সহ যা চেকবক্স ব্যবহার করে:

রেডিও বোতাম যোগ করুন

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

সুইচ যোগ করুন

নিম্নলিখিত কার্ডে ব্যবহারকারীকে জিজ্ঞাসা করা হয় যে কোনও পরিচিতি পেশাদার, ব্যক্তিগত নাকি উভয়ই, যেখানে SelectionInput উইজেট ব্যবহার করা হয় যা সুইচ ব্যবহার করে:

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

ড্রপ-ডাউন মেনু ডায়নামিকভাবে পূরণ করুন

Google Chat অ্যাপের জন্য উপলভ্য।

আপনি Google Workspace-এর ডেটা সোর্স বা কোনও এক্সটার্নাল ডেটা সোর্স থেকে ড্রপ-ডাউন মেনুর জন্য আইটেম ডায়নামিকভাবে পপুলেট করতে পারবেন। ডায়নামিক ডেটা সোর্স ব্যবহার করতে, আপনাকে dataSourceConfigs ফিল্ড উল্লেখ করতে হবে, যা হল DataSourceConfig অবজেক্টের একটি অ্যারে। প্রতিটি DataSourceConfig-এ হয় একটি platformDataSource অথবা একটি remoteDataSource থাকতে পারে। এই মুহূর্তে শুধুমাত্র একটি DataSourceConfig কাজ করে।

Google Workspace থেকে আইটেম পপুলেট করুন

Google Workspace ব্যবহারকারীর মতো Google Workspace ডেটা সোর্স থেকে আইটেম পপুলেট করতে, আপনি DataSourceConfig-এর মধ্যে platformDataSource ফিল্ড নির্দিষ্ট করেন। স্ট্যাটিক items ব্যবহার করার মতো নয়, আপনি 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
              }
            ]
          }
        }
      ]
    }
  ]
}
এক্সটার্নাল ডেটা সোর্স থেকে আইটেম পপুলেট করুন

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

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

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"
              }
            ]
          }
        }
      ]
    }
  ]
}

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

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

নিচে এমন একটি কার্ড দেখানো হয়েছে যা ব্যবহারকারীকে মাল্টি-সিলেক্ট মেনু থেকে পরিচিতি বেছে নিতে বলে:

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

  • Google Workspace ব্যবহারকারী: আপনি শুধু একই Google Workspace সংস্থার মধ্যে ব্যবহারকারীদের তথ্য পূরণ করতে পারবেন।
  • Chat স্পেস: মাল্টি-সিলেক্ট মেনুতে আইটেম ইনপুট করা ব্যবহারকারী শুধুমাত্র সেইসব স্পেস দেখতে ও বেছে নিতে পারবেন যেগুলি তার Google Workspace সংস্থার অন্তর্গত।

Google Workspace ডেটা সোর্স ব্যবহার করতে, আপনাকে 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
          }
        }
      }
    }
  }
}

এছাড়াও, মাল্টি-সিলেক্ট মেনু থার্ড-পার্টি বা এক্সটার্নাল ডেটা সোর্স থেকে আইটেম পপুলেট করতে পারে। যেমন, আপনি মাল্টি-সিলেক্ট মেনু ব্যবহার করে কোনও ব্যবহারকারীকে কাস্টমার রিলেশনশিপ ম্যানেজমেন্ট (CRM) সিস্টেম থেকে সেলস লিডের তালিকা থেকে বেছে নিতে সাহায্য করতে পারেন।

এক্সটার্নাল ডেটা সোর্স ব্যবহার করতে, আপনি 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")]
}

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

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

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

  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
  };
}

কার্ডে ইনপুট করা ডেটা যাচাই করুন

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

অ্যাকশনের জন্য প্রয়োজনীয় উইজেট সেট করুন

কার্ডের action-এর অংশ হিসেবে, কোনও অ্যাকশনের জন্য প্রয়োজনীয় উইজেটের নাম সেটির requiredWidgets তালিকায় যোগ করুন।

এই অ্যাকশন চালু করার সময় এখানে তালিকাভুক্ত কোনও উইজেটের ভ্যালু না থাকলে, ফর্ম অ্যাকশন জমা দেওয়া বাতিল করা হয়।

কোনও অ্যাকশনের জন্য "allWidgetsAreRequired": true সেট করা হলে, কার্ডের সব উইজেট এই অ্যাকশনের জন্য প্রয়োজন হয়।

মাল্টি-সিলেক্টে allWidgetsAreRequired অ্যাকশন সেট করুন

JSON

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "allWidgetsAreRequired": true
            },
            "items": [
              {
                "value": "contact-1",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 1",
                "bottomText": "Contact one description",
                "selected": false
              },
              {
                "value": "contact-2",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 2",
                "bottomText": "Contact two description",
                "selected": false
              },
              {
                "value": "contact-3",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 3",
                "bottomText": "Contact three description",
                "selected": false
              },
              {
                "value": "contact-4",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 4",
                "bottomText": "Contact four description",
                "selected": false
              },
              {
                "value": "contact-5",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 5",
                "bottomText": "Contact five description",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}
dateTimePicker-এ allWidgetsAreRequired অ্যাকশন সেট করুন

JSON

{
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "allWidgetsAreRequired": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}
ড্রপ-ডাউন মেনুতে allWidgetsAreRequired অ্যাকশন সেট করুন

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "allWidgetsAreRequired": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

টেক্সট ইনপুট উইজেটের জন্য যাচাইকরণ সেট করুন

textInput উইজেটের যাচাইকরণ ফিল্ডে, এটি এই টেক্সট ইনপুট উইজেটের জন্য অক্ষর সীমা এবং ইনপুট টাইপ নির্দিষ্ট করতে পারে।

টেক্সট ইনপুট উইজেটের জন্য অক্ষর সীমা সেট করা

JSON

{
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"characterLimit": 15},
            "onChangeAction":{
              "allWidgetsAreRequired": true
            }
          }
        }
      ]
    }
  ]
}
টেক্সট ইনপুট উইজেটের জন্য ইনপুটের ধরন সেট করুন

JSON

{
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "inputType": "EMAIL"
            },
            "onChangeAction": {
              "allWidgetsAreRequired": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "inputType": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "inputType": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

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

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

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

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

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

নিম্নলিখিত কোডটি একটি অ্যাড-অন নয় এমন Chat অ্যাপে ব্যবহারকারীর জন্য পরিচিতির একটি বাহ্যিক সেট থেকে আইটেমগুলির একটি মাল্টিসিলেক্ট মেনু দেখায়। মেনুতে ডিফল্ট হিসেবে একটি পরিচিতি দেখায় এবং এক্সটার্নাল ডেটা সোর্স থেকে আইটেম ফিরিয়ে আনতে ও পপুলেট করতে getContacts ফাংশন রান করে:

Node.js

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

Python

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

Java

java/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("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

Apps Script

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

অ্যাড-অন নয় এমন Chat অ্যাপে আইটেম অটোমেটিক সম্পূর্ণ করতে, এমন একটি ফাংশন তৈরি করুন যা এক্সটার্নাল ডেটা সোর্স কোয়েরি করে এবং ব্যবহারকারী মাল্টি-সিলেক্ট মেনুতে টাইপ করলেই আইটেম ফিরিয়ে দেয়। ফাংশনটিকে অবশ্যই নিম্নলিখিত কাজগুলি করতে হবে:

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

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

Node.js

node/selection-input/index.js
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("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 suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py
def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

Apps Script

apps-script/selection-input/selection-input.gs
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("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 suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}