این راهنما نحوه ایجاد یک متغیر ورودی را توضیح میدهد.
برای اجرا، مراحل به اطلاعات خاصی نیاز دارند. به عنوان مثال، ارسال ایمیل به یک آدرس ایمیل نیاز دارد. برای ارائه این اطلاعات لازم به مراحل، متغیرهای ورودی را تعریف کنید. پس از تعریف، متغیرهای ورودی معمولاً توسط کاربر در کارت پیکربندی مرحله تنظیم میشوند، در حالی که کاربر مرحله را تنظیم میکند.
متغیر ورودی را در دو جا تعریف کنید: فایل مانیفست افزونه، و در کدی با یک کارت پیکربندی که کاربران میتوانند مقادیر متغیرهای ورودی را در آن وارد کنند.
متغیر ورودی را در فایل مانیفست تعریف کنید
در فایل مانیفست، متغیرهای ورودی را با آرایه inputs[] مشخص کنید. هر آیتم در آرایه inputs[] دارای این ویژگیها است:
-
id: شناسه منحصر به فرد برای یک متغیر ورودی. برای اینکه جریان بتواند یک عنصر ورودی کارت پیکربندی را با این متغیر ورودی مرتبط کند، باید با نام عنصر کارت مربوطه مطابقت داشته باشد. -
description: توضیحی در مورد متغیر ورودی که قرار است به کاربران نهایی نمایش داده شود. -
cardinality: چند مقدار مجاز است. مقادیر ممکن عبارتند از:-
SINGLE: فقط یک مقدار مجاز است.
-
-
dataType: نوع مقادیر پذیرفته شده.dataTypeدارای ویژگیbasicTypeاست که نوع داده را تعریف میکند. مقادیر معتبر عبارتند از:-
STRING: یک رشته الفبایی-عددی. -
INTEGER: یک عدد. -
TIMESTAMP: یک مهر زمانی در قالب "میلیثانیه از زمان آغاز یونیکس" است. برای مثال، ۲۷ نوامبر ۲۰۲۵، ساعت ۱۶:۴۹:۰۲ UTC به صورت1764262142988نمایش داده میشود. -
BOOLEAN: یا درست است یا غلط. -
EMAIL_ADDRESS: یک آدرس ایمیل با فرمتdana@example.com.
-
مثال زیر سه متغیر ورودی برای یک مرحله ماشین حساب تعریف میکند. دو متغیر ورودی اول اعداد صحیح هستند و سومی یک عملیات حسابی است.
جیسون
{
"timeZone": "America/Los_Angeles",
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"addOns": {
"common": {
"name": "Calculator",
"logoUrl": "https://www.gstatic.com/images/branding/productlogos/calculator_search/v1/web-24dp/logo_calculator_search_color_1x_web_24dp.png",
"useLocaleFromApp": true
},
"flows": {
"workflowElements": [
{
"id": "calculatorDemo",
"state": "ACTIVE",
"name": "Calculate",
"description": "Asks the user for two values and a math operation, then performs the math operation on the values and outputs the result.",
"workflowAction": {
"inputs": [
{
"id": "value1",
"description": "value1",
"cardinality": "SINGLE",
"dataType": {
"basicType": "INTEGER"
}
},
{
"id": "value2",
"description": "value2",
"cardinality": "SINGLE",
"dataType": {
"basicType": "INTEGER"
}
},
{
"id": "operation",
"description": "operation",
"cardinality": "SINGLE",
"dataType": {
"basicType": "STRING"
}
}
],
"outputs": [
{
"id": "result",
"description": "Calculated result",
"cardinality": "SINGLE",
"dataType": {
"basicType": "INTEGER"
}
}
],
"onConfigFunction": "onConfigCalculate",
"onExecuteFunction": "onExecuteCalculate"
}
}
]
}
}
}
متغیر ورودی را در کد تعریف کنید
کد این مرحله شامل تابعی به نام onConfigFunction() است که یک کارت پیکربندی را برمیگرداند که یک ویجت کارت ورودی را برای هر متغیر ورودی تعریف شده در آرایه inputs[] فایل مانیفست تعریف میکند.
ویجتهای ورودی تعریفشده در کارت پیکربندی، الزامات زیر را دارند:
-
nameهر ویجت ورودی بایدidمتغیر ورودی مربوطه در فایل مانیفست مطابقت داشته باشد. - عدد صحیح ویجت ورودی باید با
cardinalityمتغیر ورودی در فایل مانیفست مطابقت داشته باشد. - نوع دادهی ویجت ورودی باید
dataTypeمتغیر ورودی در فایل مانیفست مطابقت داشته باشد. اگرdataTypeمتغیر ورودی عدد صحیح باشد، نمیتواند رشته را در خود نگه دارد.
برای کمک به ساخت رابطهای کارت، به یکی از این گزینهها مراجعه کنید:
- سازنده کارت : ابزاری تعاملی که میتوانید برای ساخت و تعریف کارتها از آن استفاده کنید.
- کارت : در مستندات مرجع API افزونهی Google Workspace.
- سرویس کارت : یک سرویس اسکریپت برنامهها که به اسکریپتها اجازه میدهد کارتها را پیکربندی و بسازند.
- نمای کلی رابطهای مبتنی بر کارت : در مستندات توسعهدهنده افزونه Google Workspace.
مثال زیر یک کارت پیکربندی برای هر ویجت ورودی تعریف شده در متغیر ورودی تعریف شده در فایل مانیفست برمیگرداند.
اسکریپت برنامهها
/**
* Generates and displays a configuration card for the sample calculation step.
*
* This function creates a card with input fields for two values and a drop-down
* for selecting an arithmetic operation.
*
* The input fields are configured to let the user select outputs from previous
* workflow steps as input values using the `hostAppDataSource` property.
*/
function onConfigCalculate() {
const firstInput = CardService.newTextInput()
.setFieldName("value1") // "FieldName" must match an "id" in the manifest file's inputs[] array.
.setTitle("First Value")
.setHostAppDataSource(
CardService.newHostAppDataSource()
.setWorkflowDataSource(
CardService.newWorkflowDataSource()
.setIncludeVariables(true)
)
);
const secondInput = CardService.newTextInput()
.setFieldName("value2") // "FieldName" must match an "id" in the manifest file's inputs[] array.
.setTitle("Second Value")
.setHostAppDataSource(
CardService.newHostAppDataSource()
.setWorkflowDataSource(
CardService.newWorkflowDataSource()
.setIncludeVariables(true)
)
);
const selectionInput = CardService.newSelectionInput()
.setTitle("operation")
.setFieldName("operation") // "FieldName" must match an "id" in the manifest file's inputs[] array.
.setType(CardService.SelectionInputType.DROPDOWN)
.addItem("+", "+", false)
.addItem("-", "-", true)
.addItem("x", "x", false)
.addItem("/", "/", false);
const sections = CardService.newCardSection()
.setHeader("Action_sample: Calculate")
.setId("section_1")
.addWidget(firstInput)
.addWidget(selectionInput)
.addWidget(secondInput)
let card = CardService.newCardBuilder()
.addSection(sections)
.build();
return card;
}
استفاده از متغیرهای خروجی از مراحل قبلی
شما میتوانید متغیرهای ورودی را طوری پیکربندی کنید که متغیرهای خروجی از مراحل قبلی گردش کار را بپذیرند.
انتخاب متغیر را فعال کنید
برای اینکه کاربران بتوانند متغیرها را از مراحل قبلی انتخاب کنند، از ویژگی includeVariables در ویجتهای TextInput و SelectionInput استفاده کنید.
ویجتهای TextInput و SelectionInput این ویژگیهای مختص Workspace Studio را دارند:
-
includeVariables: یک ویژگی بولی که به کاربران اجازه میدهد متغیرها را از مراحل قبلی انتخاب کنند. برای اینکه انتخابگر متغیر در مراحل بعدی نمایش داده شود، هم رویداد شروع و هم حداقل یک متغیر خروجی مربوطه باید به متغیر نگاشت شوند. -
type: یک مقدار شمارشی که پیشنهادات را به صورت خودکار تکمیل میکند. مقادیر پشتیبانی شده عبارتند از:-
USER: پیشنهادهای تکمیل خودکار را برای افراد موجود در مخاطبین کاربر ارائه میدهد. -
SPACE: پیشنهادهای تکمیل خودکار برای فضاهای چت گوگل که کاربر عضو آنهاست، ارائه میدهد.
-
وقتی هر دو includeVariables و type تنظیم شوند، فیلد ورودی تجربیات آنها را ترکیب میکند. کاربران میتوانند متغیری با type منطبق را از منوی کشویی انتخاب کنند و پیشنهادات تکمیل خودکار را برای آن مشاهده کنند.

شکل ۴: یک کاربر هنگام انتخاب یک فضا، پیشنهادات تکمیل خودکار را بررسی میکند. 
شکل ۵: کاربر متغیر خروجی مرحله قبل را از منوی کشویی ➕Variables انتخاب میکند.
فقط یک متغیر خروجی را با یک منوی سرریز انتخاب کنید
شما میتوانید ویجت SelectionInput را طوری پیکربندی کنید که به کاربران اجازه دهد با استفاده از یک منوی سرریز، یک متغیر خروجی واحد را از مرحله قبل انتخاب کنند.
وقتی SelectionInputType روی OVERFLOW_MENU تنظیم میکنید، ویجت به عنوان یک انتخابگر متغیر اختصاصی عمل میکند. برخلاف استفاده از includeVariables با TextInput که مقادیر متغیر را به رشته تبدیل میکند، OVERFLOW_MENU نوع داده اصلی متغیر انتخاب شده را حفظ میکند.
اسکریپت برنامهها
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 با حالتهای ورودی مختلف در اینجا آمده است:
جیسون
{
"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 با حالتهای ورودی مختلف آمده است:
اسکریپت برنامهها
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) {
}
دکمههای انتخابگر متغیر را سفارشی کنید
شما میتوانید با تنظیم اندازه و برچسب دکمه، دکمه انتخاب متغیر را سفارشی کنید.
اندازه دکمه
برای تنظیم اندازه دکمه، از تابع setVariableButtonSize() به همراه یکی از enumهای VariableButtonSize زیر استفاده کنید:
-
UNSPECIFIED: پیشفرض. دکمه در پنل کناری جمعوجور و در سایر زمینهها اندازه کامل دارد. -
COMPACT: دکمه فقط یک علامت جمع (+) را نمایش میدهد. -
FULL_SIZE: دکمه، برچسب متن کامل را نمایش میدهد.
برچسب دکمه
برای تنظیم متن دکمه، از setVariableButtonLabel() استفاده کنید.
مثال: سفارشیسازی انتخابگر متغیر
مثال زیر نحوه پیکربندی ویجتهای TextInput را با اندازههای مختلف دکمه انتخابگر و یک برچسب سفارشی نشان میدهد.

شکل ۱: سفارشیسازی دکمه انتخاب متغیر در وب 
شکل ۲: سفارشیسازی دکمه انتخاب متغیر در پنل کناری افزونه.
فایل مانیفست برای سفارشیسازی دکمههای انتخاب متغیر به صورت زیر است:
جیسون
{
"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"
}
}
]
}
}
}
کد مربوط به سفارشیسازی دکمههای انتخابگر متغیر به صورت زیر است:
اسکریپت برنامهها
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) {
}
پیکربندی تکمیل خودکار دادههای Google Workspace
همچنین میتوانید پیشنهادهای تکمیل خودکار را از دادههای موجود در محیط Google Workspace کاربر پر کنید:
- کاربران Google Workspace: کاربران را در همان سازمان Google Workspace جمع کنید.
- فضاهای چت گوگل: فضاهای چت گوگل را که کاربر عضو آن است، پر کنید.
برای پیکربندی این مورد، PlatformDataSource در ویجت SelectionInput تنظیم کنید و 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 ایجاد میکند و تکمیل خودکار سمت سرور، کاربر و فضا را نشان میدهد:
جیسون
{
"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"
}
}
]
}
}
}
اسکریپت برنامهها
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();
}
اعتبارسنجی متغیر ورودی
به عنوان بهترین روش، اعتبارسنجی کنید که کاربر مقدار مناسبی وارد کند. به بخش اعتبارسنجی متغیر ورودی مراجعه کنید.
مباحث مرتبط
- اعتبارسنجی یک متغیر ورودی
- متغیرهای خروجی
- متغیرهای پویا
- ثبت فعالیتها و خطاها
- اشیاء رویداد استودیوی فضای کاری