דף זה תורגם על ידי Cloud Translation API.

הוספת רכיבים אינטראקטיביים של ממשק משתמש לכרטיסים

בדף הזה נסביר איך מוסיפים ווידג'טים ורכיבי ממשק משתמש לכרטיסים, כדי שהמשתמשים יוכלו לקיים אינטראקציה עם אפליקציית Google Chat, למשל ללחוץ על לחצן או לשלוח מידע.

אפשר להשתמש בממשקי Chat הבאים כדי ליצור כרטיסים אינטראקטיביים באפליקציות של Chat:

הודעות שמכילות כרטיס אחד או יותר.
דף הבית, שהוא כרטיס שמופיע בכרטיסייה דף הבית בצ'אטים ישירים באפליקציית Chat.
Dialogs, שהם כרטיסים שנפתחים בחלון חדש מהודעות ומדפי בית.

כשהמשתמשים מבצעים אינטראקציה עם הכרטיסים, האפליקציות ל-Chat יכולות להשתמש בנתונים שהם מקבלים כדי לעבד ולהגיב בהתאם. פרטים נוספים זמינים במאמר איסוף ועיבוד מידע ממשתמשי Google Chat.

אפשר להשתמש בכלי ליצירת כרטיסים כדי לעצב מסרים וממשקי משתמש באפליקציות ל-Chat ולראות תצוגה מקדימה שלהם:

פתיחת הכלי ליצירת כרטיסים

דרישות מוקדמות

אפליקציית Google Chat שמופעלת בה תכונות אינטראקטיביות. תוכלו להיעזר באחד מהמדריכים למתחילים כדי ליצור אפליקציית Chat אינטראקטיבית, לפי ארכיטקטורת האפליקציה שבה אתם רוצים להשתמש:

הוספת לחצן

בווידג'ט ButtonList מוצגת קבוצת לחצנים. לחצנים יכולים להציג טקסט, סמל או גם טקסט וגם סמל. כל Button תומך בפעולה OnClick שמתרחשת כשמשתמשים לוחצים על הלחצן. לדוגמה:

פותחים היפר-קישור באמצעות OpenLink, כדי לספק למשתמשים מידע נוסף.
מריצים action שמריץ פונקציה בהתאמה אישית, כמו קריאה ל-API.

מטעמי נגישות, הלחצנים תומכים בטקסט חלופי.

הוספת לחצן שמפעיל פונקציה מותאמת אישית

זהו כרטיס שמורכב מווידג'ט ButtonList עם שני לחצנים. לחיצה על לחצן אחד פותחת את מסמכי התיעוד למפתחים של Google Chat בכרטיסייה חדשה. הלחצן השני מפעיל פונקציה בהתאמה אישית שנקראת goToView() ומעביר את הפרמטר viewType="BIRD EYE VIEW".

הוספת לחצן בסגנון Material Design

למטה מוצגת קבוצת לחצנים בסגנונות מקשים שונים של Material Design.

כדי להחיל סגנון של עיצוב חומר, אין לכלול את המאפיין 'צבע'.

הוספת לחצן עם צבע בהתאמה אישית ולחצן מושבת

כדי למנוע ממשתמשים ללחוץ על לחצן, צריך להגדיר "disabled": "true".

למטה מופיע כרטיס שכולל ווידג'ט של ButtonList עם שני לחצנים. בלחצן אחד נעשה שימוש בשדה Color כדי להתאים אישית את צבע הרקע של הלחצן. הלחצן השני מושבת בשדה Disabled, ולכן מונע מהמשתמש ללחוץ על הלחצן ולבצע את הפונקציה.

הוספת לחצן עם סמל

למטה מוצג כרטיס שמורכב מווידג'ט של ButtonList עם שני ווידג'טים של Button סמלים. כשלוחצים על הלחצן, לוחצים על השדה knownIcon כדי להציג את סמל האימייל המובנה של Google Chat. הלחצן השני משתמש בשדה iconUrl כדי להציג ווידג'ט של סמל בהתאמה אישית.

הוספת לחצן עם סמל וטקסט

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

התאמה אישית של הלחצן לקטע שניתן לכווץ

מתאימים אישית את לחצן הבקרה שמכווץ ומרחיב קטעים בכרטיס. אפשר לבחור מתוך מגוון של סמלים או תמונות לייצוג חזותי של תוכן הקטע, וכך למשתמשים קל יותר להבין את המידע ולקיים איתו אינטראקציה.

הוספת תפריט אפשרויות נוספות

אפשר להשתמש בסמל Overflow menu בכרטיסים ב-Chat כדי להציע אפשרויות ופעולות נוספות. כך תוכלו לכלול יותר אפשרויות בלי להעמיס על ממשק הכרטיס, וכך להבטיח עיצוב נקי ומסודר.

הוספה של רשימת צ'יפים

הווידג'ט ChipList הוא דרך גמישה ומושכת להצגת מידע. אפשר להשתמש ברשימות צ'יפים כדי לייצג תגים, קטגוריות או נתונים רלוונטיים אחרים, וכך להקל על המשתמשים לנווט בתוכן וליצור איתו אינטראקציה.

איסוף מידע ממשתמשים

בקטע הזה מוסבר איך להוסיף ווידג'טים שאוספים מידע, כמו טקסט או בחירות.

במאמר איסוף ועיבוד מידע ממשתמשי Google Chat מוסבר איך מעבדים את הקלט של המשתמשים.

איסוף טקסט

ווידג'ט TextInput כולל שדה שבו המשתמשים יכולים להזין טקסט. הווידג'ט תומך בהצעות שעוזרות למשתמשים להזין נתונים אחידים ובפעולות בעת שינוי, שהן Actions שמופעלות כשמתרחש שינוי בשדה של קלט הטקסט, כמו הוספה או מחיקה של טקסט.

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

זהו כרטיס שמכיל ווידג'ט TextInput:

איסוף תאריכים או שעות

הווידג'ט DateTimePicker מאפשר למשתמשים להזין תאריך, שעה או תאריך ושעה. לחלופין, המשתמשים יכולים להשתמש בבורר כדי לבחור תאריכים ושעות. אם המשתמשים מזינים תאריך או שעה לא חוקיים, בבורר תופיע הודעת שגיאה עם בקשה להזין את המידע בצורה נכונה.

למטה מופיע כרטיס שמורכב משלושה סוגים שונים של ווידג'טים של DateTimePicker:

לאפשר למשתמשים לבחור פריטים

הווידג'ט SelectionInput מספק קבוצה של פריטים שניתן לבחור, כמו תיבות סימון, לחצני בחירה, מתגים או תפריט נפתח. אפשר להשתמש בווידג'ט הזה כדי לאסוף ממשתמשים נתונים מוגדרים וסטנדרטיים. כדי לאסוף נתונים לא מוגדרים ממשתמשים, צריך להשתמש בווידג'ט TextInput במקום זאת.

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

אפליקציות צ'אט יכולות לקבל ולעבד את הערך של הפריטים שנבחרו. למידע נוסף על עבודה עם נתונים שהוזנו בטפסים, ראו עיבוד מידע שהוזן על ידי משתמשים.

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

תיבות סימון
לחצני בחירה
מתגים
תפריט נפתח
תפריט לבחירה של כמה פריטים

הוספה של תיבת סימון

בדוגמה הבאה מוצג כרטיס שמבקש מהמשתמש לציין אם איש קשר הוא מקצועי, אישי או שניהם, באמצעות ווידג'ט SelectionInput שיש בו תיבות סימון:

הוספת לחצן בחירה

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

הוספת מתג

בדוגמה הבאה מוצג כרטיס עם בקשה מהמשתמש לציין אם איש קשר הוא מקצועי, אישי או שניהם באמצעות ווידג'ט SelectionInput שמשתמש במתגים:

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

בכרטיס הבא מוצגת בקשה למשתמש לבחור אנשי קשר מתוך תפריט עם אפשרויות מרובות:

אפשר לאכלס פריטים בתפריט של בחירה מרובה ממקורות הנתונים הבאים ב-Google Workspace:

משתמשי Google Workspace: אפשר לאכלס משתמשים רק באותו ארגון ב-Google Workspace.
מרחבים משותפים ב-Chat: המשתמשים שמזינים פריטים בתפריט 'בחירה מרובה' יכולים לראות ולבחור רק מרחבים שהם שייכים אליהם בארגון שלהם ב-Google Workspace.

כדי להשתמש במקורות נתונים של Google Workspace, מציינים את השדה platformDataSource. בניגוד לסוגים אחרים של קלט של אפשרויות בחירה, צריך להשמיט אובייקטים מסוג SectionItem, כי הפריטים האלה של אפשרויות הבחירה מגיעים באופן דינמי מ-Google Workspace.

בקוד הבא מוצג תפריט של משתמשי Google Workspace לבחירת כמה משתמשים בו-זמנית. כדי לאכלס משתמשים, קלט הבחירה מוגדר כ-commonDataSource כ-USER:

JSON

{
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

הקוד הבא מציג תפריט לבחירת כמה מרחבים משותפים ב-Chat. כדי לאכלס את המרחבים, מזינים את השדה hostAppDataSource בתור קלט הבחירה. בתפריט הבחירה בכמה פריטים, הערך של defaultToCurrentSpace מוגדר גם ל-true, כך שהמרחב המשותף הנוכחי הוא ברירת המחדל בתפריט:

JSON

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

בתפריטים מסוג 'בחירה מרובה' אפשר גם לאכלס פריטים ממקור נתונים של צד שלישי או ממקור נתונים חיצוני. לדוגמה, תוכלו להשתמש בתפריטים עם ריבוי בחירה כדי לעזור למשתמש לבחור מתוך רשימה של לידים למכירות ממערכת ניהול קשרי לקוחות (CRM).

כדי להשתמש במקור נתונים חיצוני, משתמשים בשדה externalDataSource כדי לציין פונקציה שמחזירה פריטים ממקור הנתונים.

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

הקוד הבא מציג תפריט של פריטים לבחירה מרשימת אנשי קשר חיצונית של המשתמש. בתפריט מוצג איש קשר אחד כברירת מחדל, והפונקציה getContacts מופעלת כדי לאחזר וליישב פריטים ממקור הנתונים החיצוני:

Node.js

node/selection-input/index.js

הצגת הקוד ב-GitHub

selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Python

python/selection-input/main.py

הצגת הקוד ב-GitHub

'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': "getContacts" },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_contact("3")]
}

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java

הצגת הקוד ב-GitHub

.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

Apps Script

apps-script/selection-input/selection-input.gs

הצגת הקוד ב-GitHub

selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

במקורות נתונים חיצוניים, אפשר גם להשלים אוטומטית פריטים שהמשתמשים מתחילים להקליד בתפריט הבחירה מרובה. לדוגמה, אם משתמש מתחיל להקליד Atl כדי לפתוח תפריט עם רשימת ערים בארצות הברית, אפליקציית Chat יכולה להציע את הערך Atlanta באופן אוטומטי לפני שהמשתמש מסיים להקליד. אפשר להשלים אוטומטית עד 100 פריטים.

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

מעבירים אובייקט אירוע שמייצג את האינטראקציה של המשתמש עם התפריט.
מזהים שהערך invokedFunction של אירוע האינטראקציה תואם לפונקציה מהשדה externalDataSource.
כשהפונקציות תואמות, המערכת מחזירה הצעות לפריטים ממקור הנתונים החיצוני. כדי להציע פריטים בהתאם למה שהמשתמש מקליד, צריך לקבל את הערך של המפתח autocomplete_widget_query. הערך הזה מייצג את מה שהמשתמש מקליד בתפריט.

הקוד הבא משלים באופן אוטומטי פריטים ממשאב נתונים חיצוני. בהמשך לדוגמה הקודמת, אפליקציית Chat מציעה פריטים לפי המועד שבו מופעלת הפונקציה getContacts:

Node.js

node/selection-input/index.js

הצגת הקוד ב-GitHub

/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py

הצגת הקוד ב-GitHub

def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java

הצגת הקוד ב-GitHub

// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

Apps Script

apps-script/selection-input/selection-input.gs

הצגת הקוד ב-GitHub

/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

אימות הנתונים שהוזנו לכרטיסים

בדף הזה מוסבר איך לאמת את הנתונים שהוזנו לווידג'טים ולaction של הכרטיס. לדוגמה, אתם יכולים לוודא שבשדה קלט טקסט יש טקסט שהמשתמש הזין, או שהוא מכיל מספר מסוים של תווים.

הגדרת ווידג'טים נדרשים לפעולות

כחלק מaction של הכרטיס, מוסיפים את השמות של הווידג'טים הנדרשים לפעולה לרשימה requiredWidgets שלה.

אם לווידג'טים שמופיעים כאן אין ערך כשהפעולה הזו מופעלת, שליחת הפעולה בטופס תבוטל.

כשהאפשרות "all_widgets_are_required": "true" מוגדרת לפעולה, כל הווידג'טים בכרטיס נדרשים לפעולה הזו.

הגדרת פעולת `all_widgets_are_required` בבחירה מרובה

JSON

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "value": "contact-1",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 1",
                "bottomText": "Contact one description",
                "selected": false
              },
              {
                "value": "contact-2",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 2",
                "bottomText": "Contact two description",
                "selected": false
              },
              {
                "value": "contact-3",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 3",
                "bottomText": "Contact three description",
                "selected": false
              },
              {
                "value": "contact-4",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 4",
                "bottomText": "Contact four description",
                "selected": false
              },
              {
                "value": "contact-5",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 5",
                "bottomText": "Contact five description",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

הגדרת פעולת `all_widgets_are_required` ב-dateTimePicker

JSON

{
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}

הגדרת פעולה `all_widgets_are_required` בתפריט הנפתח

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

הגדרת אימות לווידג'ט של קלט טקסט

בשדה האימות של הווידג'ט textInput ניתן לציין את מגבלת התווים ואת סוג הקלט לווידג'ט הזה של קלט הטקסט.

הגדרת מגבלת תווים לווידג'ט של קלט טקסט

JSON

{
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        }
      ]
    }
  ]
}

הגדרת סוג הקלט לווידג'ט של קלט טקסט

JSON

{
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

פתרון בעיות

כשכרטיס או אפליקציית Google Chat מחזירים שגיאה, בממשק Chat מופיעה ההודעה "משהו השתבש". או "לא ניתן לעבד את הבקשה שלך". בחלק מהמקרים לא מוצגות הודעות שגיאה בממשק המשתמש של Chat, אבל האפליקציה או הכרטיס של Chat יוצרים תוצאה לא צפויה. למשל, יכול להיות שלא תופיע הודעת כרטיס.

יכול להיות שלא תופיע הודעת שגיאה בממשק המשתמש של Chat, אבל תוכלו להיעזר בהודעות שגיאה תיאוריות ובנתוני היומן שיעזרו לכם לתקן שגיאות כשמופעלת רישום ביומן של שגיאות באפליקציות ל-Chat. למידע נוסף על הצגה, ניפוי באגים ותיקון שגיאות, תוכלו להיעזר במאמר פתרון בעיות ב-Google Chat.

הוספת רכיבים אינטראקטיביים של ממשק משתמש לכרטיסים

דרישות מוקדמות

הוספת לחצן

הוספת לחצן שמפעיל פונקציה מותאמת אישית

הוספת לחצן בסגנון Material Design

הוספת לחצן עם צבע בהתאמה אישית ולחצן מושבת

הוספת לחצן עם סמל

הוספת לחצן עם סמל וטקסט

התאמה אישית של הלחצן לקטע שניתן לכווץ

הוספת תפריט אפשרויות נוספות

הוספה של רשימת צ'יפים

איסוף מידע ממשתמשים

איסוף טקסט

איסוף תאריכים או שעות

לאפשר למשתמשים לבחור פריטים

הוספה של תיבת סימון

הוספת לחצן בחירה

הוספת מתג

הוספת תפריט נפתח

הוספת תפריט לבחירת מספר פריטים

JSON

JSON

Node.js

Python

Java

Apps Script

Node.js

Python

Java

Apps Script

אימות הנתונים שהוזנו לכרטיסים

הגדרת ווידג'טים נדרשים לפעולות

הגדרת פעולת all_widgets_are_required בבחירה מרובה

JSON

הגדרת פעולת all_widgets_are_required ב-dateTimePicker

JSON

הגדרת פעולה all_widgets_are_required בתפריט הנפתח

JSON

הגדרת אימות לווידג'ט של קלט טקסט

הגדרת מגבלת תווים לווידג'ט של קלט טקסט

JSON

הגדרת סוג הקלט לווידג'ט של קלט טקסט

JSON

פתרון בעיות

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

הגדרת פעולת `all_widgets_are_required` בבחירה מרובה

הגדרת פעולת `all_widgets_are_required` ב-dateTimePicker

הגדרת פעולה `all_widgets_are_required` בתפריט הנפתח