এই পৃষ্ঠায় ব্যাখ্যা করা হয়েছে কিভাবে কার্ডগুলিতে উইজেট এবং UI উপাদান যোগ করতে হয় যাতে ব্যবহারকারীরা আপনার Google Chat অ্যাপের সাথে ইন্টারঅ্যাক্ট করতে পারেন, যেমন একটি বোতামে ক্লিক করে বা তথ্য জমা দিয়ে।
চ্যাট অ্যাপগুলি ইন্টারেক্টিভ কার্ড তৈরি করতে নিম্নলিখিত চ্যাট ইন্টারফেস ব্যবহার করতে পারে:
- এক বা একাধিক কার্ড ধারণকারী বার্তা ।
- হোমপেজ , যা একটি কার্ড যা চ্যাট অ্যাপের মাধ্যমে সরাসরি বার্তাগুলিতে হোম ট্যাব থেকে প্রদর্শিত হয়।
- ডায়ালগ , যা এমন কার্ড যা বার্তা এবং হোমপেজ থেকে একটি নতুন উইন্ডোতে খোলে।
ব্যবহারকারীরা যখন কার্ডের সাথে ইন্টারঅ্যাক্ট করেন, তখন চ্যাট অ্যাপগুলি তাদের প্রাপ্ত ডেটা ব্যবহার করে প্রক্রিয়াকরণ এবং সেই অনুযায়ী প্রতিক্রিয়া জানাতে পারে। বিস্তারিত জানার জন্য, Google Chat ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ এবং প্রক্রিয়াকরণ দেখুন।
চ্যাট অ্যাপের জন্য মেসেজিং এবং ইউজার ইন্টারফেস ডিজাইন এবং প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:
কার্ড বিল্ডার খুলুনপূর্বশর্ত
একটি Google Chat অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ এবং প্রতিক্রিয়া জানাতে কনফিগার করা হয়েছে। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনি যে অ্যাপ আর্কিটেকচারটি ব্যবহার করতে চান তার উপর ভিত্তি করে নিম্নলিখিত কুইকস্টার্টগুলির মধ্যে একটি সম্পূর্ণ করুন:
- গুগল ক্লাউড ফাংশন সহ HTTP পরিষেবা
- গুগল অ্যাপস স্ক্রিপ্ট
- গুগল ক্লাউড ডায়ালগফ্লো সিএক্স
- গুগল ক্লাউড পাব/সাব
একটি বোতাম যোগ করুন
ButtonList উইজেটটি বোতামের একটি সেট প্রদর্শন করে। বোতামগুলি টেক্সট, একটি আইকন, অথবা টেক্সট এবং একটি আইকন উভয়ই প্রদর্শন করতে পারে। প্রতিটি Button একটি OnClick অ্যাকশন সমর্থন করে যা ব্যবহারকারীরা বোতামে ক্লিক করলে ঘটে। উদাহরণস্বরূপ:
- ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদানের জন্য
OpenLinkদিয়ে একটি হাইপারলিঙ্ক খুলুন। - এমন একটি
actionচালান যা একটি কাস্টম ফাংশন চালায়, যেমন একটি API কল করা।
অ্যাক্সেসিবিলিটির জন্য, বোতামগুলি বিকল্প পাঠ্য সমর্থন করে।
একটি কাস্টম ফাংশন চালায় এমন একটি বোতাম যোগ করুন
নিচে একটি কার্ড দেওয়া হল যেখানে দুটি বোতাম সহ একটি ButtonList উইজেট আছে। একটি বোতাম একটি নতুন ট্যাবে Google Chat ডেভেলপার ডকুমেন্টেশন খুলবে। অন্য বোতামটি goToView() নামক একটি কাস্টম ফাংশন চালাবে এবং viewType="BIRD EYE VIEW" প্যারামিটারটি পাস করবে।
মেটেরিয়াল ডিজাইন স্টাইল সহ একটি বোতাম যোগ করুন
নিম্নলিখিতটি বিভিন্ন মেটেরিয়াল ডিজাইন বোতাম শৈলীতে বোতামগুলির একটি সেট প্রদর্শন করে।
মেটেরিয়াল ডিজাইন স্টাইল প্রয়োগ করতে, 'রঙ' বৈশিষ্ট্যটি অন্তর্ভুক্ত করবেন না।
কাস্টম রঙের একটি বোতাম এবং একটি নিষ্ক্রিয় বোতাম যোগ করুন
আপনি "disabled": "true" সেট করে ব্যবহারকারীদের একটি বোতামে ক্লিক করা থেকে বিরত রাখতে পারেন।
নিচের ছবিতে দুটি বোতাম সহ একটি ButtonList উইজেট সহ একটি কার্ড দেখানো হয়েছে। একটি বোতাম বোতামের পটভূমির রঙ কাস্টমাইজ করতে Color ক্ষেত্র ব্যবহার করে। অন্য বোতামটি Disabled ক্ষেত্র দিয়ে নিষ্ক্রিয় করা হয়, যা ব্যবহারকারীকে বোতামে ক্লিক করতে এবং ফাংশনটি সম্পাদন করতে বাধা দেয়।
আইকন সহ একটি বোতাম যোগ করুন
নিচেরটিতে দুটি আইকন Button উইজেট সহ একটি ButtonList উইজেট সমন্বিত একটি কার্ড প্রদর্শিত হবে। একটি বোতাম Google Chat-এর অন্তর্নির্মিত ইমেল আইকন প্রদর্শন করতে knownIcon ক্ষেত্র ব্যবহার করে। অন্য বোতামটি একটি কাস্টম আইকন উইজেট প্রদর্শন করতে iconUrl ক্ষেত্র ব্যবহার করে।
আইকন এবং টেক্সট সহ একটি বোতাম যোগ করুন
নিচের ছবিতে একটি কার্ড দেখানো হয়েছে যেখানে একটি ButtonList উইজেট রয়েছে যা ব্যবহারকারীকে একটি ইমেল পাঠাতে অনুরোধ করে। প্রথম বোতামটি একটি ইমেল আইকন প্রদর্শন করে এবং দ্বিতীয় বোতামটি টেক্সট প্রদর্শন করে। ব্যবহারকারী sendEmail ফাংশনটি চালানোর জন্য আইকন বা টেক্সট বোতামে ক্লিক করতে পারেন।
একটি ফোলা অংশের জন্য বোতামটি কাস্টমাইজ করুন
কার্ডের মধ্যে বিভাগগুলিকে ভেঙে ফেলা এবং প্রসারিত করার জন্য নিয়ন্ত্রণ বোতামটি কাস্টমাইজ করুন। বিভাগটির বিষয়বস্তু দৃশ্যত উপস্থাপন করার জন্য বিভিন্ন আইকন বা চিত্র থেকে বেছে নিন, যাতে ব্যবহারকারীরা তথ্য বুঝতে এবং তার সাথে ইন্টারঅ্যাক্ট করতে সহজ হয়।
একটি ওভারফ্লো মেনু যোগ করুন
চ্যাট কার্ডগুলিতে অতিরিক্ত বিকল্প এবং ক্রিয়া প্রদানের জন্য Overflow menu ব্যবহার করা যেতে পারে। এটি আপনাকে কার্ডের ইন্টারফেসকে বিশৃঙ্খল না করে আরও বিকল্প অন্তর্ভুক্ত করতে দেয়, যা একটি পরিষ্কার এবং সুসংগঠিত নকশা নিশ্চিত করে।
একটি চিপস তালিকা যোগ করুন
ChipList উইজেট তথ্য প্রদর্শনের জন্য একটি বহুমুখী এবং দৃষ্টিনন্দন উপায় প্রদান করে। ট্যাগ, বিভাগ বা অন্যান্য প্রাসঙ্গিক ডেটা উপস্থাপনের জন্য চিপ তালিকা ব্যবহার করুন, যা ব্যবহারকারীদের জন্য আপনার সামগ্রী নেভিগেট করা এবং তার সাথে ইন্টারঅ্যাক্ট করা সহজ করে তোলে।
ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ করুন
এই বিভাগটি ব্যাখ্যা করে যে কীভাবে আপনি এমন উইজেট যোগ করতে পারেন যা তথ্য সংগ্রহ করে, যেমন টেক্সট বা নির্বাচন।
ব্যবহারকারীরা কী ইনপুট করেন তা কীভাবে প্রক্রিয়া করবেন তা জানতে, Google Chat ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ এবং প্রক্রিয়াকরণ দেখুন।
টেক্সট সংগ্রহ করুন
TextInput উইজেট এমন একটি ক্ষেত্র প্রদান করে যেখানে ব্যবহারকারীরা টেক্সট লিখতে পারেন। উইজেটটি পরামর্শ সমর্থন করে, যা ব্যবহারকারীদের অভিন্ন ডেটা প্রবেশ করতে সাহায্য করে এবং অন-চেঞ্জ অ্যাকশন, যা এমন Actions যা টেক্সট ইনপুট ফিল্ডে কোনও পরিবর্তন ঘটলে সঞ্চালিত হয়, যেমন একজন ব্যবহারকারী টেক্সট যোগ করা বা মুছে ফেলা।
যখন আপনার ব্যবহারকারীদের কাছ থেকে বিমূর্ত বা অজানা তথ্য সংগ্রহ করার প্রয়োজন হয়, তখন এই TextInput উইজেটটি ব্যবহার করুন। ব্যবহারকারীদের কাছ থেকে সংজ্ঞায়িত তথ্য সংগ্রহ করতে, SelectionInput উইজেটটি ব্যবহার করুন।
নিম্নলিখিতটি একটি TextInput উইজেট সমন্বিত একটি কার্ড:
তারিখ বা সময় সংগ্রহ করুন
DateTimePicker উইজেট ব্যবহারকারীদের একটি তারিখ, সময়, অথবা তারিখ এবং সময় উভয়ই ইনপুট করতে দেয়। অথবা, ব্যবহারকারীরা তারিখ এবং সময় নির্বাচন করতে পিকার ব্যবহার করতে পারেন। যদি ব্যবহারকারীরা একটি অবৈধ তারিখ বা সময় ইনপুট করেন, তাহলে পিকারটি একটি ত্রুটি দেখায় যা ব্যবহারকারীদের সঠিকভাবে তথ্য ইনপুট করতে অনুরোধ করে।
নিম্নলিখিতটি তিনটি ভিন্ন ধরণের DateTimePicker উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে:
ব্যবহারকারীদের আইটেম নির্বাচন করতে দিন
SelectionInput উইজেটটি নির্বাচনযোগ্য আইটেমগুলির একটি সেট প্রদান করে, যেমন চেকবক্স, রেডিও বোতাম, সুইচ, অথবা একটি ড্রপ-ডাউন মেনু। আপনি ব্যবহারকারীদের কাছ থেকে সংজ্ঞায়িত এবং মানসম্মত ডেটা সংগ্রহ করতে এই উইজেটটি ব্যবহার করতে পারেন। ব্যবহারকারীদের কাছ থেকে অনির্ধারিত ডেটা সংগ্রহ করতে, পরিবর্তে TextInput উইজেট ব্যবহার করুন।
SelectionInput উইজেট পরামর্শ সমর্থন করে, যা ব্যবহারকারীদের অভিন্ন ডেটা প্রবেশ করতে সাহায্য করে এবং অন-চেঞ্জ অ্যাকশন, যা এমন Actions যা নির্বাচন ইনপুট ক্ষেত্রে কোনও পরিবর্তন ঘটলে, যেমন ব্যবহারকারী কোনও আইটেম নির্বাচন বা নির্বাচন বাতিল করার সময় চলে।
চ্যাট অ্যাপগুলি নির্বাচিত আইটেমগুলির মূল্য গ্রহণ এবং প্রক্রিয়া করতে পারে। ফর্ম ইনপুটগুলির সাথে কাজ করার বিশদ বিবরণের জন্য, ব্যবহারকারীদের দ্বারা ইনপুট করা প্রক্রিয়া তথ্য দেখুন।
এই বিভাগে SelectionInput উইজেট ব্যবহার করে এমন কার্ডের উদাহরণ দেওয়া হয়েছে। উদাহরণগুলিতে বিভিন্ন ধরণের সেকশন ইনপুট ব্যবহার করা হয়:
একটি চেকবক্স যোগ করুন
নিম্নলিখিতটি একটি কার্ড প্রদর্শন করে যা ব্যবহারকারীকে জিজ্ঞাসা করে যে কোনও পরিচিতি পেশাদার, ব্যক্তিগত, নাকি উভয়ই, একটি SelectionInput উইজেট সহ যা চেকবক্স ব্যবহার করে:
একটি রেডিও বোতাম যোগ করুন
নিম্নলিখিতটি একটি কার্ড প্রদর্শন করে যা ব্যবহারকারীকে একটি যোগাযোগ পেশাদার না ব্যক্তিগত তা নির্দিষ্ট করতে বলে, যার একটি SelectionInput উইজেট রেডিও বোতাম ব্যবহার করে:
একটি সুইচ যোগ করুন
নিম্নলিখিতটি একটি কার্ড প্রদর্শন করে যা ব্যবহারকারীকে নির্দিষ্ট করতে বলে যে কোনও পরিচিতি পেশাদার, ব্যক্তিগত, নাকি উভয়ই, যার একটি SelectionInput উইজেট সুইচ ব্যবহার করে:
একটি ড্রপ-ডাউন মেনু যোগ করুন
নিম্নলিখিতটি একটি কার্ড প্রদর্শন করে যা ব্যবহারকারীকে একটি পরিচিতি পেশাদার না ব্যক্তিগত তা নির্দিষ্ট করতে বলে, একটি SelectionInput উইজেট ব্যবহার করে যা একটি ড্রপ-ডাউন মেনু ব্যবহার করে:
গতিশীলভাবে ড্রপ-ডাউন মেনু পূরণ করুন
আপনি Google Workspace-এর ডেটা সোর্স থেকে অথবা কোনও বহিরাগত ডেটা সোর্স থেকে ড্রপ-ডাউন মেনুতে আইটেমগুলি গতিশীলভাবে পূরণ করতে পারেন। গতিশীল ডেটা সোর্স ব্যবহার করতে, আপনাকে data_source_configs ক্ষেত্রটি নির্দিষ্ট করতে হবে, যা DataSourceConfig অবজেক্টের একটি অ্যারে। প্রতিটি DataSourceConfig একটি platformDataSource অথবা একটি remoteDataSource থাকতে পারে। এই সময়ে শুধুমাত্র একটি DataSourceConfig সমর্থিত।
Google Workspace থেকে আইটেমগুলি পূরণ করুন
Google Workspace ডেটা সোর্স থেকে আইটেমগুলি পূরণ করতে, যেমন Google Workspace ব্যবহারকারীরা, আপনাকে DataSourceConfig এর মধ্যে platformDataSource ক্ষেত্রটি নির্দিষ্ট করতে হবে। static 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 প্রতিষ্ঠানের মধ্যে ব্যবহারকারীদের তালিকাভুক্ত করতে পারবেন।
- চ্যাট স্পেস : মাল্টিসিলেক্ট মেনুতে আইটেম ইনপুট করা ব্যবহারকারী কেবল তাদের 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 অবজেক্টগুলি নির্দিষ্ট করুন।
নিচের কোডটি ব্যবহারকারীর জন্য বহিরাগত পরিচিতিগুলির একটি সেট থেকে আইটেমগুলির একটি মাল্টিসিলেক্ট মেনু দেখায়। মেনুটি ডিফল্টরূপে একটি পরিচিতি প্রদর্শন করে এবং বহিরাগত ডেটা উৎস থেকে আইটেমগুলি পুনরুদ্ধার এবং পূরণ করার জন্য getContacts ফাংশনটি চালায়:
নোড.জেএস
পাইথন
জাভা
অ্যাপস স্ক্রিপ্ট
বহিরাগত ডেটা উৎসের জন্য, আপনি মাল্টিসিলেক্ট মেনুতে ব্যবহারকারীরা যে আইটেমগুলি টাইপ করা শুরু করেন সেগুলি স্বয়ংক্রিয়ভাবে পূরণ করতে পারেন। উদাহরণস্বরূপ, যদি কোনও ব্যবহারকারী মার্কিন যুক্তরাষ্ট্রের শহরগুলি পূরণ করে এমন একটি মেনুতে Atl টাইপ করা শুরু করেন, তাহলে ব্যবহারকারী টাইপ করা শেষ করার আগেই আপনার Chat অ্যাপ Atlanta স্বয়ংক্রিয়ভাবে সাজেস্ট করতে পারে। আপনি ১০০টি পর্যন্ত আইটেম স্বয়ংক্রিয়ভাবে পূরণ করতে পারেন।
আইটেমগুলি স্বয়ংক্রিয়ভাবে সম্পূর্ণ করার জন্য, আপনি একটি ফাংশন তৈরি করেন যা বহিরাগত ডেটা উৎসকে জিজ্ঞাসা করে এবং যখনই কোনও ব্যবহারকারী মাল্টিসিলেক্ট মেনুতে টাইপ করে তখন আইটেমগুলি ফেরত দেয়। ফাংশনটিকে নিম্নলিখিতগুলি করতে হবে:
- একটি ইভেন্ট অবজেক্ট পাস করুন যা মেনুর সাথে ব্যবহারকারীর মিথস্ক্রিয়া উপস্থাপন করে।
- ইন্টারঅ্যাকশন ইভেন্টের
invokedFunctionমানটিexternalDataSourceক্ষেত্রের ফাংশনের সাথে মেলে কিনা তা সনাক্ত করুন। - যখন ফাংশনগুলি মিলে যায়, তখন বহিরাগত ডেটা উৎস থেকে প্রস্তাবিত আইটেমগুলি ফেরত পাঠান। ব্যবহারকারী কী টাইপ করেন তার উপর ভিত্তি করে আইটেমগুলি সুপারিশ করতে,
autocomplete_widget_queryকী-এর মান পান। এই মানটি মেনুতে ব্যবহারকারী কী টাইপ করেন তা প্রতিনিধিত্ব করে।
নিচের কোডটি একটি বহিরাগত ডেটা রিসোর্স থেকে আইটেমগুলিকে স্বয়ংক্রিয়ভাবে সম্পূর্ণ করে। পূর্ববর্তী উদাহরণটি ব্যবহার করে, চ্যাট অ্যাপটি getContacts ফাংশনটি কখন ট্রিগার করা হয় তার উপর ভিত্তি করে আইটেমগুলি প্রস্তাব করে:
নোড.জেএস
পাইথন
জাভা
অ্যাপস স্ক্রিপ্ট
কার্ডগুলিতে ইনপুট করা ডেটা যাচাই করুন
এই পৃষ্ঠায় ব্যাখ্যা করা হয়েছে কিভাবে একটি কার্ডের 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 অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে।
যদিও চ্যাট UI তে কোনও ত্রুটির বার্তা প্রদর্শিত নাও হতে পারে, চ্যাট অ্যাপের জন্য ত্রুটি লগিং চালু থাকলে বর্ণনামূলক ত্রুটির বার্তা এবং লগ ডেটা আপনাকে ত্রুটিগুলি ঠিক করতে সাহায্য করার জন্য উপলব্ধ। ত্রুটিগুলি দেখা, ডিবাগ করা এবং ঠিক করার জন্য, Google Chat ত্রুটিগুলির সমস্যা সমাধান এবং সমাধান দেখুন।