উইজেট

উইজেট হলো একটি UI উপাদান যা নিম্নলিখিত এক বা একাধিক বৈশিষ্ট্য প্রদান করে:

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

কার্ড বিভাগে যোগ করা উইজেটের সেটগুলি সামগ্রিক অ্যাড-অন UI নির্ধারণ করে। ওয়েব এবং মোবাইল উভয় ডিভাইসেই উইজেটগুলির চেহারা এবং কার্যকারিতা একই রকম। রেফারেন্স ডকুমেন্টেশন উইজেট সেট তৈরির বিভিন্ন পদ্ধতি বর্ণনা করে।

উইজেটের ধরণ

অ্যাড-অন উইজেটগুলিকে সাধারণত তিনটি ভাগে ভাগ করা হয়: কাঠামোগত উইজেট, তথ্যমূলক উইজেট এবং ব্যবহারকারীর ইন্টারঅ্যাকশন উইজেট।

কাঠামোগত উইজেট

স্ট্রাকচারাল উইজেটগুলি UI-তে ব্যবহৃত অন্যান্য উইজেটগুলির জন্য কন্টেইনার এবং সংগঠন প্রদান করে।

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

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

এই মৌলিক স্ট্রাকচারাল উইজেটগুলি ছাড়াও, একটি Google Workspace অ্যাড-অনে আপনি কার্ড পরিষেবা ব্যবহার করে এমন স্ট্রাকচার তৈরি করতে পারেন যা বর্তমান কার্ডকে ওভারল্যাপ করে: ফিক্সড ফুটার এবং পিক কার্ড :

স্থির পাদলেখ

আপনি আপনার কার্ডের নীচে একটি নির্দিষ্ট সারি বোতাম যোগ করতে পারেন। এই সারিটি কার্ডের বাকি অংশের সাথে সরে না বা স্ক্রোল করে না।

নিচের কোডের অংশে দেখানো হয়েছে কিভাবে একটি নির্দিষ্ট ফুটার সংজ্ঞায়িত করতে হয় এবং এটি একটি কার্ডে যোগ করতে হয়:

var fixedFooter = CardService.newFixedFooter()
    .setPrimaryButton(
        CardService.newTextButton()
            .setText("Primary")
            .setOpenLink(CardService.newOpenLink()
                .setUrl("https://www.google.com")))
    .setSecondaryButton(
        CardService.newTextButton()
            .setText("Secondary")
            .setOnClickAction(
                CardService.newAction()
                    .setFunctionName(
                        "secondaryCallback")));

var card = CardService.newCardBuilder()
    // (...)
    .setFixedFooter(fixedFooter)
    .build();

পিক কার্ড

যখন কোনও ব্যবহারকারীর ক্রিয়াকলাপের মাধ্যমে নতুন প্রাসঙ্গিক সামগ্রী ট্রিগার করা হয়, যেমন একটি Gmail বার্তা খোলা, তখন আপনি হয় তাৎক্ষণিকভাবে নতুন প্রাসঙ্গিক সামগ্রী প্রদর্শন করতে পারেন (ডিফল্ট আচরণ) অথবা সাইডবারের নীচে একটি পিক কার্ড বিজ্ঞপ্তি প্রদর্শন করতে পারেন। যদি কোনও ব্যবহারকারী একটি প্রাসঙ্গিক ট্রিগার সক্রিয় থাকাকালীন আপনার হোমপেজে ফিরে যাওয়ার জন্য Back ক্লিক করেন, তাহলে একটি পিক কার্ড ব্যবহারকারীদের প্রাসঙ্গিক সামগ্রী আবার খুঁজে পেতে সহায়তা করে বলে মনে হয়।

নতুন প্রাসঙ্গিক কন্টেন্ট উপলব্ধ হলে পিক কার্ড প্রদর্শনের জন্য, নতুন প্রাসঙ্গিক কন্টেন্ট অবিলম্বে প্রদর্শন করার পরিবর্তে, আপনার CardBuilder ক্লাসে .setDisplayStyle(CardService.DisplayStyle.PEEK) যোগ করুন। একটি পিক কার্ড কেবল তখনই প্রদর্শিত হবে যখন আপনার প্রাসঙ্গিক ট্রিগার সহ একটি একক কার্ড অবজেক্ট ফেরত পাঠানো হবে; অন্যথায়, ফেরত কার্ডগুলি অবিলম্বে বর্তমান কার্ডটি প্রতিস্থাপন করবে।

পিক কার্ডের হেডার কাস্টমাইজ করতে, আপনার প্রাসঙ্গিক কার্ড তৈরি করার সময় একটি স্ট্যান্ডার্ড CardHeader অবজেক্টের সাথে .setPeekCardHeader() পদ্ধতি যোগ করুন। ডিফল্টরূপে, একটি পিক কার্ড হেডারে শুধুমাত্র আপনার অ্যাড-অনের নাম থাকে।

দ্রষ্টব্য: পিক কার্ড মোবাইল অ্যাপে দেখা যায় না।

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

var peekHeader = CardService.newCardHeader()
    .setTitle('Contextual Cat')
    .setImageUrl('https://www.gstatic.com/images/
        icons/material/system/1x/pets_black_48dp.png')
    .setSubtitle(text);

. . .

var card = CardService.newCardBuilder()
    .setDisplayStyle(CardService.DisplayStyle.PEEK)
    .setPeekCardHeader(peekHeader);

তথ্যমূলক উইজেট

তথ্যবহুল উইজেট ব্যবহারকারীর কাছে তথ্য উপস্থাপন করে।

• ছবি — আপনার দেওয়া একটি হোস্ট করা এবং সর্বজনীনভাবে অ্যাক্সেসযোগ্য URL দ্বারা নির্দেশিত একটি ছবি।
• DecoratedText — একটি টেক্সট কন্টেন্ট স্ট্রিং যা আপনি অন্যান্য উপাদান যেমন উপরের এবং নীচের টেক্সট লেবেল এবং একটি ছবি বা আইকনের সাথে যুক্ত করতে পারেন। DecoratedText উইজেটগুলিতে একটি বোতাম বা সুইচ উইজেটও অন্তর্ভুক্ত থাকতে পারে। যুক্ত সুইচগুলি টগল বা চেকবক্স হতে পারে। DecoratedText উইজেটের কন্টেন্ট টেক্সট HTML ফর্ম্যাটিং ব্যবহার করতে পারে; উপরের এবং নীচের লেবেলগুলিতে অবশ্যই প্লেইন টেক্সট ব্যবহার করতে হবে।
• টেক্সট প্যারাগ্রাফ — একটি টেক্সট প্যারাগ্রাফ, যাতে HTML ফর্ম্যাট করা উপাদান থাকতে পারে।

ব্যবহারকারীর ইন্টারঅ্যাকশন উইজেট

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

• কার্ড অ্যাকশন — অ্যাড-অন হেডার বার মেনুতে রাখা একটি মেনু আইটেম। হেডার বার মেনুতে সার্বজনীন অ্যাকশন হিসাবে সংজ্ঞায়িত আইটেমও থাকতে পারে, যা অ্যাড-অন দ্বারা সংজ্ঞায়িত প্রতিটি কার্ডে প্রদর্শিত হয়।
• ডেটটাইম পিকার — উইজেট যা ব্যবহারকারীদের তারিখ, সময়, অথবা উভয়ই নির্বাচন করতে দেয়। আরও তথ্যের জন্য নীচের তারিখ এবং সময় পিকার দেখুন।
• ছবির বোতাম — এমন একটি বোতাম যা লেখার পরিবর্তে একটি ছবি ব্যবহার করে। আপনি বেশ কয়েকটি পূর্বনির্ধারিত আইকনের একটি অথবা এর URL দ্বারা নির্দেশিত একটি সর্বজনীনভাবে হোস্ট করা ছবি ব্যবহার করতে পারেন।
• নির্বাচন ইনপুট — একটি ইনপুট ক্ষেত্র যা বিকল্পগুলির একটি সংগ্রহকে প্রতিনিধিত্ব করে। নির্বাচন ইনপুট উইজেটগুলি চেকবক্স, রেডিও বোতাম বা ড্রপ-ডাউন নির্বাচন বাক্স হিসাবে উপস্থিত হয়।
• সুইচ — একটি টগল উইজেট। আপনি শুধুমাত্র একটি DecoratedText উইজেটের সাথে সুইচ ব্যবহার করতে পারেন। ডিফল্টরূপে এগুলি একটি টগল সুইচ হিসেবে প্রদর্শিত হয়, তবে আপনি এগুলিকে একটি চেকবক্স হিসেবে প্রদর্শন করতে পারেন।
• টেক্সট বোতাম — টেক্সট লেবেল সহ একটি বোতাম। আপনি টেক্সট বোতামের জন্য একটি ব্যাকগ্রাউন্ড কালার ফিল নির্দিষ্ট করতে পারেন (ডিফল্ট স্বচ্ছ)। আপনি প্রয়োজনে বোতামটি অক্ষমও করতে পারেন।
• টেক্সট ইনপুট — একটি টেক্সট ইনপুট ফিল্ড। উইজেটে শিরোনাম টেক্সট, ইঙ্গিত টেক্সট এবং বহু-লাইন টেক্সট থাকতে পারে। টেক্সটের মান পরিবর্তন হলে উইজেটটি অ্যাকশন ট্রিগার করতে পারে।
• গ্রিড — একটি বহু-কলাম লেআউট যা আইটেমের একটি সংগ্রহকে প্রতিনিধিত্ব করে। আপনি একটি ছবি, শিরোনাম, সাবটাইটেল এবং বর্ডার এবং ক্রপ স্টাইলের মতো বিভিন্ন কাস্টমাইজেশন বিকল্পের মাধ্যমে আইটেমগুলিকে উপস্থাপন করতে পারেন।

DecoratedText চেকবক্স

আপনি একটি DecoratedText উইজেট সংজ্ঞায়িত করতে পারেন যার একটি বাটন বা বাইনারি টগল সুইচের পরিবর্তে একটি চেকবক্স সংযুক্ত থাকে। সুইচের মতো, চেকবক্সের মান অ্যাকশন ইভেন্ট অবজেক্টে অন্তর্ভুক্ত থাকে যা setOnClickAction(action) পদ্ধতি দ্বারা এই DecoratedText এর সাথে সংযুক্ত Action পাস করা হয়।

নিচের কোডের অংশে দেখানো হয়েছে কিভাবে একটি চেকবক্স DecoratedText উইজেট সংজ্ঞায়িত করতে হয়, যা আপনি একটি কার্ডে যোগ করতে পারেন:

var decoratedText = CardService.newDecoratedText()
    // (...)
    .setSwitch(CardService.newSwitch()
        .setFieldName('form_input_switch_key')
        .setValue('switch_is_on')
        .setControlType(
            CardService.SwitchControlType.CHECK_BOX));

তারিখ এবং সময় বাছাইকারী

আপনি এমন উইজেট সংজ্ঞায়িত করতে পারেন যা ব্যবহারকারীদের একটি সময়, একটি তারিখ, অথবা উভয়ই নির্বাচন করতে দেয়। আপনি setOnChangeAction() ব্যবহার করে একটি উইজেট হ্যান্ডলার ফাংশন নির্ধারণ করতে পারেন যা পিকারের মান পরিবর্তন হলে কার্যকর করা হবে।

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

var dateOnlyPicker = CardService.newDatePicker()
    .setTitle("Enter a date")
    .setFieldName("date_field")
    // Set default value as May 24 2019. Either a
    // number or string is acceptable.
    .setValueInMsSinceEpoch(1558668600000)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleDateChange"));

var timeOnlyPicker = CardService.newTimePicker()
    .setTitle("Enter a time")
    .setFieldName("time_field")
    // Set default value as 23:30.
    .setHours(23)
    .setMinutes(30)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleTimeChange"));

var dateTimePicker = CardService.newDateTimePicker()
    .setTitle("Enter a date and time")
    .setFieldName("date_time_field")
    // Set default value as May 24 2019 03:30 AM UTC.
    // Either a number or string is acceptable.
    .setValueInMsSinceEpoch(1558668600000)
    // EDT time is 4 hours behind UTC.
    .setTimeZoneOffsetInMins(-4 * 60)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleDateTimeChange"));

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

function handleDateTimeChange(event) {
  var dateTimeInput =
    event.commonEventObject.formInputs["myDateTimePickerWidgetID"];
  var msSinceEpoch = dateTimeInput.msSinceEpoch;
  var hasDate = dateTimeInput.hasDate;
  var hasTime = dateTimeInput.hadTime;

  // The following requires you to configure the add-on to read user locale
  // and timezone.
  // See https://developers.google.com/workspace/add-ons/how-tos/access-user-locale
  var userTimezoneId = event.userTimezone.id;

  // Format and log the date-time selected using the user's timezone.
  var formattedDateTime;
  if (hasDate && hasTime) {
    formattedDateTime = Utilities.formatDate(
      new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd hh:mm:ss");
  } else if (hasDate) {
    formattedDateTime = Utilities.formatDate(
      new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd")
      + ", Time unspecified";
  } else if (hasTime) {
    formattedDateTime = "Date unspecified, "
      + Utilities.formatDate(
          new Date(msSinceEpoch), userTimezoneId, "hh:mm a");
  }

  if (formattedDateTime) {
    console.log(formattedDateTime);
  }
}

নিচের টেবিলে ডেস্কটপ এবং মোবাইল ডিভাইসে পিকার নির্বাচন UI-এর উদাহরণ দেখানো হয়েছে। নির্বাচন করা হলে, তারিখ চয়নকারী একটি মাস-ভিত্তিক ক্যালেন্ডার UI খোলে যাতে ব্যবহারকারী দ্রুত একটি নতুন তারিখ নির্বাচন করতে পারেন।

যখন ব্যবহারকারী ডেস্কটপ ডিভাইসে সময় বাছাইকারী নির্বাচন করেন, তখন একটি ড্রপ-ডাউন মেনু খোলে যেখানে ব্যবহারকারী ৩০ মিনিটের ব্যবধানে আলাদা করে সময়ের তালিকা প্রকাশ করা হয়। ব্যবহারকারী একটি নির্দিষ্ট সময়ও টাইপ করতে পারেন। মোবাইল ডিভাইসে সময় বাছাইকারী নির্বাচন করলে বিল্ট-ইন মোবাইল "ঘড়ি" সময় বাছাইকারী খোলে।

ডেস্কটপ	মোবাইল

গ্রিড

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

আপনি একটি গ্রিড আইটেম কনফিগার করতে পারেন যার মধ্যে একটি শনাক্তকারী থাকে যা গ্রিডে সংজ্ঞায়িত অ্যাকশনের প্যারামিটার হিসেবে ফিরে আসে।

var gridItem = CardService.newGridItem()
  .setIdentifier("item_001")
  .setTitle("Lucian R.")
  .setSubtitle("Chief Information Officer")
  .setImage(imageComponent);

var cropStyle = CardService.newImageCropStyle()
  .setImageCropType(CardService.ImageCropType.RECTANGLE_4_3);

var imageComponent = CardService.newImageComponent()
  .setImageUrl("https://developers.google.com/workspace/
      images/cymbal/people/person1.jpeg")
  .setCropStyle(cropStyle)

var grid = CardService.newGrid()
  .setTitle("Recently viewed")
  .addItem(gridItem)
  .setNumColumns(2)
  .setOnClickAction(CardService.newAction()
    .setFunctionName("handleGridItemClick"));

টেক্সট ফর্ম্যাটিং

কিছু টেক্সট-ভিত্তিক উইজেট সহজ টেক্সট HTML ফর্ম্যাটিং সমর্থন করতে পারে। এই উইজেটগুলির টেক্সট কন্টেন্ট সেট করার সময়, কেবল সংশ্লিষ্ট HTML ট্যাগগুলি অন্তর্ভুক্ত করুন।

সমর্থিত ট্যাগ এবং তাদের উদ্দেশ্য নিম্নলিখিত টেবিলে দেখানো হয়েছে:

বিন্যাস	উদাহরণ	রেন্ডার করা ফলাফল
বোল্ড	"This is <b>bold</b>."	এটা সাহসী ।
তির্যক	"This is <i>italics</i>."	এটি তির্যক ।
আন্ডারলাইন করুন	"This is <u>underline</u>."	এটি আন্ডারলাইন ।
স্ট্রাইকথ্রু	"This is <s>strikethrough</s>."	এটি স্ট্রাইকথ্রু ।
ফন্টের রঙ	"This is <font color=\"#FF0000\">red font</font>."	এটি লাল ফন্ট ।
হাইপারলিঙ্ক	"This is a <a href=\"https://www.google.com\">hyperlink</a>."	এটি একটি হাইপারলিঙ্ক ।
সময়	"This is a time format: <time>2023-02-16 15:00</time>."	এটি একটি সময় বিন্যাস: ২০২৩-০২-১৬ ১৫:০০ .
নিউলাইন	"This is the first line. <br> This is a new line. "	এটি প্রথম লাইন। এটি একটি নতুন লাইন।