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

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

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

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

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

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

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

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

• שירות HTTP עם Google Cloud Functions
• ‫Google Apps Script
• ‫Google Cloud Dialogflow CX
• ‫Google Cloud Pub/Sub

הוספת כפתור

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הוספת מתג

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

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

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

מילוי דינמי של תפריטים נפתחים

זמין באפליקציות ל-Google Chat.

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

איכלוס פריטים מ-Google Workspace

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

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

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}

איכלוס פריטים ממקור נתונים חיצוני

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

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

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

כדי לצמצם את מספר הבקשות למקור נתונים דינמי, אפשר לכלול פריטים מוצעים שמופיעים בתפריט הנפתח לפני שהמשתמשים מקלידים. אפשר גם להגדיר את התפריט הנפתח להשלמה אוטומטית של פריטים על סמך מה שהמשתמשים מקלידים. לשם כך צריך להגדיר את min_characters_trigger בתוך DataSourceConfig. כשהמשתמש מקליד לפחות את מספר התווים שצוין ב-min_characters_trigger, מופעלת הפונקציה שצוינה ב-remoteDataSource. אובייקט האירוע שמועבר לפונקציה כולל את הקלט של המשתמש במפתח autocomplete_widget_query.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'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")]
}

.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")))))))))));

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:

/**
 * 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
  };
}

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
  }

// 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);
}

/**
 * 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 בבחירה מרובה

{
  "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

{
  "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 בתפריט הנפתח

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

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

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

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

{
  "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.

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

• ButtonList
• Button
• Color
• knownIcon
• SelectionInput
• TextInput
• ווידג'ט DateTimePicker