इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

इस गाइड में, कॉन्फ़िगरेशन कार्ड बनाने का तरीका बताया गया है. इसकी मदद से, उपयोगकर्ता 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 विजेट को कॉन्फ़िगर किया जा सकता है. उदाहरण के लिए, कस्टमर रिलेशनशिप मैनेजमेंट (सीआरएम) सिस्टम से मिली सेल्स लीड की सूची में से, उपयोगकर्ताओं को कोई लीड चुनने में मदद की जा सकती है.

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

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

यहां दिए गए उदाहरण में, सर्वर-साइड पर अपने-आप पूरा होने की सुविधा के लिए 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) को तब एक इवेंट ऑब्जेक्ट मिलता है, जब उपयोगकर्ता फ़ील्ड में टाइप करता है. इस फ़ंक्शन में यह जानकारी शामिल होनी चाहिए:

event.workflow.elementUiAutocomplete.invokedFunction की जांच करें, ताकि यह पक्का किया जा सके कि यह फ़ंक्शन के नाम से मेल खाता हो.
event.workflow.elementUiAutocomplete.query से उपयोगकर्ता का इनपुट पाएं.
क्वेरी का इस्तेमाल करके, बाहरी डेटा सोर्स से क्वेरी करें.
यह ज़रूरी फ़ॉर्मैट में ज़्यादा से ज़्यादा 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 ...
}

Google Workspace के डेटा के लिए अपने-आप भरने की सुविधा

उपयोगकर्ता के Google Workspace एनवायरमेंट में मौजूद डेटा से, अपने-आप पूरे होने वाले सुझाव भी दिखाए जा सकते हैं:

Google Workspace के उपयोगकर्ता: एक ही Google Workspace संगठन के उपयोगकर्ताओं की जानकारी अपने-आप भर जाती है.
Google Chat स्पेस: Google Chat के उन स्पेस की जानकारी भरें जिनमें उपयोगकर्ता सदस्य है.

इसे कॉन्फ़िगर करने के लिए, SelectionInput विजेट में PlatformDataSource को सेट करें. साथ ही, WorkflowDataSourceType को USER या SPACE के तौर पर सेट करें.

Apps Script

// 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 विजेट हैं. इनमें सर्वर-साइड, उपयोगकर्ता, और स्पेस के लिए अपने-आप पूरा होने की सुविधा दिखाई गई है:

JSON

json { "timeZone": "America/Los_Angeles", "exceptionLogging": "STACKDRIVER", "runtimeVersion": "V8", "addOns": { "common": { "name": "Autocomplete Demo", "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png", "useLocaleFromApp": true }, "flows": { "workflowElements": [ { "id": "autocomplete_demo", "state": "ACTIVE", "name": "Autocomplete Demo", "description": "Provide autocompletion in input fields", "workflowAction": { "inputs": [ { "id": "value1", "description": "A multi-select field with autocompletion", "cardinality": "SINGLE", "dataType": { "basicType": "STRING" } } ], "onConfigFunction": "onConfigAutocomplete", "onExecuteFunction": "onExecuteAutocomplete" } } ] } } }

Apps Script

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

Workspace Studio की खास सुविधाएं

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

TextInput और SelectionInput

TextInput और SelectionInput विजेट में, Workspace Studio के लिए खास तौर पर बनाई गई ये सुविधाएं उपलब्ध हैं:

includeVariables: यह एक बूलियन प्रॉपर्टी है. इसकी मदद से, उपयोगकर्ता पिछले चरणों से वैरिएबल चुन सकते हैं. बाद के चरणों में वैरिएबल पिकर को दिखाने के लिए, शुरुआती इवेंट और उससे जुड़ा कम से कम एक आउटपुट वैरिएबल, दोनों को वैरिएबल से मैप किया जाना चाहिए.
type: यह एक ऐसी वैल्यू है जो अपने-आप पूरे होने वाले सुझावों को दिखाती है. इस्तेमाल की जा सकने वाली वैल्यू में ये शामिल हैं:
- USER: यह सुविधा, उपयोगकर्ता के संपर्कों में मौजूद लोगों के लिए, अपने-आप पूरे होने वाले सुझाव देती है.
- SPACE: यह कुकी, Google Chat के उन स्पेस के लिए अपने-आप पूरा होने वाले सुझाव देती है जिनमें उपयोगकर्ता शामिल है.

includeVariables और type, दोनों को सेट करने पर, इनपुट फ़ील्ड में दोनों की सुविधाएं एक साथ मिलती हैं. उपयोगकर्ता, ड्रॉप-डाउन मेन्यू से मैचिंग type का कोई वैरिएबल चुन सकते हैं. साथ ही, उसके लिए अपने-आप दिखने वाले सुझाव देख सकते हैं.

पहली इमेज: कोई उपयोगकर्ता, स्पेस चुनते समय अपने-आप दिखने वाले सुझावों की समीक्षा करता है.
दूसरी इमेज: इसमें दिखाया गया है कि कोई उपयोगकर्ता, ➕वैरिएबल ड्रॉप-डाउन से पिछले चरण के आउटपुट वैरिएबल को चुन रहा है.

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

कार्ड नेविगेशन जैसे कि popCard(), pushCard(), और updateCard(), ऐसे ऐड-ऑन में काम नहीं करते जो एजेंट की सुविधाओं को बढ़ाते हैं.
जब वैरिएबल पिकर में SelectionInput का इस्तेमाल किया जाता है, तो विजेट सिर्फ़ "type": "MULTI_SELECT" के साथ काम करते हैं. कॉन्फ़िगरेशन कार्ड में मौजूद अन्य जगहों पर, SelectionInput, SelectionType की सभी वैल्यू के साथ काम करता है.

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

मेनिफ़ेस्ट फ़ाइल में बदलाव करना

JSON

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

Apps Script

इनपुट विजेट के लिए ऑटोकंप्लीट की सुविधा सेट अप करना

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

Apps Script

अपने-आप पूरी होने वाली क्वेरी के अनुरोध को मैनेज करना

Apps Script

Google Workspace के डेटा के लिए अपने-आप भरने की सुविधा

Apps Script

उदाहरण: अपने-आप पूरे होने की सुविधा के टाइप को जोड़ना

JSON

Apps Script

Workspace Studio की खास सुविधाएं

TextInput और SelectionInput

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

मिलते-जुलते विषय