Trang này được dịch bởi Cloud Translation API.

Thêm thành phần giao diện người dùng tương tác vào thẻ

Trang này giải thích cách thêm tiện ích và thành phần trên giao diện người dùng vào thẻ để người dùng có thể tương tác với ứng dụng Google Chat, chẳng hạn như bằng cách nhấp vào một nút hoặc gửi thông tin.

Các ứng dụng trong Chat có thể dùng những giao diện sau đây trong Chat để tạo thẻ tương tác:

Tin nhắn chứa một hoặc nhiều thẻ.
Trang chủ là một thẻ xuất hiện trong thẻ Trang chủ trong tin nhắn trực tiếp bằng ứng dụng Chat.
Hộp thoại là các thẻ mở trong một cửa sổ mới từ tin nhắn và trang chủ.

Khi người dùng tương tác với thẻ, ứng dụng Chat có thể sử dụng dữ liệu mà họ nhận được để xử lý và phản hồi cho phù hợp. Để biết thông tin chi tiết, hãy xem phần Thu thập và xử lý thông tin của người dùng Google Chat.

Sử dụng Trình tạo thẻ để thiết kế và xem trước thông báo cũng như giao diện người dùng của các ứng dụng trong Chat:

Mở Trình tạo thẻ

Điều kiện tiên quyết

Ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat có tính tương tác, hãy hoàn thành một trong các hướng dẫn bắt đầu nhanh sau đây dựa trên cấu trúc ứng dụng mà bạn muốn sử dụng:

Dịch vụ HTTP bằng Google Cloud Functions
Google Apps Script
Google Cloud Dialogflow CX
Google Cloud Pub/Sub

Thêm nút

Tiện ích ButtonList hiển thị một nhóm các nút. Nút có thể hiển thị văn bản, biểu tượng hoặc cả văn bản và biểu tượng. Mỗi Button hỗ trợ một thao tác OnClick xảy ra khi người dùng nhấp vào nút. Ví dụ:

Mở một siêu liên kết bằng OpenLink để cung cấp thêm thông tin cho người dùng.
Chạy một action chạy một hàm tuỳ chỉnh, chẳng hạn như gọi một API.

Để hỗ trợ tiếp cận, các nút hỗ trợ văn bản thay thế.

Thêm nút chạy một hàm tuỳ chỉnh

Sau đây là một thẻ bao gồm một tiện ích ButtonList có hai nút. Một nút sẽ mở tài liệu dành cho nhà phát triển Google Chat trong một thẻ mới. Nút còn lại chạy một hàm tuỳ chỉnh có tên là goToView() và truyền tham số viewType="BIRD EYE VIEW".

Thêm một nút theo kiểu Material Design

Phần sau đây cho thấy một tập hợp các nút theo các kiểu nút Material Design khác nhau.

Để áp dụng kiểu Material Design, đừng thêm thuộc tính "color".

Thêm nút có màu tuỳ chỉnh và nút đã tắt

Bạn có thể ngăn người dùng nhấp vào nút bằng cách đặt "disabled": "true".

Phần sau đây hiển thị một thẻ bao gồm một tiện ích ButtonList có hai nút. Một nút sử dụng trường Color để tuỳ chỉnh màu nền của nút. Nút còn lại bị vô hiệu hoá bằng trường Disabled, ngăn người dùng nhấp vào nút và thực thi hàm.

Thêm nút có biểu tượng

Phần sau đây cho thấy một thẻ bao gồm tiện ích ButtonList với 2 tiện ích biểu tượng Button. Một nút sử dụng trường knownIcon để hiển thị biểu tượng email tích hợp của Google Chat. Nút còn lại sử dụng trường iconUrl để hiển thị tiện ích biểu tượng tuỳ chỉnh.

Thêm nút có biểu tượng và văn bản

Dưới đây là một thẻ bao gồm tiện ích ButtonList nhắc người dùng gửi email. Nút đầu tiên hiển thị biểu tượng email và nút thứ hai hiển thị văn bản. Người dùng có thể nhấp vào biểu tượng hoặc nút văn bản để chạy hàm sendEmail.

Tuỳ chỉnh nút cho một mục có thể thu gọn

Tuỳ chỉnh nút điều khiển thu gọn và mở rộng các phần trong thẻ. Chọn trong số nhiều biểu tượng hoặc hình ảnh để thể hiện trực quan nội dung của phần, giúp người dùng hiểu và tương tác với thông tin dễ dàng hơn.

Thêm trình đơn mục bổ sung

Bạn có thể sử dụng Overflow menu trong thẻ Chat để cung cấp các lựa chọn và hành động khác. Tính năng này cho phép bạn thêm nhiều tuỳ chọn hơn mà không làm rối giao diện của thẻ, đảm bảo thiết kế gọn gàng và ngăn nắp.

Thêm danh sách Khối

Tiện ích ChipList cung cấp một cách linh hoạt và hấp dẫn về mặt hình ảnh để hiển thị thông tin. Sử dụng danh sách khối để biểu thị thẻ, danh mục hoặc dữ liệu có liên quan khác, giúp người dùng dễ dàng di chuyển và tương tác với nội dung của bạn.

Thu thập thông tin từ người dùng

Phần này giải thích cách bạn có thể thêm các tiện ích thu thập thông tin, chẳng hạn như văn bản hoặc các lựa chọn.

Để tìm hiểu cách xử lý nội dung mà người dùng nhập, hãy xem phần Thu thập và xử lý thông tin từ người dùng Google Chat.

Thu thập văn bản

Tiện ích TextInput cung cấp một trường để người dùng có thể nhập văn bản. Tiện ích này hỗ trợ các đề xuất giúp người dùng nhập dữ liệu đồng nhất và các thao tác khi thay đổi, tức là Actions chạy khi có thay đổi trong trường nhập văn bản, chẳng hạn như người dùng thêm hoặc xoá văn bản.

Khi bạn cần thu thập dữ liệu trừu tượng hoặc không xác định từ người dùng, hãy sử dụng tiện ích TextInput này. Để thu thập dữ liệu đã xác định từ người dùng, hãy sử dụng tiện ích SelectionInput.

Sau đây là một thẻ bao gồm tiện ích TextInput:

Thu thập ngày hoặc giờ

Tiện ích DateTimePicker cho phép người dùng nhập ngày, giờ hoặc cả ngày và giờ. Hoặc người dùng có thể sử dụng bộ chọn để chọn ngày và giờ. Nếu người dùng nhập ngày hoặc giờ không hợp lệ, bộ chọn sẽ hiển thị lỗi nhắc người dùng nhập thông tin chính xác.

Phần sau đây hiển thị một thẻ bao gồm ba loại tiện ích DateTimePicker khác nhau:

Cho phép người dùng chọn các mục

Tiện ích SelectionInput cung cấp một tập hợp các mục có thể chọn, chẳng hạn như hộp đánh dấu, nút chọn, nút chuyển hoặc trình đơn thả xuống. Bạn có thể sử dụng tiện ích này để thu thập dữ liệu được xác định và chuẩn hoá từ người dùng. Để thu thập dữ liệu chưa xác định từ người dùng, hãy sử dụng tiện ích TextInput.

Tiện ích SelectionInput hỗ trợ các đề xuất, giúp người dùng nhập dữ liệu đồng nhất và thao tác khi thay đổi, chẳng hạn như Actions sẽ chạy khi có thay đổi xảy ra trong trường nhập dữ liệu lựa chọn, chẳng hạn như người dùng chọn hoặc bỏ chọn một mục.

Ứng dụng trò chuyện có thể nhận và xử lý giá trị của các mục đã chọn. Để biết thông tin chi tiết về cách xử lý dữ liệu đầu vào của biểu mẫu, hãy xem phần Xử lý thông tin do người dùng nhập.

Phần này cung cấp ví dụ về các thẻ sử dụng tiện ích SelectionInput. Các ví dụ sử dụng nhiều loại dữ liệu đầu vào cho phần:

Hộp đánh dấu
Nút chọn
Nút chuyển
Trình đơn thả xuống
Trình đơn nhiều lựa chọn

Thêm hộp đánh dấu

Nội dung sau đây hiển thị một thẻ yêu cầu người dùng chỉ định xem một người liên hệ là chuyên nghiệp, cá nhân hay cả hai, với một tiện ích SelectionInput sử dụng hộp đánh dấu:

Thêm nút chọn

Nội dung sau đây hiển thị một thẻ yêu cầu người dùng chỉ định xem một người liên hệ là chuyên nghiệp hay cá nhân bằng tiện ích SelectionInput sử dụng các nút chọn:

Thêm một nút chuyển

Phần sau đây cho thấy một thẻ yêu cầu người dùng chỉ định một người liên hệ là thông tin chuyên nghiệp, cá nhân hay cả hai thông qua một tiện ích SelectionInput sử dụng công tắc:

Nội dung sau đây hiển thị một thẻ yêu cầu người dùng chỉ định xem một người liên hệ là chuyên nghiệp hay cá nhân bằng tiện ích SelectionInput sử dụng trình đơn thả xuống:

Sau đây là một thẻ yêu cầu người dùng chọn danh bạ trong trình đơn nhiều lựa chọn:

Bạn có thể điền sẵn các mục cho một trình đơn chọn nhiều mục từ các nguồn dữ liệu sau trong Google Workspace:

Người dùng Google Workspace: Bạn chỉ có thể điền sẵn người dùng trong cùng một tổ chức Google Workspace.
Phòng Chat: Người dùng nhập các mục trong trình đơn chọn nhiều mục chỉ có thể xem và chọn các phòng mà họ thuộc về trong tổ chức Google Workspace.

Để sử dụng nguồn dữ liệu của Google Workspace, bạn cần chỉ định trường platformDataSource. Không giống như các loại dữ liệu đầu vào lựa chọn khác, bạn bỏ qua các đối tượng SectionItem vì các mục lựa chọn này được lấy nguồn động từ Google Workspace.

Mã sau đây cho thấy trình đơn chọn nhiều người dùng Google Workspace. Để điền người dùng, dữ liệu đầu vào của lựa chọn sẽ đặt commonDataSource thành USER:

JSON

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

Mã sau đây cho thấy trình đơn chọn nhiều không gian trò chuyện. Để điền khoảng trắng, dữ liệu đầu vào lựa chọn sẽ chỉ định trường hostAppDataSource. Trình đơn nhiều lựa chọn cũng đặt defaultToCurrentSpace thành true, giúp không gian hiện tại trở thành lựa chọn mặc định trong trình đơn:

JSON

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

Trình đơn đa lựa chọn cũng có thể điền các mục từ nguồn dữ liệu bên thứ ba hoặc bên ngoài. Ví dụ: bạn có thể sử dụng trình đơn nhiều lựa chọn để giúp người dùng chọn trong danh sách khách hàng tiềm năng bán hàng từ hệ thống quản lý quan hệ khách hàng (CRM).

Để sử dụng nguồn dữ liệu bên ngoài, bạn sử dụng trường externalDataSource để chỉ định một hàm trả về các mục từ nguồn dữ liệu.

Để giảm số lượng yêu cầu đến nguồn dữ liệu bên ngoài, bạn có thể đưa các mục đề xuất xuất hiện trong trình đơn nhiều lựa chọn trước khi người dùng nhập vào trình đơn. Ví dụ: bạn có thể điền các địa chỉ liên hệ được tìm kiếm gần đây cho người dùng. Để điền sẵn các mục đề xuất từ một nguồn dữ liệu bên ngoài, hãy chỉ định các đối tượng SelectionItem.

Mã sau đây cho thấy trình đơn đa lựa chọn các mục từ một nhóm liên hệ bên ngoài cho người dùng. Theo mặc định, trình đơn sẽ hiển thị một người liên hệ và chạy hàm getContacts để truy xuất và điền các mục từ nguồn dữ liệu bên ngoài:

Node.js

node/selection-input/index.js

Xem trên GitHub

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

Python

python/selection-input/main.py

Xem trên GitHub

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

Java

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

Xem trên GitHub

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

Apps Script

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

Xem trên GitHub

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

Đối với các nguồn dữ liệu bên ngoài, bạn cũng có thể tự động điền các mục mà người dùng bắt đầu nhập trong trình đơn nhiều lựa chọn. Ví dụ: nếu người dùng bắt đầu nhập Atl cho một trình đơn điền sẵn các thành phố ở Hoa Kỳ, thì ứng dụng Chat của bạn có thể tự động đề xuất Atlanta trước khi người dùng nhập xong. Bạn có thể tự động hoàn thành tối đa 100 mục.

Để tự động hoàn thành các mục, bạn tạo một hàm truy vấn nguồn dữ liệu bên ngoài và trả về các mục bất cứ khi nào người dùng nhập vào trình đơn nhiều lựa chọn. Hàm phải thực hiện những việc sau:

Truyền một đối tượng sự kiện đại diện cho hoạt động tương tác của người dùng với trình đơn.
Xác định rằng giá trị invokedFunction của sự kiện tương tác khớp với hàm trong trường externalDataSource.
Khi các hàm khớp, hãy trả về các mục được đề xuất từ nguồn dữ liệu bên ngoài. Để đề xuất các mục dựa trên nội dung người dùng nhập, hãy lấy giá trị cho khoá autocomplete_widget_query. Giá trị này thể hiện nội dung mà người dùng nhập vào trình đơn.

Mã sau đây tự động hoàn thành các mục từ một tài nguyên dữ liệu bên ngoài. Sử dụng ví dụ trước, ứng dụng Chat đề xuất các mục dựa trên thời điểm kích hoạt hàm getContacts:

Node.js

node/selection-input/index.js

Xem trên GitHub

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

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

Python

python/selection-input/main.py

Xem trên GitHub

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


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

Java

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

Xem trên GitHub

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

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

Apps Script

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

Xem trên GitHub

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

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

Xác thực dữ liệu được nhập vào thẻ

Trang này giải thích cách xác thực dữ liệu được nhập vào action và tiện ích của thẻ. Ví dụ: bạn có thể xác thực rằng trường nhập văn bản có văn bản do người dùng nhập hoặc chứa một số ký tự nhất định.

Đặt các tiện ích bắt buộc cho hành động

Trong action của thẻ, hãy thêm tên các tiện ích mà một hành động cần đến vào danh sách requiredWidgets của thẻ đó.

Nếu bất kỳ tiện ích nào được liệt kê ở đây không có giá trị khi hành động này được gọi, thì thao tác gửi hành động biểu mẫu sẽ bị huỷ.

Khi "all_widgets_are_required": "true" được đặt cho một hành động, thì hành động này sẽ yêu cầu tất cả các tiện ích trong thẻ.

Đặt thao tác `all_widgets_are_required` trong chế độ nhiều lựa chọn

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

Đặt thao tác `all_widgets_are_required` trong 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"
          }
        }
      ]
    }
  ]
}

Thiết lập một hành động `all_widgets_are_required` trong trình đơn thả xuống

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

Thiết lập quy trình xác thực cho tiện ích nhập văn bản

Trong trường xác thực của tiện ích textInput, bạn có thể chỉ định giới hạn ký tự và loại dữ liệu đầu vào cho tiện ích nhập văn bản này.

Đặt giới hạn ký tự cho tiện ích nhập văn bản

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

Đặt loại dữ liệu nhập cho tiện ích nhập văn bản

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

Khắc phục sự cố

Khi một ứng dụng hoặc thẻ Google Chat trả về lỗi, giao diện Chat sẽ hiển thị một thông báo cho biết "Đã xảy ra lỗi". hoặc "Không thể xử lý yêu cầu của bạn". Đôi khi, giao diện người dùng Chat không hiển thị thông báo lỗi nào, nhưng ứng dụng Chat hoặc thẻ lại tạo ra kết quả không mong muốn; ví dụ: thông báo thẻ có thể không xuất hiện.

Mặc dù thông báo lỗi có thể không hiển thị trong giao diện người dùng Chat, nhưng bạn có thể xem thông báo lỗi mô tả và dữ liệu nhật ký để khắc phục lỗi khi bật tính năng ghi nhật ký lỗi cho ứng dụng Chat. Để được trợ giúp xem, gỡ lỗi và sửa lỗi, hãy xem bài viết Khắc phục sự cố và sửa lỗi Google Chat.

Thêm thành phần giao diện người dùng tương tác vào thẻ

Điều kiện tiên quyết

Thêm nút

Thêm nút chạy một hàm tuỳ chỉnh

Thêm một nút theo kiểu Material Design

Thêm nút có màu tuỳ chỉnh và nút đã tắt

Thêm nút có biểu tượng

Thêm nút có biểu tượng và văn bản

Tuỳ chỉnh nút cho một mục có thể thu gọn

Thêm trình đơn mục bổ sung

Thêm danh sách Khối

Thu thập thông tin từ người dùng

Thu thập văn bản

Thu thập ngày hoặc giờ

Cho phép người dùng chọn các mục

Thêm hộp đánh dấu

Thêm nút chọn

Thêm một nút chuyển

Thêm trình đơn thả xuống

Thêm trình đơn nhiều lựa chọn

JSON

JSON

Node.js

Python

Java

Apps Script

Node.js

Python

Java

Apps Script

Xác thực dữ liệu được nhập vào thẻ

Đặt các tiện ích bắt buộc cho hành động

Đặt thao tác all_widgets_are_required trong chế độ nhiều lựa chọn

JSON

Đặt thao tác all_widgets_are_required trong dateTimePicker

JSON

Thiết lập một hành động all_widgets_are_required trong trình đơn thả xuống

JSON

Thiết lập quy trình xác thực cho tiện ích nhập văn bản

Đặt giới hạn ký tự cho tiện ích nhập văn bản

JSON

Đặt loại dữ liệu nhập cho tiện ích nhập văn bản

JSON

Khắc phục sự cố

Chủ đề có liên quan

Đặt thao tác `all_widgets_are_required` trong chế độ nhiều lựa chọn

Đặt thao tác `all_widgets_are_required` trong dateTimePicker

Thiết lập một hành động `all_widgets_are_required` trong trình đơn thả xuống