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

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

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

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

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

कुछ कार्ड विजेट में, Workspace Flows से जुड़ी खास सुविधाएं होती हैं. इनके बारे में इस गाइड में बताया गया है.

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

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

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

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

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

Apps Script

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

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

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

कुछ कार्ड विजेट में, Workspace Flows से जुड़ी खास सुविधाएं होती हैं. इनके बारे में यहां बताया गया है.

TextInput और SelectionInput

TextInput और SelectionInput विजेट में, Workspace Flows की ये सुविधाएं उपलब्ध हैं:

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

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

Apps Script

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

TextInput और SelectionInput

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

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