إنشاء بطاقة إعداد لخطوة

يوضّح هذا الدليل كيفية إنشاء بطاقة إعداد تتيح للمستخدمين تخصيص خطوة في Google Workspace Studio وتقديم مدخلات لها.

بشكل عام، لإنشاء بطاقة إعداد، عليك إنشاء واجهة بطاقة كما تفعل مع أي إضافة أخرى من إضافات 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"
          }
        }
      ]
    }
  }
}

تعديل الرمز البرمجي

في رمز التطبيق، أعِد بطاقة.

برمجة التطبيقات

/**
 * 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 لاقتراح إكمال تلقائي من مصدر بيانات خارجي. على سبيل المثال، يمكنك مساعدة المستخدمين في الاختيار من قائمة بعملاء محتملين من نظام إدارة علاقات العملاء (CRM).

لتنفيذ ميزة الإكمال التلقائي من جهة الخادم، عليك اتّباع الخطوات التالية:

  1. تحديد مصدر البيانات: في أداة SelectionInput، أضِف DataSourceConfig يحدّد RemoteDataSource. يشير هذا الإعداد إلى دالة Apps Script تجلب اقتراحات الإكمال التلقائي.
  2. تنفيذ وظيفة الإكمال التلقائي: يتم تشغيل هذه الوظيفة عندما يكتب المستخدم في حقل الإدخال. يجب أن تستعلم الدالة عن مصدر البيانات الخارجية استنادًا إلى إدخال المستخدم وتعرض قائمة بالاقتراحات.

يوضّح المثال التالي كيفية ضبط أداة SelectionInput لإكمال البحث تلقائيًا من جهة الخادم:

برمجة التطبيقات

// 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) يتلقّى عنصر حدث عندما يكتب المستخدم في الحقل. يجب أن تتضمّن هذه الدالة ما يلي:

  1. تحقَّق من event.workflow.elementUiAutocomplete.invokedFunction للتأكّد من تطابقه مع اسم الدالة المتوقّع.
  2. احصل على إدخال المستخدم من event.workflow.elementUiAutocomplete.query.
  3. أرسِل طلب بحث إلى مصدر البيانات الخارجي باستخدام طلب البحث.
  4. عرض ما يصل إلى 100 اقتراح بالتنسيق المطلوب

يوضّح المثال التالي كيفية تنفيذ الدالة handleAutocompleteRequest() لعرض اقتراحات استنادًا إلى طلب بحث المستخدم:

برمجة التطبيقات

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 التي يكون المستخدم عضوًا فيها.

لضبط هذا الإعداد، عليك ضبط 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();
}

تخصيص أزرار أداة اختيار المتغيّرات

يمكنك تخصيص زر أداة اختيار المتغيّرات من خلال ضبط حجم الزر وتصنيفه.

حجم الزر

لضبط حجم الزر، استخدِم 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) {
}

الميزات الخاصة بـ Workspace Studio

تتضمّن بعض أدوات البطاقات وظائف وميزات خاصة بـ Workspace Studio، ويمكنك الاطّلاع على تفاصيلها هنا.

‫TextInput وSelectionInput

تتضمّن أدوات TextInput وSelectionInput الميزات التالية الخاصة بـ Workspace Studio:

  • includeVariables: سمة منطقية تتيح للمستخدمين اختيار متغيرات من الخطوات السابقة. لكي يظهر أداة اختيار المتغير في الخطوات اللاحقة، يجب ربط كل من الحدث الأوّلي ومتغير الناتج واحد على الأقل بالمتغير.
  • type: قيمة تعدادية تُكمل الاقتراحات تلقائيًا. تشمل القيم المسموح بها ما يلي:
    • USER: تقدّم اقتراحات للإكمال التلقائي لأسماء الأشخاص في جهات اتصال المستخدم.
    • SPACE: يقدّم اقتراحات إكمال تلقائي لمساحات Google Chat التي يكون المستخدم عضوًا فيها.

عند ضبط كل من includeVariables وtype، يجمع حقل الإدخال بين تجارب كل منهما. يمكن للمستخدمين اختيار متغيّر من type المطابق من قائمة منسدلة، والاطّلاع على اقتراحات الإكمال التلقائي الخاصة به.

  • اقتراحات الإكمال التلقائي لمساحة في Google Chat
    الشكل 3: يراجع المستخدم اقتراحات الإكمال التلقائي عند اختيار مساحة.
  • تتيح قائمة المتغيّرات للمستخدمين اختيار متغيّرات الإخراج من الخطوات السابقة.
    الشكل 4: يختار المستخدم متغيّر الإخراج لخطوة سابقة من القائمة المنسدلة ➕المتغيّرات.

اختيار متغيّر إخراج واحد فقط مع قائمة كاملة

يمكنك ضبط 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
    الشكل 5: أدوات إدخال النص التي تم ضبطها على 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) {
}

اعتبارات وقيود البطاقة

  • لا تتوافق عمليات التنقّل باستخدام البطاقات، مثل popCard() وpushCard() وupdateCard()، مع الإضافات التي توسّع نطاق Workspace Studio.

  • عند استخدام SelectionInput في أداة اختيار المتغيّرات، لا تتوافق التطبيقات المصغّرة إلا مع "type": "MULTI_SELECT". في مواضع أخرى من بطاقات الإعداد، تتوافق SelectionInput مع جميع قيم SelectionType.