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

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

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

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

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

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

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

পূর্বশর্ত

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

বোতাম যোগ করা

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

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

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

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

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

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

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

Material Design স্টাইল প্রয়োগ করতে, 'color' অ্যাট্রিবিউট যোগ করবেন না।

কাস্টম রঙ ও ডিঅ্যাক্টিভেট করা বোতাম সহ একটি বোতাম যোগ করুন

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

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

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

নিচে একটি কার্ড দেখানো হয়েছে যাতে দুটি আইকন Button উইজেট সহ একটি ButtonList উইজেট রয়েছে। একটি বোতামে Google Chat-এর বিল্ট-ইন ইমেল আইকন দেখানোর জন্য knownIcon ফিল্ড ব্যবহার করা হয়। অন্য বোতামটি 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-এর ডেটা সোর্স বা এক্সটার্নাল ডেটা সোর্স থেকে ড্রপ-ডাউন মেনুর আইটেম ডাইনামিক উপায়ে পূরণ করতে পারবেন। ডায়নামিক ডেটা সোর্স ব্যবহার করতে, আপনাকে data_source_configs ফিল্ড নির্দিষ্ট করতে হবে, যা 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",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}
এক্সটার্নাল ডেটা সোর্স থেকে আইটেম যোগ করা

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

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

JSON

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

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

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 রিটার্ন করে সাজেস্ট করা আইটেম রিটার্ন করুন।

নিম্নলিখিত কোড স্যাম্পেল থেকে বোঝা যায় যে কীভাবে কোনও কার্ডের মাল্টি-সিলেক্ট মেনুতে ডায়নামিক আইটেম সাজেস্ট করা যায়। কোনও ব্যবহারকারী মেনুতে টাইপ করলে, উইজেটের 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 স্ক্রিপ্ট কার্ড পরিষেবা ব্যবহার করতে পারবেন।

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 তালিকায় প্রয়োজন, সেগুলির নাম যোগ করুন।

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

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

মাল্টিসিলেক্টে all_widgets_are_required অ্যাকশন সেট করা

JSON

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": 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-এ all_widgets_are_required অ্যাকশন সেট করা

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":{
              "all_widgets_are_required": 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"
          }
        }
      ]
    }
  ]
}
ড্রপ-ডাউন মেনুতে all_widgets_are_required অ্যাকশন সেট করুন

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": 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": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": 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": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

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

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

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

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

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

নিচের কোডে, অ্যাড-অন নয় এমন চ্যাট অ্যাপে ব্যবহারকারীর জন্য পরিচিতির এক্সটার্নাল সেট থেকে আইটেমের মাল্টিসিলেক্ট মেনু দেখানো হয়েছে। মেনুতে ডিফল্ট হিসেবে একটি পরিচিতি দেখানো হয় এবং এক্সটার্নাল ডেটা সোর্স থেকে আইটেম রিট্রিভ ও পপুলেট করতে 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
  };
}