কার্ডে ইন্টারেক্টিভ UI উপাদান যোগ করুন

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

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

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

যখন ব্যবহারকারীরা কার্ডের সাথে ইন্টারঅ্যাক্ট করেন, তখন চ্যাট অ্যাপগুলো প্রাপ্ত ডেটা ব্যবহার করে সে অনুযায়ী তথ্য প্রক্রিয়াকরণ ও প্রতিক্রিয়া জানাতে পারে। বিস্তারিত জানতে, ‘গুগল চ্যাট ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ ও প্রক্রিয়াকরণ’ দেখুন।

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

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

পূর্বশর্ত

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

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

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

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

অ্যাক্সেসিবিলিটির জন্য, বাটনগুলোতে বিকল্প টেক্সটের সুবিধা রয়েছে।

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

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

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

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

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

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

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

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

আইকন সহ একটি বাটন যোগ করুন

নিচের চিত্রে একটি কার্ড দেখানো হয়েছে, যেটিতে একটি ButtonList উইজেট এবং দুটি আইকন Button উইজেট রয়েছে। একটি বাটনে knownIcon ফিল্ড ব্যবহার করে গুগল চ্যাটের বিল্ট-ইন ইমেল আইকনটি দেখানো হয়েছে। অন্য বাটনে iconUrl ফিল্ড ব্যবহার করে একটি কাস্টম আইকন উইজেট দেখানো হয়েছে।

আইকন ও লেখা সহ একটি বাটন যোগ করুন

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

সংকোচনযোগ্য অংশের জন্য বোতামটি কাস্টমাইজ করুন

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

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

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

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

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

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

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

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

পাঠ্য সংগ্রহ করুন

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

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

নিম্নলিখিতটি একটি কার্ড, যাতে একটি TextInput উইজেট রয়েছে:

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

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

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

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

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

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

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

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

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

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

একটি রেডিও বাটন যোগ করুন

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

একটি সুইচ যোগ করুন

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

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

গতিশীলভাবে ড্রপ-ডাউন মেনুগুলি পূরণ করুন

গুগল চ্যাট অ্যাপের জন্য উপলব্ধ।

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

গুগল ওয়ার্কস্পেস থেকে আইটেমগুলি পূরণ করুন

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

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

JSON 

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

নিম্নলিখিত কোডটি চ্যাট স্পেসের একটি মাল্টিসিলেক্ট মেনু প্রদর্শন করে। স্পেসগুলি পূরণ করার জন্য, সিলেকশন ইনপুটটি 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 অবজেক্টগুলো নির্দিষ্ট করুন।

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

নোড.জেএস

নোড/নির্বাচন-ইনপুট/ইনডেক্স.জেএস
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/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/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")))))))))));

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

অ্যাপস-স্ক্রিপ্ট/সিলেকশন-ইনপুট/সিলেকশন-ইনপুট.জিএস
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")]
}

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

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

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

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

নোড.জেএস

নোড/নির্বাচন-ইনপুট/ইনডেক্স.জেএস
/**
 * 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/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/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);
}

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

অ্যাপস-স্ক্রিপ্ট/সিলেকশন-ইনপুট/সিলেকশন-ইনপুট.জিএস
/**
 * 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
  };
}

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

এই পৃষ্ঠায় একটি কার্ডের 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"
            }
          }
        }
      ]
    }
  ]
}

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

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

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