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

בדף הזה נסביר איך מוסיפים ווידג'טים ורכיבי ממשק משתמש לכרטיסים, כדי שהמשתמשים יוכלו לקיים אינטראקציה עם אפליקציית 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, לא כוללים את המאפיין 'color'.

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

אפשר למנוע ממשתמשים ללחוץ על לחצן על ידי הגדרת "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. בניגוד לסוגים אחרים של קלט של אפשרויות בחירה, צריך להשמיט אובייקטים מסוג 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.

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