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

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