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

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

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

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

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

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

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

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

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

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

JSON সম্পর্কে

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Sample add-on",
      "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": "onExecuteCalculate"
          }
        }
      ]
    }
  }
}

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

অ্যাপ্লিকেশন কোডে, একটি কার্ড ফেরত দিন।

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

/**
* Generates and displays a configuration card to choose a Chat space
  */
function onConfigSpacePicker() {
  var card = {
    "sections": [
      {
        "header": "Choose a Chat space",
        "widgets": [
          {
            "selectionInput": {
              "name": "value1",
              "label": "First value",
              "type": "MULTI_SELECT",
              "platformDataSource": {
                "hostAppDataSource": {
                  "workflowDataSource": {
                    "includeVariables": true,
                    "type": "SPACE"
                  }
                }
              }
            }
          }
        ]
      }
    ]
  };
  return {
    "action": {
      "navigations": [{
        "push_card": card
      }]
    }
  };
}

ইনপুট উইজেটের জন্য স্বয়ংসম্পূর্ণ সেট আপ করুন

ব্যবহারকারীদের বিকল্পগুলির তালিকা থেকে নির্বাচন করতে সাহায্য করার জন্য আপনি 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
  var autocompleteResponse = [
    {
      "text": query + " option 1",
      "value": query + "_option1",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    },
    {
      "text": query + " option 2",
      "value": query + "_option2",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "bottom_text": "subtitle of option 2"
    },
    {
      "text": query + " option 3",
      "value": query + "_option3",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    }
  ];

  var response = {
    "action": {
      "modify_operations": [
        {
          "update_widget": {
            "selection_input_widget_suggestions": {
              "suggestions": autocompleteResponse
            }
          }
        }
      ]
    }
  };
  return response;
}

// 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 ...
}

Google Workspace ডেটা অটোমেটিক পূরণ করা

আপনি ব্যবহারকারীর Google Workspace পরিবেশের মধ্যে থাকা ডেটা থেকে অটোকম্পলিট পরামর্শগুলিও পূরণ করতে পারেন:

  • Google Workspace ব্যবহারকারী: একই Google Workspace প্রতিষ্ঠানের মধ্যে ব্যবহারকারীদের নিয়োগ করুন।
  • গুগল চ্যাট স্পেস: ব্যবহারকারী যে গুগল চ্যাট স্পেসের সদস্য, সেগুলি পূরণ করুন।

এটি কনফিগার করার জন্য, SelectionInput উইজেটে PlatformDataSource সেট করুন, WorkflowDataSourceType কে USER অথবা SPACE হিসেবে উল্লেখ করুন।

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

// User Autocomplete
var multiSelect2 =
  CardService.newSelectionInput()
    .setFieldName("value2")
    .setTitle("User Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.USER)
            ))
    );

// Chat Space Autocomplete
var multiSelect3 =
  CardService.newSelectionInput()
    .setFieldName("value3")
    .setTitle("Chat Space Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.SPACE)
            ))
    );

উদাহরণ: স্বয়ংক্রিয়ভাবে সম্পূর্ণ হওয়ার ধরণ একত্রিত করা

নিচের উদাহরণে একটি onConfig ফাংশন দেখানো হয়েছে যা তিনটি SelectionInput উইজেট সহ একটি কার্ড তৈরি করে, যা সার্ভার-সাইড, ব্যবহারকারী এবং স্পেস অটোকম্পলিট প্রদর্শন করে:

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

function onConfigAutocompleteTest(event) {
  // Handle autocomplete request
  if (event.workflow && event.workflow.elementUiAutocomplete) {
    return handleAutocompleteRequest(event);
  }

  // Server-side autocomplete widget
  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)
                  ))
          )
      );

  // User autocomplete widget
  var multiSelect2 =
    CardService.newSelectionInput()
      .setFieldName("value2")
      .setTitle("User Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .setPlatformDataSource(
        CardService.newPlatformDataSource()
          .setHostAppDataSource(
            CardService.newHostAppDataSource()
              .setWorkflowDataSource(
                CardService.newWorkflowDataSource()
                  .setIncludeVariables(true)
                  .setType(CardService.WorkflowDataSourceType.USER)
              ))
      );

  // Space autocomplete widget
  var multiSelect3 =
    CardService.newSelectionInput()
      .setFieldName("value3")
      .setTitle("Chat Space Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .setPlatformDataSource(
        CardService.newPlatformDataSource()
          .setHostAppDataSource(
            CardService.newHostAppDataSource()
              .setWorkflowDataSource(
                CardService.newWorkflowDataSource()
                  .setIncludeVariables(true)
                  .setType(CardService.WorkflowDataSourceType.SPACE)
              ))
      );

  var sectionBuilder =
    CardService.newCardSection()
      .addWidget(multiSelect1)
      .addWidget(multiSelect2)
      .addWidget(multiSelect3);

  var card =
    CardService.newCardBuilder()
      .addSection(sectionBuilder)
      .build();
  return card;
}

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
  var autocompleteResponse = [
    {
      "text": query + " option 1",
      "value": query + "_option1",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    },
    {
      "text": query + " option 2",
      "value": query + "_option2",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "bottom_text": "subtitle of option 2"
    },
    {
      "text": query + " option 3",
      "value": query + "_option3",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    }
  ];

  var response = {
    "action": {
      "modify_operations": [
        {
          "update_widget": {
            "selection_input_widget_suggestions": {
              "suggestions": autocompleteResponse
            }
          }
        }
      ]
    }
  };
  return response;
}

কর্মক্ষেত্র প্রবাহ-নির্দিষ্ট বৈশিষ্ট্য

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

টেক্সটইনপুট এবং সিলেকশনইনপুট

TextInput এবং SelectionInput উইজেটগুলিতে এই Workspace Flows-নির্দিষ্ট বৈশিষ্ট্যগুলি রয়েছে:

  • includeVariables : একটি বুলিয়ান প্রোপার্টি যা ব্যবহারকারীদের পূর্ববর্তী ধাপগুলি থেকে ভেরিয়েবল নির্বাচন করতে দেয়।
  • type : একটি গণনাকৃত মান যা পরামর্শগুলিকে স্বয়ংক্রিয়ভাবে সম্পূর্ণ করে। সমর্থিত মানগুলির মধ্যে রয়েছে:
    • USER : ব্যবহারকারীর পরিচিতিতে থাকা ব্যক্তিদের জন্য স্বয়ংসম্পূর্ণ পরামর্শ প্রদান করে।
    • SPACE : ব্যবহারকারী যে Google Chat স্পেসের সদস্য, তার জন্য স্বয়ংক্রিয়ভাবে সম্পূর্ণ করার পরামর্শ প্রদান করে।

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

  • Google Chat স্পেসের জন্য অটোকম্পলিট সাজেশন।
    চিত্র ১: একজন ব্যবহারকারী স্থান নির্বাচন করার সময় স্বয়ংসম্পূর্ণ পরামর্শ পর্যালোচনা করেন।
  • ভেরিয়েবল মেনু ব্যবহারকারীদের পূর্ববর্তী ধাপগুলি থেকে আউটপুট ভেরিয়েবল নির্বাচন করতে দেয়।
    চিত্র ২: একজন ব্যবহারকারী ➕ভেরিয়েবল ড্রপ-ডাউন থেকে পূর্ববর্তী ধাপের আউটপুট ভেরিয়েবল নির্বাচন করেন।

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

  • popCard() , pushCard() , এবং updateCard() মতো কার্ড নেভিগেশনগুলি ফ্লো এক্সটেন্ড করা অ্যাড-অনগুলিতে সমর্থিত নয়।

  • যখন SelectionInput একটি ভেরিয়েবল পিকারে ব্যবহার করা হয়, তখন উইজেটগুলি কেবল "type": "MULTI_SELECT" । কনফিগারেশন কার্ডের অন্য কোথাও, SelectionInput SelectionType এর সমস্ত মান সমর্থন করে।