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

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

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

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

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

একটি কনফিগারেশন কার্ড নির্ধারণ করুন

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

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

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

ম্যানিফেস্ট ফাইলে, 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 স্বয়ংক্রিয়ভাবে প্রস্তাব করতে পারে। আপনি ১০০টি পর্যন্ত আইটেম স্বয়ংক্রিয়ভাবে সম্পূর্ণ করতে পারেন।

স্বয়ংক্রিয়ভাবে সম্পূর্ণ করার পরামর্শ নিম্নলিখিত ডেটা উৎস থেকে আসতে পারে:

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

সার্ভার-সাইড স্বয়ংসম্পূর্ণ

আপনি একটি 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 ...
}

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