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

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

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

वैरिएबल पिकर के बटनों को पसंद के मुताबिक बनाना

बटन का साइज़ और लेबल सेट करके, वैरिएबल पिकर बटन को पसंद के मुताबिक बनाया जा सकता है.

बटन आकार

बटन का साइज़ सेट करने के लिए, setVariableButtonSize() का इस्तेमाल करें. साथ ही, इनमें से किसी एक VariableButtonSize ईनम का इस्तेमाल करें:

UNSPECIFIED: यह डिफ़ॉल्ट वैल्यू है. यह बटन, साइड पैनल में छोटा दिखता है और अन्य जगहों पर पूरा दिखता है.
COMPACT: बटन पर सिर्फ़ प्लस का निशान (+) दिखता है.
FULL_SIZE: बटन पर पूरा टेक्स्ट लेबल दिखता है.

बटन का लेबल

बटन का टेक्स्ट सेट करने के लिए, setVariableButtonLabel() का इस्तेमाल करें.

उदाहरण: वैरिएबल पिकर को पसंद के मुताबिक बनाना

यहां दिए गए उदाहरण में, अलग-अलग साइज़ के वैरिएबल पिकर बटन और कस्टम लेबल के साथ TextInput विजेट को कॉन्फ़िगर करने का तरीका दिखाया गया है.

पहली इमेज: वेब पर वैरिएबल पिकर बटन को पसंद के मुताबिक बनाना.
दूसरी इमेज: ऐड-ऑन के साइड पैनल में, वैरिएबल पिकर बटन को पसंद के मुताबिक बनाया गया है.

वैरिएबल पिकर बटन को पसंद के मुताबिक बनाने के लिए, यहां मेनिफ़ेस्ट फ़ाइल दी गई है:

JSON

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.locale"
  ],
  "addOns": {
    "common": {
      "name": "Variable button customization",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "variable_picker_customization",
          "state": "ACTIVE",
          "name": "Variable Picker demo",
          "description": "List all possible variable picker customization options",
          "workflowAction": {
            "onConfigFunction": "onUpdateCardConfigFunction",
            "onExecuteFunction": "onUpdateCardExecuteFunction"
          }
        }
      ]
    }
  }
}

वैरिएबल चुनने वाले बटन को पसंद के मुताबिक बनाने के लिए यहां दिया गया कोड इस्तेमाल करें:

Apps Script

function onUpdateCardConfigFunction(event) {
  const textInput1 = CardService.newTextInput()
    .setFieldName("value1")
    .setTitle("Regular variable picker button")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.UNSPECIFIED)
      )
    );

  const textInput2 = CardService.newTextInput()
    .setFieldName("value2")
    .setTitle("Size: Unspecified")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.UNSPECIFIED)
      )
    );

  const textInput3 = CardService.newTextInput()
    .setFieldName("value3")
    .setTitle("Size: Full size")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.FULL_SIZE)
      )
    );

  const textInput4 = CardService.newTextInput()
    .setFieldName("value4")
    .setTitle("Size: Compact")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.COMPACT)
      )
    );

  const textInput5 = CardService.newTextInput()
    .setFieldName("value5")
    .setTitle("Custom button label")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonLabel("New button label!")
      )
    );

  var cardSection = CardService.newCardSection()
    .addWidget(textInput1)
    .addWidget(textInput2)
    .addWidget(textInput3)
    .addWidget(textInput4)
    .addWidget(textInput5)
    .setId("section_1");

  var card = CardService.newCardBuilder().addSection(cardSection).build();

  return card;
}

function onUpdateCardExecuteFunction(event) {
}

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

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

TextInput और SelectionInput

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

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

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

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

ओवरफ़्लो मेन्यू से सिर्फ़ एक आउटपुट वैरिएबल चुनना

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

SelectionInputType को OVERFLOW_MENU पर सेट करने पर, विजेट एक खास वैरिएबल पिकर के तौर पर काम करता है. TextInput के साथ includeVariables का इस्तेमाल करने पर, वैरिएबल की वैल्यू को स्ट्रिंग में बदल दिया जाता है. हालांकि, OVERFLOW_MENU से चुने गए वैरिएबल के ओरिजनल डेटा टाइप को सुरक्षित रखा जाता है.

Apps Script

const selectionInput = CardService.newSelectionInput()
  .setFieldName("variable_picker_1")
  .setTitle("Variable Picker")
  .setType(
    CardService.SelectionInputType.OVERFLOW_MENU
  );

उपयोगकर्ताओं को टेक्स्ट और आउटपुट वैरिएबल को एक साथ इस्तेमाल करने की अनुमति देना

TextInput विजेट को कॉन्फ़िगर किया जा सकता है. इससे यह कंट्रोल किया जा सकता है कि उपयोगकर्ता, setInputMode() का इस्तेमाल करके टेक्स्ट और आउटपुट वैरिएबल के साथ कैसे इंटरैक्ट करें.

RICH_TEXT: इससे उपयोगकर्ता, टेक्स्ट और आउटपुट वैरिएबल को एक साथ इस्तेमाल कर सकते हैं. नतीजा, एक साथ जोड़ी गई एक स्ट्रिंग होती है.
PLAIN_TEXT: इससे इनपुट सीमित हो जाता है. उपयोगकर्ता, टेक्स्ट टाइप कर सकते हैं या किसी एक आउटपुट वैरिएबल को चुन सकते हैं. वैरिएबल चुनने पर, मौजूदा टेक्स्ट की जगह नया टेक्स्ट आ जाता है. इस मोड का इस्तेमाल करके, मेनिफ़ेस्ट में तय किए गए डेटा टाइप लागू करें.

इस इमेज में, दो TextInput विजेट दिखाए गए हैं. पहले को RICH_TEXT के तौर पर कॉन्फ़िगर किया गया है. इसमें टेक्स्ट और आउटपुट वैरिएबल शामिल है. दूसरे को PLAIN_TEXT के तौर पर कॉन्फ़िगर किया जाता है. इसमें सिर्फ़ आउटपुट वैरिएबल की अनुमति होती है.

पांचवीं इमेज: टेक्स्ट इनपुट विजेट को RICH_TEXT और PLAIN_TEXT के तौर पर कॉन्फ़िगर किया गया है.

हमारा सुझाव है कि सभी TextInput विजेट के लिए, इनपुट मोड को साफ़ तौर पर सेट करें.

यहां अलग-अलग इनपुट मोड के साथ TextInput विजेट को कॉन्फ़िगर करने के लिए मेनिफ़ेस्ट फ़ाइल दी गई है:

JSON

{
  "timeZone": "America/Toronto",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Text and output variable demo",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "richTextDemo",
          "state": "ACTIVE",
          "name": "Rich Text Demo",
          "description": "Show the difference between rich text and plain text TextInput widgets",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "First user input",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              },
              {
                "id": "value2",
                "description": "Second user input",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfiguration",
            "onExecuteFunction": "onExecution"
          }
        }
      ]
    }
  }
}

यहां अलग-अलग इनपुट मोड के साथ TextInput विजेट को कॉन्फ़िगर करने का कोड दिया गया है:

Apps Script

function onConfiguration() {
  const input1 = CardService.newTextInput()
    .setFieldName("value1")
    .setId("value1")
    .setTitle("Rich Text")
    .setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    )
    // Set input mode to RICH_TEXT to allow mixed text and variables.
    .setInputMode(CardService.TextInputMode.RICH_TEXT);

  const input2 = CardService.newTextInput()
    .setFieldName("value2")
    .setId("value2")
    .setTitle("Plain text")
    .setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    )
    // Set input mode to PLAIN_TEXT to enforce single variable selection.
    .setInputMode(CardService.TextInputMode.PLAIN_TEXT);

  const section = CardService.newCardSection()
    .addWidget(input1)
    .addWidget(input2);

  const card = CardService.newCardBuilder()
    .addSection(section)
    .build();

  return card;
}

function onExecution(e) {
}

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

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

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

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

JSON

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

Apps Script

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

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

Apps Script

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

Apps Script

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

Apps Script

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

JSON

Apps Script

वैरिएबल पिकर के बटनों को पसंद के मुताबिक बनाना

बटन आकार

बटन का लेबल

उदाहरण: वैरिएबल पिकर को पसंद के मुताबिक बनाना

JSON

Apps Script

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

TextInput और SelectionInput

ओवरफ़्लो मेन्यू से सिर्फ़ एक आउटपुट वैरिएबल चुनना

Apps Script

उपयोगकर्ताओं को टेक्स्ट और आउटपुट वैरिएबल को एक साथ इस्तेमाल करने की अनुमति देना

JSON

Apps Script

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

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