किसी चरण के लिए कॉन्फ़िगरेशन कार्ड बनाना

इस गाइड में, कॉन्फ़िगरेशन कार्ड बनाने का तरीका बताया गया है. इसकी मदद से, उपयोगकर्ता Google Workspace Studio में किसी चरण को अपनी पसंद के मुताबिक बना सकते हैं और उसके लिए इनपुट दे सकते हैं.

आम तौर पर, कॉन्फ़िगरेशन कार्ड बनाने के लिए, आपको कार्ड इंटरफ़ेस बनाना होता है. यह इंटरफ़ेस, किसी अन्य Google Workspace ऐड-ऑन के लिए बनाए गए इंटरफ़ेस की तरह ही होता है. कॉन्फ़िगरेशन कार्ड इंटरफ़ेस बनाने में मदद पाने के लिए, यहां जाएं:

  • कार्ड बिल्डर, एक इंटरैक्टिव टूल है. इसकी मदद से, कार्ड बनाए और तय किए जा सकते हैं.
  • Google Workspace ऐड-ऑन एपीआई के रेफ़रंस दस्तावेज़ में कार्ड.
  • Card Service, Apps Script की एक ऐसी सेवा है जिसकी मदद से स्क्रिप्ट, कार्ड कॉन्फ़िगर और बिल्ड कर सकती हैं.
  • Google Workspace ऐड-ऑन डेवलपर के दस्तावेज़ में, कार्ड पर आधारित इंटरफ़ेस.

कुछ कार्ड विजेट में, Workspace Studio के लिए खास तौर पर तैयार की गई सुविधाएं और फ़ंक्शन होते हैं. इनके बारे में इस गाइड में बताया गया है.

कॉन्फ़िगरेशन कार्ड तय करना

Apps Script मेनिफ़ेस्ट और कोड, दोनों में कॉन्फ़िगरेशन कार्ड तय करें.

यहां एक कॉन्फ़िगरेशन कार्ड बनाने का तरीका बताया गया है. इसमें उपयोगकर्ताओं से 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"
          }
        }
      ]
    }
  }
}

कोड में बदलाव करें

ऐप्लिकेशन कोड में, कार्ड वापस करें.

Apps Script

/**
 * 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 का सुझाव दे सकता है. ज़्यादा से ज़्यादा 100 आइटम के नाम अपने-आप पूरे हो सकते हैं.

अपने-आप भरने वाले सुझाव, इन डेटा सोर्स से मिल सकते हैं:

  • सर्वर-साइड ऑटोकंप्लीट: सुझाव, तीसरे पक्ष या बाहरी डेटा सोर्स से मिलते हैं. यह डेटा सोर्स, आपको तय करना होता है.
  • Google Workspace का डेटा: सुझाव, Google Workspace के सोर्स से जनरेट किए जाते हैं. जैसे, Google Workspace के उपयोगकर्ता या Google Chat स्पेस.

सर्वर-साइड ऑटोकंप्लीट

किसी बाहरी डेटा सोर्स से सुझाव अपने-आप पूरे होने की सुविधा के लिए, SelectionInput विजेट को कॉन्फ़िगर किया जा सकता है. उदाहरण के लिए, कस्टमर रिलेशनशिप मैनेजमेंट (सीआरएम) सिस्टम से मिली सेल्स लीड की सूची में से, उपयोगकर्ताओं को कोई लीड चुनने में मदद की जा सकती है.

सर्वर-साइड पर अपने-आप पूरा होने की सुविधा लागू करने के लिए, आपको ये काम करने होंगे:

  1. डेटा सोर्स तय करें: SelectionInput विजेट में, DataSourceConfig जोड़ें. इससे RemoteDataSource के बारे में पता चलता है. यह कॉन्फ़िगरेशन, Apps Script के उस फ़ंक्शन की ओर इशारा करता है जो ऑटोकंप्लीट के सुझावों को फ़ेच करता है.
  2. अपने-आप पूरा होने की सुविधा लागू करें: यह सुविधा तब ट्रिगर होती है, जब उपयोगकर्ता इनपुट फ़ील्ड में टाइप करता है. फ़ंक्शन को उपयोगकर्ता के इनपुट के आधार पर, आपके बाहरी डेटा सोर्स से क्वेरी करनी चाहिए और सुझावों की सूची दिखानी चाहिए.

यहां दिए गए उदाहरण में, सर्वर-साइड पर अपने-आप पूरा होने की सुविधा के लिए SelectionInput विजेट को कॉन्फ़िगर करने का तरीका बताया गया है:

Apps Script

// 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. यह ज़रूरी फ़ॉर्मैट में ज़्यादा से ज़्यादा 100 सुझाव देता है.

यहां दिए गए उदाहरण में, उपयोगकर्ता की क्वेरी के आधार पर सुझाव देने के लिए, handleAutocompleteRequest() फ़ंक्शन को लागू करने का तरीका बताया गया है:

Apps Script

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

कार्ड से जुड़ी ज़रूरी बातें और सीमाएं