উইজেট

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

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

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

উইজেটের প্রকারভেদ

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

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

কাঠামোগত উইজেটগুলো UI-তে ব্যবহৃত অন্যান্য উইজেটগুলোর জন্য ধারক ও বিন্যাস প্রদান করে।

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

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

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

স্থির ফুটার

আপনি আপনার কার্ডের নীচে বাটনগুলির একটি স্থির সারি যোগ করতে পারেন। এই সারিটি কার্ডের বাকি বিষয়বস্তুর সাথে নড়াচড়া বা স্ক্রল করে না।

নিম্নলিখিত কোড অংশটি দেখায় কিভাবে একটি উদাহরণ ফিক্সড ফুটার সংজ্ঞায়িত করতে হয় এবং এটিকে একটি কার্ডে যুক্ত করতে হয়:

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 arrow_back ক্লিক করেন, তাহলে ব্যবহারকারীদের প্রাসঙ্গিক বিষয়বস্তুটি পুনরায় খুঁজে পেতে সাহায্য করার জন্য একটি পিক কার্ড প্রদর্শিত হয়।

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

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

Cats Google Workspace অ্যাড-অন কুইকস্টার্ট- এর উপর ভিত্তি করে, নিম্নলিখিত কোডটি একটি Peek কার্ডের মাধ্যমে ব্যবহারকারীদের নতুন প্রাসঙ্গিক কন্টেন্ট সম্পর্কে অবহিত করে এবং নির্বাচিত Gmail মেসেজ থ্রেডের সাবজেক্ট প্রদর্শন করার জন্য Peek কার্ডের হেডারটি কাস্টমাইজ করে।

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

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

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

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

ব্যবহারকারীর মিথস্ক্রিয়া উইজেট

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

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

DecoratedText চেকবক্স

আপনি বাটন বা বাইনারি টগল সুইচের পরিবর্তে একটি চেকবক্স সংযুক্ত একটি DecoratedText উইজেট সংজ্ঞায়িত করতে পারেন। টগল সুইচের মতোই, setOnClickAction মেথডের মাধ্যমে এই 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"));

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

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

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