يوضّح هذا الدليل كيفية إنشاء متغيّر إدخال.
لتشغيل الخطوات، يجب توفير معلومات معيّنة. على سبيل المثال، يتطلّب إرسال رسالة إلكترونية عنوان بريد إلكتروني. لتوفير هذه المعلومات الضرورية للخطوات، عليك تحديد متغيّرات الإدخال. بعد تحديد متغيّرات الإدخال، يضبطها المستخدم عادةً على بطاقة إعدادات الخطوة أثناء إعداد الخطوة.
يمكنك تحديد متغيّر الإدخال في مكانَين: ملف بيان الإضافة وفي الرمز البرمجي باستخدام بطاقة إعدادات يمكن للمستخدمين إدخال قيم لمتغيّرات الإدخال فيها.
تحديد متغيّر الإدخال في ملف البيان
في ملف البيان، حدِّد متغيّرات الإدخال باستخدام مصفوفة inputs[]. يحتوي كل عنصر في مصفوفة inputs[] على الخصائص التالية:
id: معرّف فريد لمتغيّر إدخال. للسماح للتدفق بربط عنصر إدخال في بطاقة إعدادات بمتغيّر الإدخال هذا، يجب أن يتطابق مع اسم عنصر البطاقة المقابل.description: وصف لمتغيّر الإدخال يتم عرضه للمستخدمين النهائيين.cardinality: عدد القيم المسموح بها. القيم المتاحة هي:SINGLE: يُسمح بقيمة واحدة فقط.
dataType: نوع القيم المقبولة. تحتوي السمةdataTypeعلى السمةbasicTypeالتي تحدّد نوع البيانات. تشمل القيم الصالحة ما يلي:STRING: سلسلة أبجدية رقمية.INTEGER: رقم.TIMESTAMP: طابع زمني بتنسيق "عدد الملّي ثواني منذ حقبة Unix". على سبيل المثال، يتم تمثيل 27 نوفمبر 2025، الساعة 16:49:02 بالتوقيت العالمي المنسَّق على النحو التالي:1764262142988.BOOLEAN: إما true أو false.EMAIL_ADDRESS: عنوان بريد إلكتروني بالتنسيقdana@example.com.
يحدّد المثال التالي ثلاثة متغيّرات إدخال لخطوة آلة حاسبة. أول متغيّرَي إدخال هما أرقام صحيحة، والثالث هو عملية حسابية.
JSON
{
"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متغيّر الإدخال عددًا صحيحًا، لا يمكنه الاحتفاظ بسلسلة.
للحصول على مساعدة في إنشاء واجهات البطاقات، اطّلِع على أحد الخيارات التالية:
- أداة إنشاء البطاقات: أداة تفاعلية يمكنك استخدامها لإنشاء البطاقات وتحديدها.
- بطاقة: في مستند مرجع واجهة برمجة تطبيقات إضافة Google Workspace documentation.
- خدمة البطاقات: خدمة في "برمجة التطبيقات" تتيح للنصوص البرمجية ضبط البطاقات وإنشاؤها.
- نظرة عامة على الواجهات المستندة إلى البطاقات: في مستندات المطوّرين لإضافة 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: يقدّم اقتراحات للإكمال التلقائي لمساحات Google Chat التي يكون المستخدم عضوًا فيها.
عند ضبط كل من includeVariables وtype، يجمع حقل الإدخال بين تجربتَي هاتَين السمتَين. يمكن للمستخدمين اختيار متغيّر من type المطابق من قائمة منسدلة، والاطّلاع على اقتراحات الإكمال التلقائي له.
-
الشكل 4: يراجع المستخدم اقتراحات الإكمال التلقائي عند اختيار مساحة. -
الشكل 5: يختار المستخدم متغيّر الناتج لخطوة سابقة من القائمة المنسدلة ➕المتغيّرات.
اختيار متغيّر ناتج واحد فقط باستخدام قائمة كاملة
يمكنك ضبط عنصر واجهة المستخدم 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 ولا يسمح إلا بمتغيّر ناتج.
-
الشكل 3: عناصر واجهة مستخدم إدخال النص التي تم ضبطها على 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 بأوضاع إدخال مختلفة:
برمجة التطبيقات
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 مع إحدى قيم التعداد VariableButtonSize التالية:
UNSPECIFIED: القيمة التلقائية. يكون الزر صغيرًا في اللوحة الجانبية وكبيرًا في السياقات الأخرى.COMPACT: يعرض الزر علامة زائد (+) فقط.FULL_SIZE: يعرض الزر التصنيف النصي الكامل.
تصنيف الزر
لضبط نص الزر، استخدِم setVariableButtonLabel.
مثال: تخصيص منتقي المتغيّرات
يوضّح المثال التالي كيفية ضبط عناصر واجهة المستخدم TextInput بأحجام مختلفة لأزرار منتقي المتغيّرات وتصنيف مخصّص.
-
الشكل 1: تخصيص زر منتقي المتغيّرات على الويب. -
الشكل 2: تخصيص زر منتقي المتغيّرات في لوحة جانبية للإضافة.
في ما يلي ملف البيان لتخصيص أزرار منتقي المتغيّرات:
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"
}
}
]
}
}
}
في ما يلي الرمز البرمجي لتخصيص أزرار منتقي المتغيّرات:
برمجة التطبيقات
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 نفسها.
- مساحات Google Chat: املأ مساحات Google Chat التي يكون المستخدم عضوًا فيها.
لضبط هذا الإعداد، اضبط الـ
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
عناصر واجهة مستخدم، ما يوضّح الإكمال التلقائي من جهة الخادم والمستخدم والمساحة:
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"
}
}
]
}
}
}
برمجة التطبيقات
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