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

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

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

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

כשמשתמשים מקיימים אינטראקציה עם כרטיסים, אפליקציות ל-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.

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

הוספת כפתור עם צבע בהתאמה אישית וכפתור מושבת

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

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

הוספת כפתור עם סמל

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

הוספת כפתור עם סמל וטקסט

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

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

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

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

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

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

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

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

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

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

איסוף טקסט

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

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

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

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

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

בתמונה הבאה מוצג כרטיס שמורכב משלושה סוגים שונים של DateTimePickerווידג'טים:

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

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

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

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

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

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

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

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

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

הוספת מתג

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

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

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

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

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

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

כדי להשתמש במקורות נתונים של Google Workspace, צריך לציין את השדה platformDataSource. בשונה מסוגים אחרים של קלט לבחירה, לא צריך להוסיף אובייקטים של SelectionItem כי פריטי הבחירה האלה נלקחים באופן דינמי מ-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 objects.

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

Node.js

node/selection-input/index.js
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
'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
.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
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
/**
 * 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
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
// 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
/**
 * 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.