איך יוצרים כרטיס הגדרה לשלב

במדריך הזה מוסבר איך ליצור כרטיס הגדרה שמאפשר למשתמשים להתאים אישית שלב ב-Google Workspace Studio ולספק לו קלט.

באופן כללי, כדי ליצור כרטיס הגדרה, יוצרים ממשק כרטיס כמו בכל תוסף אחר של Google Workspace. כדי לקבל עזרה ביצירת ממשקי כרטיסי הגדרה, אפשר לעיין במאמרים הבאים:

הכלי ליצירת כרטיסים, כלי אינטראקטיבי שעוזר לכם ליצור ולהגדיר כרטיסים.
כרטיס במאמרי העזרה של Google Workspace API.
‫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 כך שיציג הצעות להשלמה אוטומטית ממקור נתונים חיצוני. לדוגמה, אתם יכולים לעזור למשתמשים לבחור מתוך רשימה של לידים למכירות ממערכת לניהול קשרי לקוחות (CRM).

כדי להטמיע השלמה אוטומטית בצד השרת, צריך:

מגדירים את מקור הנתונים: בווידג'ט 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 שהמשתמש חבר בהם.

כדי להגדיר את האפשרות הזו, צריך להגדיר את PlatformDataSource בווידג'ט SelectionInput, ולציין את 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 enum:

‫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"
          }
        }
      ]
    }
  }
}

הנה הקוד להתאמה אישית של לחצני בחירת משתנים:

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 מתוך תפריט נפתח ולראות הצעות להשלמה אוטומטית שלו.

איור 3: משתמש בודק את ההצעות להשלמה אוטומטית כשהוא בוחר מרחב.
איור 4: משתמש בוחר את משתנה הפלט של שלב קודם מתוך התפריט הנפתח ➕משתנים.

בחירת משתנה פלט אחד בלבד באמצעות תפריט אפשרויות נוספות

אתם יכולים להגדיר את הווידג'ט SelectionInput כדי לאפשר למשתמשים לבחור משתנה פלט אחד משלב קודם באמצעות תפריט האפשרויות הנוספות.

כשמגדירים את SelectionInputType ל-OVERFLOW_MENU, הווידג'ט משמש ככלי ייעודי לבחירת משתנים. בשונה משימוש ב-includeVariables עם TextInput, שממיר ערכי משתנים למחרוזות, 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 ומאפשר רק משתנה פלט.

איור 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 עם מצבי קלט שונים:

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) {
}

שיקולים ומגבלות לגבי כרטיסים

ניווט בכרטיסים כמו popCard(), pushCard() ו- updateCard() לא נתמך בתוספים שמרחיבים את Workspace Studio.
כשמשתמשים ב-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

שיקולים ומגבלות לגבי כרטיסים

נושאים קשורים

איך יוצרים כרטיס הגדרה לשלב