একটি ধাপের জন্য একটি কনফিগারেশন কার্ড তৈরি করুন

এই নির্দেশিকায় ব্যাখ্যা করা হয়েছে কীভাবে একটি কনফিগারেশন কার্ড তৈরি করতে হয়, যা ব্যবহারকারীদের গুগল ওয়ার্কস্পেস স্টুডিও-এর কোনো একটি ধাপ কাস্টমাইজ করতে এবং তার জন্য ইনপুট প্রদান করতে দেয়।

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

  • কার্ড বিল্ডার , একটি ইন্টারেক্টিভ টুল যা আপনাকে কার্ড তৈরি ও সংজ্ঞায়িত করতে সাহায্য করে।
  • গুগল ওয়ার্কস্পেস অ্যাড-অন এপিআই রেফারেন্স ডকুমেন্টেশনে কার্ড
  • কার্ড সার্ভিস , একটি অ্যাপস স্ক্রিপ্ট সার্ভিস যা স্ক্রিপ্টকে কার্ড কনফিগার ও বিল্ড করতে দেয়।
  • গুগল ওয়ার্কস্পেস অ্যাড-অন ডেভেলপার ডকুমেন্টেশনে কার্ড-ভিত্তিক ইন্টারফেস

কিছু কার্ড উইজেটে ওয়ার্কস্পেস স্টুডিও-নির্দিষ্ট বিশেষ কার্যকারিতা ও বৈশিষ্ট্য রয়েছে, যা এই নির্দেশিকায় বিস্তারিতভাবে বর্ণনা করা হয়েছে।

একটি কনফিগারেশন কার্ড সংজ্ঞায়িত করুন

অ্যাপস স্ক্রিপ্ট ম্যানিফেস্ট এবং কোড উভয় স্থানেই একটি কনফিগারেশন কার্ড সংজ্ঞায়িত করুন।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এমন একটি কনফিগারেশন কার্ড তৈরি করতে হয় যা ব্যবহারকারীদের একটি গুগল চ্যাট স্পেস বেছে নিতে বলে।

ম্যানিফেস্ট ফাইলটি সম্পাদনা করুন

ম্যানিফেস্ট ফাইলে workflowElements সংজ্ঞায়িত করুন।

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Chat space selector",
      "logoUrl": "https://www.gstatic.com/images/branding/productlogos/gsuite_addons/v6/web-24dp/logo_gsuite_addons_color_1x_web_24dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "actionElement",
          "state": "ACTIVE",
          "name": "Chat space selector",
          "description": "Lets the user select a space from Google  Chat",
          "workflowAction": {
            "inputs": [
              {
                "id": "chooseSpace",
                "description": "Choose a Chat space",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfigSpacePicker",
            "onExecuteFunction": "onExecuteSpacePicker"
          }
        }
      ]
    }
  }
}

কোডটি সম্পাদনা করুন

অ্যাপ্লিকেশন কোডে একটি কার্ড রিটার্ন করুন।

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

/**
 * Generates and displays a configuration card to choose a Chat space
 */
function onConfigSpacePicker() {

  const selectionInput = CardService.newSelectionInput()
    .setTitle("First Value")
    .setFieldName("chooseSpace")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.SPACE)
            )
        )
    );

  const cardSection = CardService.newCardSection()
    .setHeader("Select Chat Space")
    .setId("section_1")
    .addWidget(selectionInput)

  var card = CardService.newCardBuilder()
    .addSection(cardSection)
    .build();

  return card;
}

function onExecuteSpacePicker(e) {
}

ইনপুট উইজেটগুলির জন্য অটোকমপ্লিট সেট আপ করুন

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

অটোকমপ্লিট সাজেশনগুলো নিম্নলিখিত ডেটা উৎসগুলো থেকে আসতে পারে:

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

সার্ভার-সাইড অটোকমপ্লিট

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

সার্ভার-সাইড অটোকমপ্লিট বাস্তবায়ন করতে, আপনাকে যা করতে হবে তা হলো:

  1. ডেটা সোর্স নির্ধারণ করুন: SelectionInput উইজেটে, একটি DataSourceConfig যোগ করুন যা একটি RemoteDataSource নির্দিষ্ট করে। এই কনফিগারেশনটি একটি Apps Script ফাংশনকে নির্দেশ করে যা অটোকমপ্লিট সাজেশনগুলো সংগ্রহ করে।
  2. অটোকমপ্লিট ফাংশনটি বাস্তবায়ন করুন: ব্যবহারকারী ইনপুট ফিল্ডে টাইপ করলে এই ফাংশনটি চালু হবে। ফাংশনটির কাজ হলো ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে আপনার এক্সটার্নাল ডেটা সোর্স থেকে তথ্য সংগ্রহ করা এবং সাজেশনের একটি তালিকা ফেরত দেওয়া।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে সার্ভার-সাইড অটোকমপ্লিটের জন্য একটি SelectionInput উইজেট কনফিগার করতে হয়:

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

// In your onConfig function:
var multiSelect1 =
  CardService.newSelectionInput()
    .setFieldName("value1")
    .setTitle("Server Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .addDataSourceConfig(
      CardService.newDataSourceConfig()
        .setRemoteDataSource(
          CardService.newAction().setFunctionName('getAutocompleteResults')
        )
    )
    .addDataSourceConfig(
      CardService.newDataSourceConfig()
        .setPlatformDataSource(
          CardService.newPlatformDataSource()
            .setHostAppDataSource(
              CardService.newHostAppDataSource()
                .setWorkflowDataSource(
                  CardService.newWorkflowDataSource()
                    .setIncludeVariables(true)
                ))
        )
    );

// ... add widget to card ...

স্বয়ংক্রিয় সম্পূর্ণতার অনুরোধটি পরিচালনা করুন

setFunctionName এ নির্দিষ্ট করা ফাংশনটি (যেমন, getAutocompleteResults ) ব্যবহারকারী ফিল্ডে টাইপ করলে একটি ইভেন্ট অবজেক্ট গ্রহণ করে। এই ফাংশনটির অবশ্যই নিম্নলিখিত বৈশিষ্ট্যগুলো থাকতে হবে:

  1. event.workflow.elementUiAutocomplete.invokedFunction টি প্রত্যাশিত ফাংশনের নামের সাথে মিলছে কিনা তা পরীক্ষা করুন।
  2. event.workflow.elementUiAutocomplete.query থেকে ব্যবহারকারীর ইনপুট নিন।
  3. কোয়েরিটি ব্যবহার করে বাহ্যিক ডেটা উৎস থেকে তথ্য সংগ্রহ করুন।
  4. প্রয়োজনীয় বিন্যাসে সর্বোচ্চ ১০০টি পরামর্শ ফেরত দিন।

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কিভাবে ব্যবহারকারীর কোয়েরির উপর ভিত্তি করে সাজেশন ফেরত দেওয়ার জন্য handleAutocompleteRequest() ফাংশনটি প্রয়োগ করতে হয়:

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

function handleAutocompleteRequest(event) {
  var invokedFunction = event.workflow.elementUiAutocomplete.invokedFunction;
  var query = event.workflow.elementUiAutocomplete.query;

  if (invokedFunction != "getAutocompleteResults" || query == undefined || query == "") {
    return {};
  }

  // Query your data source to get results based on the query
  let autocompleteResponse = AddOnsResponseService.newUpdateWidget()
    .addSuggestion(
      query + " option 1",
      query + "_option1",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 1 bottom text"
    )
    .addSuggestion(
      query + " option 2",
      query + "_option2",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 2 bottom text"
    ).addSuggestion(
      query + " option 3",
      query + "_option3",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 3 bottom text"
    );

  const modifyAction = AddOnsResponseService.newAction()
    .addModifyCard(
      AddOnsResponseService.newModifyCard()
        .setUpdateWidget(autocompleteResponse)
    );

  return AddOnsResponseService.newRenderActionBuilder()
    .setAction(modifyAction)
    .build();
}

// In your onConfig function, handle the autocomplete event
function onConfigAutocompleteTest(event) {
  // Handle autocomplete request
  if (event.workflow && event.workflow.elementUiAutocomplete) {
    return handleAutocompleteRequest(event);
  }

  // ... rest of your card building logic ...
}

কার্ডের বিবেচ্য বিষয় এবং সীমাবদ্ধতা