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

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

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

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

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

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

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

পূর্বশর্ত

একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনি যে অ্যাপ আর্কিটেকচার ব্যবহার করতে চান তার উপর ভিত্তি করে নিচের একটি দ্রুত শুরু করুন:

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

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

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

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

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

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

মেটেরিয়াল ডিজাইন শৈলী সহ একটি বোতাম যুক্ত করুন

নিম্নলিখিত বিভিন্ন উপাদান ডিজাইন বোতাম শৈলী মধ্যে বোতাম একটি সেট প্রদর্শন.

উপাদান ডিজাইন শৈলী প্রয়োগ করতে, 'রঙ' বৈশিষ্ট্য অন্তর্ভুক্ত করবেন না।

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

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

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

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

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

একটি আইকন এবং পাঠ্য সহ একটি বোতাম যুক্ত করুন৷

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

একটি সঙ্কুচিত বিভাগের জন্য বোতামটি কাস্টমাইজ করুন

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

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

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

একটি চিপ তালিকা যোগ করুন

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

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

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

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

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

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

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

নিম্নলিখিতটি একটি TextInput উইজেট সমন্বিত একটি কার্ড:

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

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

নিম্নলিখিত তিনটি ভিন্ন ধরণের DateTimePicker উইজেট সমন্বিত একটি কার্ড প্রদর্শন করে:

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

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

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

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

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

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

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

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

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

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

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

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

একটি বহুনির্বাচন মেনু যোগ করুন

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

আপনি Google Workspace-এ নিম্নলিখিত ডেটা উত্স থেকে একটি বহুনির্বাচিত মেনুর জন্য আইটেমগুলি পূরণ করতে পারেন:

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

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

নিম্নলিখিত কোডটি 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 ফাংশন চালায়:

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/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")))))))))));

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

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

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

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

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

নিম্নলিখিত কোড একটি বহিরাগত তথ্য সম্পদ থেকে আইটেম স্বয়ংসম্পূর্ণ. পূর্ববর্তী উদাহরণ ব্যবহার করে, চ্যাট অ্যাপটি যখন 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/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);
}

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

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

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

এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে একটি কার্ডের 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 চ্যাট অ্যাপ বা কার্ড একটি ত্রুটি ফেরত দেয়, তখন চ্যাট ইন্টারফেস "কিছু ভুল হয়েছে" বলে একটি বার্তা দেখায়। অথবা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম।" কখনও কখনও চ্যাট UI কোনও ত্রুটি বার্তা প্রদর্শন করে না, তবে চ্যাট অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে৷

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