Bạn có 5 phút? Hãy giúp chúng tôi cải thiện tài liệu dành cho nhà phát triển Google Chat bằng cách tham gia khảo sát nhanh.

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

Switch to English

Cards v2

Thẻ

Giao diện thẻ xuất hiện trong tin nhắn trên Google Chat hoặc tiện ích bổ sung của Google Workspace.

Thẻ hỗ trợ bố cục đã xác định, các thành phần trên giao diện người dùng tương tác như nút và nội dung đa phương tiện như hình ảnh. Sử dụng các thẻ để trình bày thông tin chi tiết, thu thập thông tin từ người dùng và hướng dẫn người dùng thực hiện bước tiếp theo.

Để tìm hiểu cách tạo thẻ, hãy xem các tài liệu sau:

Đối với các ứng dụng Google Chat, hãy xem bài viết Thiết kế giao diện người dùng linh động, tương tác và nhất quán bằng thẻ.
Đối với Tiện ích bổ sung của Google Workspace, hãy xem bài viết Giao diện dựa trên thẻ.

Ví dụ: Tin nhắn thẻ cho một ứng dụng Google Chat

Ví dụ về thẻ liên hệ

Để tạo tin nhắn thẻ mẫu trong Google Chat, hãy sử dụng định dạng JSON sau:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ "header": { object (`CardHeader`) }, "sections": [ { object (`Section`) } ], "sectionDividerStyle": enum (`DividerStyle`), "cardActions": [ { object (`CardAction`) } ], "name": string, "fixedFooter": { object (`CardFixedFooter`) }, "displayStyle": enum (`DisplayStyle`), "peekCardHeader": { object (`CardHeader`) } }

{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}

Các trường
`header`	`object (CardHeader)` Tiêu đề của thẻ. Tiêu đề thường chứa hình ảnh hàng đầu và tiêu đề. Tiêu đề luôn xuất hiện ở đầu thẻ.
`sections[]`	`object (Section)` Chứa một bộ sưu tập các tiện ích. Mỗi phần đều có tiêu đề riêng và không bắt buộc. Các phần được phân tách trực quan bằng đường phân cách. Để biết ví dụ trong các ứng dụng Google Chat, hãy xem phần Thẻ.
`sectionDividerStyle`	`enum (DividerStyle)` Kiểu phân chia giữa các phần.
`cardActions[]`	`object (CardAction)` Hành động của thẻ. Các thao tác sẽ được thêm vào trình đơn thanh công cụ của thẻ. Vì thẻ ứng dụng trong Chat không có thanh công cụ nên `cardActions[]` không được các ứng dụng trong Chat hỗ trợ. Ví dụ: JSON sau đây tạo trình đơn thao tác đối với thẻ với các tuỳ chọn `Settings` và `Send Feedback`: `"cardActions": [ { "actionLabel": "Settings", "onClick": { "action": { "functionName": "goToView", "parameters": [ { "key": "viewType", "value": "SETTING" } ], "loadIndicator": "LoadIndicator.SPINNER" } } }, { "actionLabel": "Send Feedback", "onClick": { "openLink": { "url": "https://example.com/feedback" } } } ]`
`name`	`string` Tên thẻ. Được dùng làm mã nhận dạng thẻ khi điều hướng thẻ. Vì các ứng dụng trong Chat không hỗ trợ di chuyển thẻ nên sẽ bỏ qua trường này.
`fixedFooter`	`object (CardFixedFooter)` Chân trang đã sửa lỗi hiển thị ở cuối thẻ này. Việc đặt `fixedFooter` mà không chỉ định `primaryButton` hoặc `secondaryButton` sẽ gây ra lỗi. Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace và các ứng dụng nhắn tin. Đối với các ứng dụng Chat, bạn có thể dùng chân trang cố định trong hộp thoại, nhưng không dùng được tin nhắn thẻ.
`displayStyle`	`enum (DisplayStyle)` Trong các tiện ích bổ sung của Google Workspace, hãy thiết lập các thuộc tính hiển thị của `peekCardHeader`. Không được các ứng dụng Chat hỗ trợ.
`peekCardHeader`	`object (CardHeader)` Khi hiển thị nội dung theo ngữ cảnh, tiêu đề thẻ xem trước hoạt động như một phần giữ chỗ để người dùng có thể di chuyển tiến giữa các thẻ trang chủ và thẻ theo ngữ cảnh. Không được các ứng dụng Chat hỗ trợ.

Tiêu đề thẻ

Đại diện cho tiêu đề thẻ. Để biết ví dụ trong các ứng dụng Google Chat, hãy xem phần Tiêu đề thẻ.

Biểu diễn dưới dạng JSON
{ "title": string, "subtitle": string, "imageType": enum (`ImageType`), "imageUrl": string, "imageAltText": string }

Các trường
`title`	`string` Bắt buộc. Tiêu đề thẻ. Tiêu đề có chiều cao cố định: nếu bạn chỉ định cả tiêu đề và phụ đề thì mỗi tiêu đề sẽ chiếm một dòng. Nếu chỉ có tiêu đề được chỉ định, tiêu đề sẽ chiếm cả hai dòng.
`subtitle`	`string` Tiêu đề phụ của tiêu đề thẻ. Nếu được chỉ định, mã này sẽ xuất hiện trên dòng riêng bên dưới `title`.
`imageType`	`enum (ImageType)` Hình dạng dùng để cắt hình ảnh.
`imageUrl`	`string` URL HTTPS của hình ảnh trong tiêu đề thẻ.
`imageAltText`	`string` Văn bản thay thế của hình ảnh này được dùng cho khả năng hỗ trợ tiếp cận.

Loại hình ảnh

Hình dạng dùng để cắt hình ảnh.

Enum
`SQUARE`	Giá trị mặc định. Áp dụng mặt nạ vuông cho hình ảnh. Ví dụ: một ảnh 4x3 sẽ trở thành 3x3.
`CIRCLE`	Áp dụng mặt nạ tròn cho hình ảnh. Ví dụ: hình ảnh 4x3 sẽ trở thành một hình tròn có đường kính bằng 3.

Mục

Phần chứa một tập hợp các tiện ích hiển thị theo chiều dọc theo thứ tự được chỉ định.

Biểu diễn dưới dạng JSON
{ "header": string, "widgets": [ { object (`Widget`) } ], "collapsible": boolean, "uncollapsibleWidgetsCount": integer }

Các trường
`header`	`string` Văn bản xuất hiện ở đầu phần. Hỗ trợ văn bản có định dạng HTML đơn giản. Để biết thêm thông tin về cách định dạng văn bản, hãy xem các bài viết Định dạng văn bản trong các ứng dụng Google Chat và Định dạng văn bản trong Tiện ích bổ sung của Google Workspace.
`widgets[]`	`object (Widget)` Tất cả tiện ích trong phần này. Phải chứa ít nhất một tiện ích.
`collapsible`	`boolean` Cho biết phần này có thể thu gọn hay không. Các phần có thể thu gọn sẽ ẩn một số hoặc tất cả tiện ích, nhưng người dùng có thể mở rộng phần đó để hiển thị các tiện ích bị ẩn bằng cách nhấp vào Hiện thêm. Người dùng có thể ẩn lại các tiện ích bằng cách nhấp vào Show less (Ẩn bớt). Để xác định tiện ích nào bị ẩn, hãy chỉ định `uncollapsibleWidgetsCount`.
`uncollapsibleWidgetsCount`	`integer` Số lượng tiện ích không thể thu gọn vẫn hiển thị ngay cả khi một mục đã được thu gọn. Ví dụ: khi một phần chứa 5 tiện ích và `uncollapsibleWidgetsCount` được đặt thành `2`, thì 2 tiện ích đầu tiên sẽ luôn hiển thị và 3 tiện ích cuối cùng được thu gọn theo mặc định. `uncollapsibleWidgetsCount` chỉ được xem xét khi `collapsible` là `true`.

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ "horizontalAlignment": enum (`HorizontalAlignment`), // Union field `data` can be only one of the following: "textParagraph": { object (`TextParagraph`) }, "image": { object (`Image`) }, "decoratedText": { object (`DecoratedText`) }, "buttonList": { object (`ButtonList`) }, "textInput": { object (`TextInput`) }, "selectionInput": { object (`SelectionInput`) }, "dateTimePicker": { object (`DateTimePicker`) }, "divider": { object (`Divider`) }, "grid": { object (`Grid`) }, "columns": { object (`Columns`) } // End of list of possible types for union field `data`. }

{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  }
  // End of list of possible types for union field data.
}

Các trường
`horizontalAlignment`	`enum (HorizontalAlignment)` Chỉ định xem các tiện ích có căn chỉnh ở bên trái, bên phải hay giữa cột hay không.
Trường nhóm `data`. Một tiện ích chỉ có thể có một trong các mục sau đây. Bạn có thể sử dụng nhiều trường tiện ích để hiển thị nhiều mục hơn. `data` chỉ có thể là một trong những trạng thái sau đây:
`textParagraph`	`object (TextParagraph)` Hiện một đoạn văn bản. Hỗ trợ văn bản có định dạng HTML đơn giản. Để biết thêm thông tin về cách định dạng văn bản, hãy xem các bài viết Định dạng văn bản trong các ứng dụng Google Chat và Định dạng văn bản trong Tiện ích bổ sung của Google Workspace. Ví dụ: JSON sau đây sẽ tạo văn bản in đậm: `"textParagraph": { "text": " <b>bold text</b>" }`
`image`	`object (Image)` Hiển thị một hình ảnh. Ví dụ: JSON sau đây sẽ tạo một hình ảnh có văn bản thay thế: `"image": { "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }`
`decoratedText`	`object (DecoratedText)` Hiển thị một mục văn bản được trang trí. Ví dụ: JSON sau đây sẽ tạo một tiện ích văn bản được trang trí hiển thị địa chỉ email: `"decoratedText": { "icon": { "knownIcon": "EMAIL" }, "topLabel": "Email Address", "text": "sasha@example.com", "bottomLabel": "This is a new Email address!", "switchControl": { "name": "has_send_welcome_email_to_sasha", "selected": false, "controlType": "CHECKBOX" } }`
`buttonList`	`object (ButtonList)` Danh sách các nút. Ví dụ: JSON sau đây sẽ tạo hai nút. Đầu tiên là nút văn bản màu xanh dương và nút thứ hai là nút hình ảnh mở ra một đường liên kết: `"buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1 }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }`
`textInput`	`object (TextInput)` Hiển thị hộp văn bản mà người dùng có thể nhập vào. Ví dụ: JSON sau đây sẽ tạo một mục nhập văn bản cho một địa chỉ email: `"textInput": { "name": "mailing_address", "label": "Mailing Address" }` Một ví dụ khác là JSON sau đây sẽ tạo dữ liệu nhập văn bản cho một ngôn ngữ lập trình với các đề xuất tĩnh: `"textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }`
`selectionInput`	`object (SelectionInput)` Hiển thị thành phần điều khiển lựa chọn cho phép người dùng chọn mục. Các thành phần điều khiển lựa chọn có thể là hộp đánh dấu, nút chọn, công tắc hoặc trình đơn thả xuống. Ví dụ: JSON sau đây sẽ tạo một trình đơn thả xuống để người dùng chọn kích thước: `"selectionInput": { "name": "size", "label": "Size" "type": "DROPDOWN", "items": [ { "text": "S", "value": "small", "selected": false }, { "text": "M", "value": "medium", "selected": true }, { "text": "L", "value": "large", "selected": false }, { "text": "XL", "value": "extra_large", "selected": false } ] }`
`dateTimePicker`	`object (DateTimePicker)` Hiển thị một tiện ích cho phép người dùng nhập ngày, giờ hoặc ngày giờ. Ví dụ: JSON sau đây tạo một bộ chọn ngày giờ để lên lịch cuộc hẹn: `"dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }`
`divider`	`object (Divider)` Hiển thị đường phân chia đường kẻ ngang giữa các tiện ích. Ví dụ: JSON sau đây sẽ tạo một đường phân chia: `"divider": { }`
`grid`	`object (Grid)` Hiển thị lưới chứa một tập hợp các mục. Lưới hỗ trợ số lượng cột và mục bất kỳ. Số lượng hàng được xác định bằng giới hạn trên của các mục số chia cho số cột. Lưới có 10 mục và 2 cột thì có 5 hàng. Một lưới có 11 mục và 2 cột thì có 6 hàng. Ví dụ: JSON sau đây tạo lưới 2 cột chứa một mục duy nhất: `"grid": { "title": "A fine collection of items", "columnCount": 2, "borderStyle": { "type": "STROKE", "cornerRadius": 4 }, "items": [ { "image": { "imageUri": "https://www.example.com/image.png", "cropStyle": { "type": "SQUARE" }, "borderStyle": { "type": "STROKE" } }, "title": "An item", "textAlignment": "CENTER" } ], "onClick": { "openLink": { "url": "https://www.example.com" } } }`
`columns`	`object (Columns)` Hiển thị tối đa 2 cột. Để thêm nhiều hơn 2 cột hoặc để sử dụng hàng, hãy sử dụng tiện ích `Grid`. Ví dụ: JSON sau đây sẽ tạo 2 cột, mỗi cột chứa đoạn văn bản: `"columns": { "columnItems": [ { "horizontalSizeStyle": "FILL_AVAILABLE_SPACE", "horizontalAlignment": "CENTER", "verticalAlignment": "CENTER", "widgets": [ { "textParagraph": { "text": "First column text paragraph" } } ] }, { "horizontalSizeStyle": "FILL_AVAILABLE_SPACE", "horizontalAlignment": "CENTER", "verticalAlignment": "CENTER", "widgets": [ { "textParagraph": { "text": "Second column text paragraph" } } ] } ] }`

Đoạn văn bản

Một đoạn văn bản hỗ trợ định dạng. Để tham khảo ví dụ trong các ứng dụng Google Chat, hãy xem phần Đoạn văn bản. Để biết thêm thông tin về cách định dạng văn bản, hãy xem các bài viết Định dạng văn bản trong các ứng dụng Google Chat và Định dạng văn bản trong Tiện ích bổ sung của Google Workspace.

Biểu diễn dưới dạng JSON
{ "text": string }

Các trường

Các trường
`text`	`string` Văn bản được hiển thị trong tiện ích.

text

string

Văn bản được hiển thị trong tiện ích.

Bài đăng có hình ảnh

Hình ảnh do một URL chỉ định và có thể thực hiện thao tác onClick. Để biết ví dụ, hãy xem phần Hình ảnh.

Biểu diễn dưới dạng JSON
{ "imageUrl": string, "onClick": { object (`OnClick`) }, "altText": string }

Các trường

Các trường
`imageUrl`	`string` URL loại HTTPS lưu trữ hình ảnh. Ví dụ: `https://developers.google.com/chat/images/quickstart-app-avatar.png`
`onClick`	`object (OnClick)` Khi người dùng nhấp vào hình ảnh, lượt nhấp sẽ kích hoạt hành động này.
`altText`	`string` Văn bản thay thế của hình ảnh này được dùng cho khả năng hỗ trợ tiếp cận.

imageUrl

string

URL loại HTTPS lưu trữ hình ảnh.

Ví dụ:

https://developers.google.com/chat/images/quickstart-app-avatar.png

onClick

object (OnClick)

Khi người dùng nhấp vào hình ảnh, lượt nhấp sẽ kích hoạt hành động này.

altText

string

Văn bản thay thế của hình ảnh này được dùng cho khả năng hỗ trợ tiếp cận.

Khi nhấp chuột

Biểu thị cách phản hồi khi người dùng nhấp vào một thành phần tương tác trên thẻ, chẳng hạn như nút.

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ // Union field `data` can be only one of the following: "action": { object (`Action`) }, "openLink": { object (`OpenLink`) }, "openDynamicLinkAction": { object (`Action`) }, "card": { object (`Card`) } // End of list of possible types for union field `data`. }

{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}

Các trường
Trường nhóm `data`. `data` chỉ có thể là một trong những trạng thái sau đây:
`action`	`object (Action)` Nếu được chỉ định, một hành động sẽ được `onClick` này kích hoạt.
`openLink`	`object (OpenLink)` Nếu được chỉ định, `onClick` này sẽ kích hoạt một thao tác mở đường liên kết.
`openDynamicLinkAction`	`object (Action)` Tiện ích bổ sung kích hoạt hành động này khi hành động cần mở một đường liên kết. Thuộc tính này khác với `openLink` ở trên vì mã này cần giao tiếp với máy chủ để lấy đường liên kết. Do đó, ứng dụng web cần thực hiện một số công việc chuẩn bị trước khi phản hồi hành động liên kết mở trở lại. Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace, nhưng không được hỗ trợ bởi các ứng dụng Google Chat.
`card`	`object (Card)` Thẻ mới được đẩy tới ngăn xếp thẻ sau khi nhấp nếu được chỉ định. Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace, nhưng không được hỗ trợ bởi các ứng dụng Google Chat.

Thao tác

Hành động mô tả hành vi khi biểu mẫu được gửi. Ví dụ: bạn có thể gọi một tập lệnh Apps Script để xử lý biểu mẫu. Nếu hành động này được kích hoạt, thì các giá trị của biểu mẫu sẽ được gửi đến máy chủ.

Biểu diễn dưới dạng JSON
{ "function": string, "parameters": [ { object (`ActionParameter`) } ], "loadIndicator": enum (`LoadIndicator`), "persistValues": boolean, "interaction": enum (`Interaction`) }

Các trường
`function`	`string` Một hàm tuỳ chỉnh để gọi khi phần tử chứa được nhấp hoặc kích hoạt từ đầu đến cuối. Ví dụ về cách sử dụng, hãy xem phần Tạo thẻ tương tác.
`parameters[]`	`object (ActionParameter)` Danh sách các thông số hành động.
`loadIndicator`	`enum (LoadIndicator)` Chỉ định chỉ báo đang tải mà hành động hiển thị trong khi thực hiện lời kêu gọi hành động.
`persistValues`	`boolean` Cho biết liệu các giá trị biểu mẫu có tồn tại sau thao tác này hay không. Giá trị mặc định là `false`. Nếu `true`, các giá trị biểu mẫu vẫn còn sau khi hành động được kích hoạt. Để cho phép người dùng thực hiện các thay đổi trong khi hành động đang được xử lý, hãy đặt `LoadIndicator` thành `NONE`. Đối với tin nhắn thẻ trong ứng dụng nhắn tin, bạn cũng phải đặt `ResponseType` của thao tác thành `UPDATE_MESSAGE` và sử dụng cùng `cardId` từ thẻ có chứa thao tác đó. Nếu `false`, các giá trị biểu mẫu sẽ bị xoá khi hành động được kích hoạt. Để ngăn người dùng thực hiện thay đổi trong khi hành động đang được xử lý, hãy đặt `LoadIndicator` thành `SPINNER`.
`interaction`	`enum (Interaction)` Không bắt buộc. Bắt buộc khi mở một hộp thoại. Việc cần làm để phản hồi một hành động tương tác với người dùng, chẳng hạn như khi người dùng nhấp vào một nút trong thông báo trên thẻ. Nếu không chỉ định, ứng dụng sẽ phản hồi bằng cách thực thi `action` (chẳng hạn như mở một đường liên kết hoặc chạy một hàm) như bình thường. Bằng cách chỉ định `interaction`, ứng dụng có thể phản hồi theo những cách tương tác đặc biệt. Ví dụ: khi bạn đặt `interaction` thành `OPEN_DIALOG`, ứng dụng có thể mở một hộp thoại. Khi bạn chỉ định, chỉ báo tải sẽ không hiển thị. Được các ứng dụng Chat hỗ trợ, nhưng không được hỗ trợ bởi tiện ích bổ sung của Google Workspace. Nếu được chỉ định cho một tiện ích bổ sung, toàn bộ thẻ sẽ bị xoá và không có nội dung nào hiển thị trong ứng dụng.

Thông số hành động

Danh sách các thông số chuỗi cần cung cấp khi phương thức hành động được gọi. Ví dụ: hãy xem xét 3 nút tạm ẩn: tạm hoãn ngay bây giờ, tạm hoãn vào một ngày hoặc tạm ẩn vào tuần tới. Bạn có thể sử dụng action method = snooze(), truyền loại tạm ngưng và thời gian tạm ẩn trong danh sách các tham số chuỗi.

Để tìm hiểu thêm, hãy xem CommonEventObject.

Biểu diễn dưới dạng JSON
{ "key": string, "value": string }

Các trường

Các trường
`key`	`string` Tên của thông số cho tập lệnh hành động.
`value`	`string` Giá trị của thông số.

key

string

Tên của thông số cho tập lệnh hành động.

value

string

Giá trị của thông số.

Chỉ báo tải

Chỉ định chỉ báo đang tải mà hành động hiển thị trong khi thực hiện lời kêu gọi hành động.

Enum
`SPINNER`	Hiện một vòng quay để cho biết nội dung đang tải.
`NONE`	Không có gì hiển thị.

Tương tác

Không bắt buộc. Bắt buộc khi mở một hộp thoại.

Việc cần làm để phản hồi một hành động tương tác với người dùng, chẳng hạn như khi người dùng nhấp vào một nút trong thông báo trên thẻ.

Nếu không chỉ định, ứng dụng sẽ phản hồi bằng cách thực thi action (chẳng hạn như mở một đường liên kết hoặc chạy một hàm) như bình thường.

Bằng cách chỉ định interaction, ứng dụng có thể phản hồi theo những cách tương tác đặc biệt. Ví dụ: khi bạn đặt interaction thành OPEN_DIALOG, ứng dụng có thể mở một hộp thoại.

Khi bạn chỉ định, chỉ báo tải sẽ không hiển thị.

Được các ứng dụng Chat hỗ trợ, nhưng không được hỗ trợ bởi tiện ích bổ sung của Google Workspace. Nếu được chỉ định cho một tiện ích bổ sung, toàn bộ thẻ sẽ bị xoá và không có nội dung nào hiển thị trong ứng dụng.

Enum

INTERACTION_UNSPECIFIED Giá trị mặc định. action thực thi như bình thường.

Enum
`INTERACTION_UNSPECIFIED`	Giá trị mặc định. `action` thực thi như bình thường.
`OPEN_DIALOG`	Mở một hộp thoại, một giao diện dạng cửa sổ dạng thẻ mà các ứng dụng trong Chat dùng để tương tác với người dùng. Chỉ các ứng dụng trong Chat hỗ trợ người dùng nhấp vào nút trên tin nhắn trong thẻ. Không được tiện ích bổ sung của Google Workspace hỗ trợ. Nếu được chỉ định cho một tiện ích bổ sung, toàn bộ thẻ sẽ bị xoá và không có nội dung nào hiển thị trong ứng dụng.

OPEN_DIALOG

Mở một hộp thoại, một giao diện dạng cửa sổ dạng thẻ mà các ứng dụng trong Chat dùng để tương tác với người dùng.

Chỉ các ứng dụng trong Chat hỗ trợ người dùng nhấp vào nút trên tin nhắn trong thẻ.

Không được tiện ích bổ sung của Google Workspace hỗ trợ. Nếu được chỉ định cho một tiện ích bổ sung, toàn bộ thẻ sẽ bị xoá và không có nội dung nào hiển thị trong ứng dụng.

Mở đường liên kết

Đại diện cho một sự kiện onClick mở ra một đường siêu liên kết.

Biểu diễn dưới dạng JSON
{ "url": string, "openAs": enum (`OpenAs`), "onClose": enum (`OnClose`) }

Các trường

Các trường
`url`	`string` URL cần mở.
`openAs`	`enum (OpenAs)` Cách mở đường liên kết. Không được các ứng dụng Chat hỗ trợ.
`onClose`	`enum (OnClose)` Khách hàng có quên đường liên kết sau khi mở hay quan sát đường liên kết cho đến khi cửa sổ đóng không. Không được các ứng dụng Chat hỗ trợ.

url

string

URL cần mở.

openAs

enum (OpenAs)

Cách mở đường liên kết. Không được các ứng dụng Chat hỗ trợ.

onClose

enum (OnClose)

Khách hàng có quên đường liên kết sau khi mở hay quan sát đường liên kết cho đến khi cửa sổ đóng không. Không được các ứng dụng Chat hỗ trợ.

Mở dưới dạng

Khi thao tác OnClick mở một đường liên kết, ứng dụng có thể mở đường liên kết đó dưới dạng cửa sổ kích thước đầy đủ (nếu đó là khung được ứng dụng sử dụng) hoặc lớp phủ (chẳng hạn như cửa sổ bật lên). Việc triển khai phụ thuộc vào các tính năng của nền tảng ứng dụng và giá trị được chọn có thể bị bỏ qua nếu ứng dụng không hỗ trợ giá trị đó. FULL_SIZE được tất cả ứng dụng hỗ trợ.

Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace, nhưng không được hỗ trợ bởi các ứng dụng Google Chat.

Enum
`FULL_SIZE`	Đường liên kết sẽ mở ra dưới dạng cửa sổ có kích thước đầy đủ (nếu đó là khung được ứng dụng sử dụng).
`OVERLAY`	Đường liên kết sẽ mở dưới dạng lớp phủ, chẳng hạn như cửa sổ bật lên.

Đóng

Những gì ứng dụng sẽ làm khi một đường liên kết mở bằng thao tác OnClick bị đóng.

Cách triển khai phụ thuộc vào các chức năng của nền tảng ứng dụng. Ví dụ: một trình duyệt web có thể mở đường liên kết trong cửa sổ bật lên bằng trình xử lý OnClose.

Nếu cả hai trình xử lý OnOpen và OnClose đều được đặt và nền tảng ứng dụng không thể hỗ trợ cả hai giá trị, thì OnClose sẽ được ưu tiên.

Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace, nhưng không được hỗ trợ bởi các ứng dụng Google Chat.

Enum

NOTHING Giá trị mặc định. Thẻ không tải lại được; không có gì xảy ra.

Enum
`NOTHING`	Giá trị mặc định. Thẻ không tải lại được; không có gì xảy ra.
`RELOAD`	Tải lại thẻ sau khi cửa sổ con đóng lại. Nếu được dùng cùng với `OpenAs.OVERLAY`, cửa sổ con sẽ hoạt động như một hộp thoại phương thức và thẻ mẹ sẽ bị chặn cho đến khi cửa sổ con đóng lại.

RELOAD

Tải lại thẻ sau khi cửa sổ con đóng lại.

Nếu được dùng cùng với OpenAs.OVERLAY, cửa sổ con sẽ hoạt động như một hộp thoại phương thức và thẻ mẹ sẽ bị chặn cho đến khi cửa sổ con đóng lại.

Văn bản được trang trí

Tiện ích hiển thị văn bản có các thành phần trang trí tuỳ chọn, chẳng hạn như nhãn ở trên hoặc bên dưới văn bản, biểu tượng ở phía trước văn bản, tiện ích lựa chọn hoặc nút phía sau văn bản. Để tham khảo ví dụ về các ứng dụng Google Chat, hãy xem phần Văn bản được trang trí.

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ "icon": { object (`Icon`) }, "startIcon": { object (`Icon`) }, "topLabel": string, "text": string, "wrapText": boolean, "bottomLabel": string, "onClick": { object (`OnClick`) }, // Union field `control` can be only one of the following: "button": { object (`Button`) }, "switchControl": { object (`SwitchControl`) }, "endIcon": { object (`Icon`) } // End of list of possible types for union field `control`. }

{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}

Các trường
`icon (deprecated)`	`object (Icon)` Mục này không được dùng nữa! Ngừng sử dụng và thay bằng `startIcon`.
`startIcon`	`object (Icon)` Biểu tượng hiển thị phía trước văn bản.
`topLabel`	`string` Văn bản xuất hiện phía trên `text`. Luôn cắt ngắn.
`text`	`string` Bắt buộc. Văn bản chính. Hỗ trợ định dạng đơn giản. Để biết thêm thông tin về cách định dạng văn bản, hãy xem các bài viết Định dạng văn bản trong các ứng dụng Google Chat và Định dạng văn bản trong Tiện ích bổ sung của Google Workspace.
`wrapText`	`boolean` Chế độ cài đặt xuống dòng tự động. Nếu giá trị là `true`, văn bản sẽ xuống dòng và hiển thị trên nhiều dòng. Nếu không, văn bản sẽ bị cắt ngắn. Chỉ áp dụng cho `text`, không áp dụng cho `topLabel` và `bottomLabel`.
`bottomLabel`	`string` Văn bản xuất hiện bên dưới `text`. Luôn kết thúc.
`onClick`	`object (OnClick)` Hành động này được kích hoạt khi người dùng nhấp vào `topLabel` hoặc `bottomLabel`.
Trường nhóm `control`. Một nút, nút chuyển, hộp đánh dấu hoặc hình ảnh xuất hiện ở bên phải văn bản trong tiện ích `decoratedText`. `control` chỉ có thể là một trong những trạng thái sau đây:
`button`	`object (Button)` Nút mà người dùng có thể nhấp vào để kích hoạt một hành động.
`switchControl`	`object (SwitchControl)` Một tiện ích chuyển đổi mà người dùng có thể nhấp vào để thay đổi trạng thái và kích hoạt một hành động.
`endIcon`	`object (Icon)` Một biểu tượng xuất hiện sau văn bản. Hỗ trợ các biểu tượng tích hợp sẵn và tuỳ chỉnh.

Biểu tượng

Một biểu tượng xuất hiện trong tiện ích trên thẻ. Để biết ví dụ trong các ứng dụng Google Chat, hãy xem phần Biểu tượng.

Hỗ trợ các biểu tượng tích hợp sẵn và tuỳ chỉnh.

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ "altText": string, "imageType": enum (`ImageType`), // Union field `icons` can be only one of the following: "knownIcon": string, "iconUrl": string // End of list of possible types for union field `icons`. }

{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}

Các trường
`altText`	`string` Không bắt buộc. Nội dung mô tả biểu tượng dùng cho tính năng hỗ trợ tiếp cận. Nếu không chỉ định, hệ thống sẽ cung cấp giá trị mặc định `Button`. Cách tốt nhất là bạn nên đặt nội dung mô tả hữu ích về nội dung mà biểu tượng hiển thị và chức năng của biểu tượng (nếu có). Ví dụ: `A user's account portrait` hoặc `Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat`. Nếu biểu tượng được đặt trong `Button`, thì `altText` sẽ xuất hiện dưới dạng văn bản trợ giúp khi người dùng di chuột qua nút. Tuy nhiên, nếu nút này cũng thiết lập `text`, thì `altText` của biểu tượng sẽ bị bỏ qua.
`imageType`	`enum (ImageType)` Kiểu cắt được áp dụng cho hình ảnh. Trong một số trường hợp, việc áp dụng thao tác cắt `CIRCLE` sẽ khiến hình ảnh được vẽ lớn hơn biểu tượng tích hợp sẵn.
Trường nhóm `icons`. Biểu tượng hiển thị trong tiện ích trên thẻ. `icons` chỉ có thể là một trong những trạng thái sau đây:
`knownIcon`	`string` Hiển thị một trong những biểu tượng tích hợp sẵn do Google Workspace cung cấp. Ví dụ: để hiển thị biểu tượng máy bay, hãy chỉ định `AIRPLANE`. Đối với loại xe buýt, hãy chỉ định `BUS`. Để biết danh sách đầy đủ các biểu tượng được hỗ trợ, hãy xem phần các biểu tượng tích hợp sẵn.
`iconUrl`	`string` Hiển thị biểu tượng tuỳ chỉnh được lưu trữ tại một URL HTTPS. Ví dụ: `"iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png"` Các loại tệp được hỗ trợ bao gồm `.png` và `.jpg`.

Nút

Nút văn bản, biểu tượng hoặc văn bản và biểu tượng mà người dùng có thể nhấp vào. Để biết ví dụ trong các ứng dụng Google Chat, hãy xem Danh sách nút.

Để biến hình ảnh thành nút có thể nhấp được, hãy chỉ định Image (không phải ImageComponent) và đặt thao tác onClick.

Biểu diễn dưới dạng JSON
{ "text": string, "icon": { object (`Icon`) }, "color": { object (`Color`) }, "onClick": { object (`OnClick`) }, "disabled": boolean, "altText": string }

Các trường
`text`	`string` Văn bản hiển thị bên trong nút.
`icon`	`object (Icon)` Hình ảnh biểu tượng. Nếu bạn đặt cả `icon` và `text`, thì biểu tượng sẽ xuất hiện trước văn bản.
`color`	`object (Color)` Nếu được đặt, nút này sẽ được tô màu nền đồng nhất và màu phông chữ sẽ thay đổi để duy trì độ tương phản với màu nền. Ví dụ: việc đặt nền màu xanh dương có thể dẫn đến văn bản màu trắng. Nếu bạn không đặt chính sách này, thì nền của hình ảnh sẽ là màu trắng và màu phông chữ sẽ là màu xanh dương. Đối với màu đỏ, xanh lục và xanh dương, giá trị của mỗi trường là một số `float` mà bạn có thể biểu thị theo một trong hai cách: dưới dạng số từ 0 đến 255 chia cho 255 (153/255) hoặc dưới dạng giá trị từ 0 đến 1 (0,6). 0 đại diện cho sự vắng mặt của màu và 1 hoặc 255/255 biểu thị sự hiện diện đầy đủ của màu đó trên thang RGB. Bạn có thể đặt `alpha` (không bắt buộc) để thiết lập mức độ trong suốt bằng phương trình sau: `pixel color = alpha * (this color) + (1.0 - alpha) * (background color)` Đối với `alpha`, giá trị `1` tương ứng với một màu đồng nhất và giá trị `0` tương ứng với màu hoàn toàn trong suốt. Ví dụ: màu sau đây biểu thị một nửa màu đỏ trong suốt: `"color": { "red": 1, "green": 0, "blue": 0, "alpha": 0.5 }`
`onClick`	`object (OnClick)` Bắt buộc. Hành động sẽ thực hiện khi người dùng nhấp vào nút, chẳng hạn như mở đường siêu liên kết hoặc chạy một hàm tuỳ chỉnh.
`disabled`	`boolean` Nếu giá trị là `true`, nút này sẽ hiển thị ở trạng thái không hoạt động và không phản hồi thao tác của người dùng.
`altText`	`string` Văn bản thay thế dùng cho khả năng tiếp cận. Đặt văn bản mô tả cho phép người dùng biết chức năng của nút. Ví dụ: nếu một nút mở ra đường siêu liên kết, bạn có thể viết: "Mở thẻ trình duyệt mới và chuyển đến tài liệu dành cho nhà phát triển Google Chat tại https://developers.google.com/chat".

Màu

Đại diện cho một màu trong hệ màu RGBA. Bản trình bày này được thiết kế để đơn giản hoá việc chuyển đổi sang và từ các bản trình bày màu bằng nhiều ngôn ngữ hơn so với tính gọn nhẹ. Ví dụ: các trường của cách biểu diễn này có thể đơn giản được cung cấp cho hàm khởi tạo của java.awt.Color trong Java; cũng có thể được cung cấp đơn giản cho phương thức +colorWithRed:green:blue:alpha của UIColor trong iOS; và chỉ cần thực hiện một chút, bạn có thể dễ dàng định dạng nó thành chuỗi CSS rgba() trong JavaScript.

Trang tham khảo này không có thông tin về hệ màu tuyệt đối cần dùng để diễn giải giá trị RGB, ví dụ: sRGB, Adobe RGB, DCI-P3 và BT.2020. Theo mặc định, các ứng dụng phải giả định hệ màu sRGB.

Khi cần quyết định sự cân bằng màu, các phương pháp triển khai (trừ phi được ghi lại bằng tài liệu khác) sẽ coi hai màu là bằng nhau nếu tất cả giá trị của màu đỏ, xanh lục, xanh dương và alpha mỗi giá trị khác nhau tối đa là 1e-5.

Ví dụ (Java):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Ví dụ (iOS / obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Ví dụ (JavaScript):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...

Biểu diễn dưới dạng JSON
{ "red": number, "green": number, "blue": number, "alpha": number }

Các trường
`red`	`number` Lượng màu đỏ trong màu dưới dạng giá trị trong khoảng [0, 1].
`green`	`number` Lượng màu xanh lục trong màu dưới dạng giá trị trong khoảng [0, 1].
`blue`	`number` Lượng màu xanh dương trong màu dưới dạng giá trị trong khoảng [0, 1].
`alpha`	`number` Phần màu này sẽ được áp dụng cho pixel. Tức là màu pixel cuối cùng được xác định theo phương trình: `pixel color = alpha * (this color) + (1.0 - alpha) * (background color)` Điều này có nghĩa là giá trị 1.0 tương ứng với một màu đồng nhất, trong khi giá trị 0.0 tương ứng với một màu hoàn toàn trong suốt. Thao tác này sử dụng thông báo trình bao bọc thay vì vô hướng nổi đơn giản để có thể phân biệt giữa giá trị mặc định và giá trị chưa được đặt. Nếu bị bỏ qua, đối tượng màu này sẽ hiển thị dưới dạng màu đồng nhất (như thể giá trị alpha đã được chỉ định rõ ràng là 1.0).

SwitchControl

Nút chuyển kiểu bật/tắt hoặc hộp đánh dấu bên trong tiện ích decoratedText.

Chỉ được hỗ trợ trong tiện ích decoratedText.

Biểu diễn dưới dạng JSON
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object (`Action`) }, "controlType": enum (`ControlType`) }

Các trường
`name`	`string` Tên mà tiện ích nút chuyển được xác định trong một sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`value`	`string` Giá trị do người dùng nhập, được trả về như một phần của sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`selected`	`boolean` Khi `true`, nút chuyển này sẽ được chọn.
`onChangeAction`	`object (Action)` Hành động cần thực hiện khi trạng thái chuyển đổi thay đổi, chẳng hạn như chức năng nào cần chạy.
`controlType`	`enum (ControlType)` Cách nút chuyển xuất hiện trong giao diện người dùng.

Loại điều khiển

Cách nút chuyển xuất hiện trong giao diện người dùng.

Enum
`SWITCH`	Nút chuyển kiểu bật/tắt.
`CHECKBOX`	Ngừng sử dụng và thay bằng `CHECK_BOX`.
`CHECK_BOX`	Hộp đánh dấu.

Danh sách nút

Danh sách các nút được bố trí theo chiều ngang. Để biết ví dụ trong các ứng dụng Google Chat, hãy xem Danh sách nút.

Biểu diễn dưới dạng JSON
{ "buttons": [ { object (`Button`) } ] }

Các trường

Các trường
`buttons[]`	`object (Button)` Một dãy các nút.

buttons[]

object (Button)

Một dãy các nút.

Nhập văn bản

Một trường mà người dùng có thể nhập văn bản. Hỗ trợ đề xuất và các hành động khi thay đổi. Để biết ví dụ về các ứng dụng Google Chat, hãy xem phần Nhập văn bản.

Các ứng dụng nhắn tin nhận và xử lý giá trị của văn bản đã nhập trong các sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.

Khi bạn cần thu thập dữ liệu chưa xác định hoặc dữ liệu trừu tượng từ người dùng, hãy sử dụng phương thức nhập bằng văn bản. Để thu thập dữ liệu được xác định hoặc liệt kê từ người dùng, hãy sử dụng tiện ích SelectionInput.

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum (`Type`), "onChangeAction": { object (`Action`) }, "initialSuggestions": { object (`Suggestions`) }, "autoCompleteAction": { object (`Action`) }, "placeholderText": string }

{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "placeholderText": string
}

Các trường
`name`	`string` Tên mà mục nhập văn bản được xác định trong một sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`label`	`string` Văn bản xuất hiện phía trên trường nhập văn bản trong giao diện người dùng. Chỉ định văn bản giúp người dùng nhập thông tin mà ứng dụng của bạn cần. Ví dụ: nếu bạn hỏi tên của một người nhưng cụ thể cần họ của họ, hãy viết `surname` thay vì `name`. Bắt buộc nếu chưa chỉ định `hintText`. Nếu không, không bắt buộc.
`hintText`	`string` Văn bản xuất hiện bên dưới trường nhập văn bản nhằm hỗ trợ người dùng bằng cách nhắc họ nhập một giá trị nhất định. Văn bản này luôn hiển thị. Bắt buộc nếu chưa chỉ định `label`. Nếu không, không bắt buộc.
`value`	`string` Giá trị do người dùng nhập, được trả về như một phần của sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`type`	`enum (Type)` Cách trường nhập văn bản xuất hiện trong giao diện người dùng. Ví dụ: trường là một hay nhiều dòng.
`onChangeAction`	`object (Action)` Việc cần làm khi trường nhập văn bản có thay đổi. Ví dụ: người dùng thêm vào trường hoặc xoá văn bản. Ví dụ về những việc bạn cần làm: chạy một hàm tuỳ chỉnh hoặc mở một hộp thoại trong Google Chat.
`initialSuggestions`	`object (Suggestions)` Giá trị đề xuất mà người dùng có thể nhập. Các giá trị này xuất hiện khi người dùng nhấp vào bên trong trường nhập văn bản. Khi người dùng nhập, các giá trị được đề xuất sẽ tự động lọc để khớp với nội dung mà người dùng đã nhập. Ví dụ: một trường nhập văn bản cho ngôn ngữ lập trình có thể đề xuất Java, JavaScript, Python và C++. Khi người dùng bắt đầu nhập `Jav`, danh sách các bộ lọc đề xuất sẽ chỉ hiển thị `Java` và `JavaScript`. Giá trị được đề xuất giúp hướng dẫn người dùng nhập các giá trị mà ứng dụng của bạn có thể hiểu được. Khi tham chiếu đến JavaScript, một số người dùng có thể nhập `javascript` và một số người dùng khác có thể nhập `java script`. Việc đề xuất `JavaScript` có thể chuẩn hoá cách người dùng tương tác với ứng dụng của bạn. Khi được chỉ định, `TextInput.type` luôn là `SINGLE_LINE`, ngay cả khi được đặt thành `MULTIPLE_LINE`.
`autoCompleteAction`	`object (Action)` Không bắt buộc. Chỉ định hành động cần thực hiện khi trường nhập văn bản cung cấp đề xuất cho người dùng tương tác với trường đó. Nếu không chỉ định, các đề xuất sẽ do `initialSuggestions` đặt và được ứng dụng xử lý. Nếu được chỉ định, ứng dụng sẽ thực hiện thao tác quy định ở đây, chẳng hạn như chạy một hàm tuỳ chỉnh. Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace, nhưng không được hỗ trợ bởi các ứng dụng Google Chat.
`placeholderText`	`string` Văn bản xuất hiện trong trường nhập văn bản khi trường này trống. Hãy dùng văn bản này để nhắc người dùng nhập một giá trị. Ví dụ: `Enter a number from 0 to 100` Được các ứng dụng Google Chat hỗ trợ, nhưng không được hỗ trợ bởi tiện ích bổ sung của Google Workspace.

Loại

Cách trường nhập văn bản xuất hiện trong giao diện người dùng. Ví dụ: dữ liệu là trường nhập một dòng hay dữ liệu nhập nhiều dòng.

Nếu bạn chỉ định initialSuggestions, thì type sẽ luôn là SINGLE_LINE, ngay cả khi bạn đặt giá trị này thành MULTIPLE_LINE.

Enum
`SINGLE_LINE`	Trường nhập văn bản có chiều cao cố định là một dòng.
`MULTIPLE_LINE`	Trường nhập văn bản có chiều cao cố định là nhiều dòng.

Gợi ý

Giá trị đề xuất mà người dùng có thể nhập. Các giá trị này xuất hiện khi người dùng nhấp vào bên trong trường nhập văn bản. Khi người dùng nhập, các giá trị được đề xuất sẽ tự động lọc để khớp với nội dung mà người dùng đã nhập.

Ví dụ: một trường nhập văn bản cho ngôn ngữ lập trình có thể đề xuất Java, JavaScript, Python và C++. Khi người dùng bắt đầu nhập Jav, danh sách các bộ lọc đề xuất sẽ hiển thị Java và JavaScript.

Giá trị được đề xuất giúp hướng dẫn người dùng nhập các giá trị mà ứng dụng của bạn có thể hiểu được. Khi tham chiếu đến JavaScript, một số người dùng có thể nhập javascript và một số người dùng khác có thể nhập java script. Việc đề xuất JavaScript có thể chuẩn hoá cách người dùng tương tác với ứng dụng của bạn.

Khi được chỉ định, TextInput.type luôn là SINGLE_LINE, ngay cả khi được đặt thành MULTIPLE_LINE.

Biểu diễn dưới dạng JSON
{ "items": [ { object (`SuggestionItem`) } ] }

Các trường

Các trường
`items[]`	`object (SuggestionItem)` Danh sách các đề xuất dùng cho các mục đề xuất tự động hoàn thành trong các trường nhập văn bản.

items[]

object (SuggestionItem)

Danh sách các đề xuất dùng cho các mục đề xuất tự động hoàn thành trong các trường nhập văn bản.

Mục đề xuất

Một giá trị đề xuất mà người dùng có thể nhập vào trường nhập văn bản.

Biểu diễn dưới dạng JSON
{ // Union field `content` can be only one of the following: "text": string // End of list of possible types for union field `content`. }

Các trường

Các trường
Trường nhóm `content`. `content` chỉ có thể là một trong những trạng thái sau đây:
`text`	`string` Giá trị của một giá trị nhập được đề xuất cho một trường nhập văn bản. Giá trị này tương đương với nội dung mà người dùng tự nhập.

Trường nhóm content.

content chỉ có thể là một trong những trạng thái sau đây:

text

string

Giá trị của một giá trị nhập được đề xuất cho một trường nhập văn bản. Giá trị này tương đương với nội dung mà người dùng tự nhập.

Dữ liệu đầu vào cho lựa chọn

Một tiện ích tạo ra một hoặc nhiều mục trên giao diện người dùng mà người dùng có thể chọn. Ví dụ: trình đơn thả xuống hoặc hộp đánh dấu. Bạn có thể sử dụng tiện ích này để thu thập dữ liệu có thể được dự đoán hoặc liệt kê. Để tham khảo ví dụ trong các ứng dụng Google Chat, hãy xem phần Phương thức nhập dữ liệu chọn lọc.

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

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

Biểu diễn dưới dạng JSON

Biểu diễn dưới dạng JSON
{ "name": string, "label": string, "type": enum (`SelectionType`), "items": [ { object (`SelectionItem`) } ], "onChangeAction": { object (`Action`) }, "multiSelectMaxSelectedItems": integer, "multiSelectMinQueryLength": integer, // Union field `multi_select_data_source` can be only one of the following: "externalDataSource": { object (`Action`) }, "platformDataSource": { object (`PlatformDataSource`) } // End of list of possible types for union field `multi_select_data_source`. }

{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}

Các trường
`name`	`string` Tên xác định dữ liệu đầu vào được lựa chọn trong một sự kiện nhập trên biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`label`	`string` Văn bản xuất hiện phía trên trường nhập dữ liệu lựa chọn trong giao diện người dùng. Chỉ định văn bản giúp người dùng nhập thông tin mà ứng dụng của bạn cần. Ví dụ: nếu người dùng đang chọn tính khẩn cấp của phiếu yêu cầu kiểm tra bài tập trên trình đơn thả xuống, thì nhãn có thể là "Khẩn cấp" hoặc "Chọn tính khẩn cấp".
`type`	`enum (SelectionType)` Loại mục mà người dùng nhìn thấy trong tiện ích `SelectionInput`. Các loại lựa chọn hỗ trợ nhiều loại tương tác. Ví dụ: người dùng có thể chọn một hoặc nhiều hộp đánh dấu, nhưng chỉ có thể chọn một giá trị trên trình đơn thả xuống.
`items[]`	`object (SelectionItem)` Một mảng các mục có thể chọn. Ví dụ: một loạt các nút chọn hoặc hộp đánh dấu. Hỗ trợ tối đa 100 mục.
`onChangeAction`	`object (Action)` Nếu được chỉ định, biểu mẫu sẽ được gửi khi lựa chọn thay đổi. Nếu không được chỉ định, bạn phải chỉ định một nút riêng dùng để gửi biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`multiSelectMaxSelectedItems`	`integer` Đối với trình đơn chọn nhiều mục, số lượng mục tối đa mà người dùng có thể chọn. Giá trị tối thiểu là 1 mục. Nếu chưa chỉ định, hãy đặt thành 3 mục. Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.
`multiSelectMinQueryLength`	`integer` Đối với trình đơn nhiều lựa chọn, số lượng ký tự văn bản mà người dùng nhập trước khi ứng dụng Chat nhập cụm từ tìm kiếm sẽ tự động hoàn thành và hiện các mục đề xuất trên thẻ. Nếu không chỉ định, hãy đặt thành 0 ký tự cho nguồn dữ liệu tĩnh và 3 ký tự cho nguồn dữ liệu bên ngoài. Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.
Trường nhóm `multi_select_data_source`. Chỉ dành cho ứng dụng nhắn tin. Đối với trình đơn nhiều lựa chọn, loại nguồn dữ liệu. Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng. `multi_select_data_source` chỉ có thể là một trong những trạng thái sau:
`externalDataSource`	`object (Action)` Nguồn dữ liệu bên ngoài, chẳng hạn như cơ sở dữ liệu quan hệ. Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.
`platformDataSource`	`object (PlatformDataSource)` Nguồn dữ liệu từ một ứng dụng lưu trữ Google Workspace. Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.

Loại lựa chọn

Định dạng của các mục mà người dùng có thể chọn. Các tuỳ chọn khác nhau hỗ trợ các loại tương tác khác nhau. Ví dụ: người dùng có thể chọn nhiều hộp đánh dấu nhưng chỉ có thể chọn một mục từ trình đơn thả xuống.

Mỗi giá trị đầu vào của lựa chọn hỗ trợ một loại lựa chọn. Ví dụ: tính năng kết hợp hộp đánh dấu và nút chuyển không được hỗ trợ.

Enum
`CHECK_BOX`	Một tập hợp các hộp đánh dấu. Người dùng có thể chọn một hoặc nhiều hộp đánh dấu.
`RADIO_BUTTON`	Một bộ các nút chọn. Người dùng có thể chọn một nút chọn.
`SWITCH`	Một bộ công tắc. Người dùng có thể bật một hoặc nhiều công tắc.
`DROPDOWN`	Trình đơn thả xuống. Người dùng có thể chọn một mục trong trình đơn.
`MULTI_SELECT`	Được các ứng dụng Chat hỗ trợ, nhưng không được hỗ trợ bởi tiện ích bổ sung của Google Workspace. Trình đơn nhiều lựa chọn cho dữ liệu tĩnh hoặc động. Trên thanh trình đơn, người dùng có thể chọn một hoặc nhiều mục. Người dùng cũng có thể nhập các giá trị để điền dữ liệu động. Ví dụ: Người dùng có thể bắt đầu nhập tên của một phòng Google Chat và tiện ích đó sẽ tự động đề xuất không gian đó. Để điền sẵn các mục cho trình đơn nhiều mục, bạn có thể sử dụng một trong các loại nguồn dữ liệu sau: Dữ liệu tĩnh: Các mục được chỉ định làm đối tượng `SelectionItem` trong tiện ích. Tối đa 100 mục. Dữ liệu trong Google Workspace: Các mục được điền sẵn bằng dữ liệu từ một ứng dụng của Google Workspace, chẳng hạn như người dùng hoặc không gian trong Google Chat. Dữ liệu bên ngoài: Các mục được điền từ một nguồn dữ liệu động bên ngoài. Để xem ví dụ về cách triển khai trình đơn nhiều lựa chọn, hãy xem trang tiện ích `SelectionInput` . Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.

Mục lựa chọn

Một mục mà người dùng có thể chọn trong mục nhập lựa chọn, chẳng hạn như hộp đánh dấu hoặc nút chuyển.

Biểu diễn dưới dạng JSON
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string }

Các trường
`text`	`string` Văn bản giúp xác định hoặc mô tả mặt hàng cho người dùng.
`value`	`string` Giá trị liên kết với mặt hàng này. Khách hàng sẽ sử dụng giá trị này làm giá trị nhập vào biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`selected`	`boolean` Liệu mục đó có được chọn theo mặc định hay không. Nếu giá trị đầu vào của lựa chọn chỉ chấp nhận một giá trị (chẳng hạn như đối với các nút chọn hoặc trình đơn thả xuống), hãy chỉ đặt trường này cho một mục.
`startIconUri`	`string` Đối với các trình đơn chọn nhiều mục, URL của biểu tượng hiển thị bên cạnh trường `text` của mục đó. Hỗ trợ tệp PNG và JPEG. Phải là URL `HTTPS`. Ví dụ: `https://developers.google.com/chat/images/quickstart-app-avatar.png` Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.
`bottomText`	`string` Đối với các trình đơn chọn nhiều mục, nội dung mô tả hoặc nhãn bằng văn bản sẽ hiển thị bên dưới trường `text` của mục. Bản dùng thử cho nhà phát triển: Có trong Chương trình dùng thử cho nhà phát triển Google Workspace, chương trình này cấp quyền truy cập sớm vào một số tính năng.

Nguồn dữ liệu nền tảng

Chỉ dành cho ứng dụng nhắn tin. Đối với tiện ích SelectionInput sử dụng trình đơn chọn nhiều mục, dữ liệu từ ứng dụng lưu trữ của Google Workspace. Dùng để điền các mục vào trình đơn chọn nhiều mục.

Biểu diễn dưới dạng JSON

{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}

Các trường

Trường nhóm data_source. Nguồn dữ liệu. data_source chỉ có thể là một trong những trạng thái sau:

commonDataSource

enum (CommonDataSource)

Đối với tiện ích SelectionInput sử dụng trình đơn chọn nhiều mục, đây là một nguồn dữ liệu dùng chung cho tất cả ứng dụng lưu trữ trên Google Workspace, chẳng hạn như người dùng trong một tổ chức trên Google Workspace.

hostAppDataSource

object (HostAppDataSourceMarkup)

Nguồn dữ liệu dành riêng cho một ứng dụng lưu trữ Google Workspace, chẳng hạn như email Gmail, sự kiện trên Lịch Google hoặc tin nhắn trong Google Chat.

CommonDataSource

Chỉ dành cho ứng dụng nhắn tin. Nguồn dữ liệu dùng chung cho tất cả ứng dụng lưu trữ Google Workspace.

Enum

UNKNOWN

Giá trị mặc định. Đừng sử dụng.

USER

Danh sách người dùng do ứng dụng lưu trữ Google Workspace cung cấp. Ví dụ: Để tìm nguồn người dùng từ Google Chat, hãy sử dụng tên tài nguyên của người dùng đó.

Định dạng: users/{user}

Đánh dấu HostAppDataSource

Chỉ dành cho ứng dụng nhắn tin. Đối với tiện ích SelectionInput sử dụng trình đơn chọn nhiều mục, một nguồn dữ liệu từ ứng dụng lưu trữ của Google Workspace.

Biểu diễn dưới dạng JSON
{ // Union field `data_source` can be only one of the following: "chatDataSource": { object (`ChatClientDataSourceMarkup`) } // End of list of possible types for union field `data_source`. }

Các trường

Trường nhóm data_source. Ứng dụng của Google Workspace lấy dữ liệu cho trình đơn chọn nhiều mục. data_source chỉ có thể là một trong những trạng thái sau đây:

chatDataSource

object (ChatClientDataSourceMarkup)

Nguồn dữ liệu là Google Chat.

Đánh dấu ChatClientDataSource

Chỉ dành cho ứng dụng nhắn tin. Đối với tiện ích SelectionInput sử dụng trình đơn chọn nhiều mục (một nguồn dữ liệu của Google Chat). Ví dụ: danh sách các phòng Google Chat mà người dùng là thành viên.

Biểu diễn dưới dạng JSON
{ // Union field `source` can be only one of the following: "spaceDataSource": { object (`SpaceDataSource`) } // End of list of possible types for union field `source`. }

Các trường

Trường nhóm source. Nguồn dữ liệu của Google Chat. source chỉ có thể là một trong những trạng thái sau đây:

spaceDataSource

object (SpaceDataSource)

Nguồn dữ liệu đại diện cho một không gian trên Google Chat.

Định dạng: space/{space}

Nguồn dữ liệu không gian

Nguồn dữ liệu đại diện cho một không gian trên Google Chat.

Định dạng: space/{space}

Biểu diễn dưới dạng JSON
{ "defaultToCurrentSpace": boolean }

Các trường

defaultToCurrentSpace

boolean

Khi true, hãy sử dụng phòng Google Chat của thẻ làm lựa chọn mặc định. Giá trị mặc định là false.

Bộ chọn DateTimePicker

Cho phép người dùng nhập ngày, giờ hoặc cả ngày và giờ. Để xem ví dụ trong các ứng dụng Google Chat, hãy xem phần Bộ chọn ngày giờ.

Người dùng có thể nhập văn bản hoặc 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.

Biểu diễn dưới dạng JSON
{ "name": string, "label": string, "type": enum (`DateTimePickerType`), "valueMsEpoch": string, "timezoneOffsetDate": integer, "onChangeAction": { object (`Action`) } }

Các trường
`name`	`string` Tên mà `DateTimePicker` được xác định trong một sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý thông tin đầu vào của biểu mẫu, hãy xem phần Nhận dữ liệu biểu mẫu.
`label`	`string` Văn bản nhắc người dùng nhập ngày, giờ hoặc ngày giờ. Ví dụ: nếu người dùng đang lên lịch hẹn, hãy sử dụng một nhãn như `Appointment date` hoặc `Appointment date and time`.
`type`	`enum (DateTimePickerType)` Liệu tiện ích có hỗ trợ nhập ngày, giờ hoặc ngày và giờ hay không.
`valueMsEpoch`	`string (int64 format)` Giá trị mặc định hiển thị trong tiện ích, tính bằng mili giây kể từ Thời gian bắt đầu của hệ thống Unix. Hãy chỉ định giá trị dựa trên loại bộ chọn ( `DateTimePickerType`): `DATE_AND_TIME` : ngày và giờ theo lịch theo giờ UTC. Ví dụ:để thể hiện lúc 12 giờ trưa ngày 1 tháng 1 năm 2023 (theo giờ UTC), hãy sử dụng `1672574400000`. `DATE_ONLY` : một ngày theo lịch tại thời điểm 00:00:00 (giờ UTC). Ví dụ: để thể hiện ngày 1 tháng 1 năm 2023, hãy sử dụng `1672531200000`. `TIME_ONLY` : thời gian theo giờ UTC. Ví dụ: để biểu thị 12:00 CH, hãy sử dụng `43200000` (hoặc `12 * 60 * 60 * 1000`).
`timezoneOffsetDate`	`integer` Số thể hiện chênh lệch múi giờ so với UTC, tính bằng phút. Nếu bạn đặt chính sách này, thì `valueMsEpoch` sẽ hiển thị theo múi giờ đã chỉ định. Nếu bạn không đặt chính sách này, giá trị này sẽ mặc định được đặt theo chế độ cài đặt múi giờ của người dùng.
`onChangeAction`	`object (Action)` Được kích hoạt khi người dùng nhấp vào Lưu hoặc Xoá trên giao diện `DateTimePicker`.

DateTimePickerType

Định dạng của ngày và giờ trong tiện ích DateTimePicker. Xác định xem người dùng có thể nhập ngày, giờ hoặc cả ngày và giờ hay không.

Enum
`DATE_AND_TIME`	Người dùng nhập ngày và giờ.
`DATE_ONLY`	Người dùng nhập ngày.
`TIME_ONLY`	Người dùng nhập một thời gian.

Đường phân chia

Loại này không có trường.

Hiển thị đường phân chia giữa các tiện ích dưới dạng một đường ngang. Để tham khảo ví dụ trong ứng dụng Google Chat, hãy xem nội dung Đường phân chia.

Ví dụ: JSON sau đây sẽ tạo một đường phân chia:

"divider": {}

Lưới

Hiển thị lưới chứa một tập hợp các mục. Các mục chỉ được có văn bản hoặc hình ảnh. Đối với các cột thích ứng hoặc để thêm nhiều hơn văn bản hoặc hình ảnh, hãy sử dụng Columns. Để biết ví dụ trong các ứng dụng Google Chat, hãy xem phần Lưới.

Lưới hỗ trợ số lượng cột và mục bất kỳ. Số lượng hàng được xác định theo các mục chia cho cột. Lưới có 10 mục và 2 cột thì có 5 hàng. Một lưới có 11 mục và 2 cột thì có 6 hàng.

Ví dụ: JSON sau đây tạo lưới 2 cột chứa một mục duy nhất:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}

Biểu diễn dưới dạng JSON
{ "title": string, "items": [ { object (`GridItem`) } ], "borderStyle": { object (`BorderStyle`) }, "columnCount": integer, "onClick": { object (`OnClick`) } }

Các trường

title

string

Văn bản hiển thị trong tiêu đề lưới.

items[]

object (GridItem)

Các mục để hiển thị trong lưới.

borderStyle

object (BorderStyle)

Kiểu đường viền áp dụng cho từng mục trong lưới.

columnCount

integer

Số cột hiển thị trong lưới. Hệ thống sẽ sử dụng một giá trị mặc định nếu bạn không chỉ định trường này và giá trị mặc định đó sẽ khác nhau tuỳ thuộc vào vị trí hiển thị lưới (hộp thoại so với đồng hành).

onClick

object (OnClick)

Lệnh gọi lại này được từng mục lưới riêng lẻ sử dụng lại, nhưng với giá trị nhận dạng và chỉ mục của mục trong danh sách các mục được thêm vào tham số của lệnh gọi lại.

Mục lưới

Đại diện cho một mục trong bố cục lưới. Các mục có thể chứa văn bản, hình ảnh hoặc cả văn bản và hình ảnh.

Biểu diễn dưới dạng JSON
{ "id": string, "image": { object (`ImageComponent`) }, "title": string, "subtitle": string, "layout": enum (`GridItemLayout`) }

Các trường
`id`	`string` Giá trị nhận dạng do người dùng chỉ định cho mục lưới này. Giá trị nhận dạng này được trả về trong tham số gọi lại `onClick` của lưới mẹ.
`image`	`object (ImageComponent)` Hình ảnh hiển thị trong mục lưới.
`title`	`string` Tiêu đề của mục lưới.
`subtitle`	`string` Tiêu đề phụ của mục lưới.
`layout`	`enum (GridItemLayout)` Bố cục để sử dụng cho mục lưới.

Thành phần hình ảnh

Đại diện cho một hình ảnh.

Biểu diễn dưới dạng JSON
{ "imageUri": string, "altText": string, "cropStyle": { object (`ImageCropStyle`) }, "borderStyle": { object (`BorderStyle`) } }

Các trường
`imageUri`	`string` URL hình ảnh.
`altText`	`string` Nhãn hỗ trợ tiếp cận cho hình ảnh.
`cropStyle`	`object (ImageCropStyle)` Kiểu cắt để áp dụng cho hình ảnh.
`borderStyle`	`object (BorderStyle)` Kiểu đường viền áp dụng cho hình ảnh.

Kiểu cắt hình ảnh

Đại diện cho kiểu cắt được áp dụng cho một hình ảnh.

Ví dụ: dưới đây là cách áp dụng tỷ lệ khung hình 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

Biểu diễn dưới dạng JSON
{ "type": enum (`ImageCropType`), "aspectRatio": number }

Các trường

type

enum (ImageCropType)

Loại cắt.

aspectRatio

number

Tỷ lệ khung hình cần sử dụng nếu kiểu cắt là RECTANGLE_CUSTOM.

Ví dụ: dưới đây là cách áp dụng tỷ lệ khung hình 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

Loại hình ảnh

Đại diện cho kiểu cắt được áp dụng cho một hình ảnh.

Enum
`IMAGE_CROP_TYPE_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`SQUARE`	Giá trị mặc định. Áp dụng vùng cắt hình vuông.
`CIRCLE`	Áp dụng một vùng cắt hình tròn.
`RECTANGLE_CUSTOM`	Áp dụng một ảnh cắt hình chữ nhật với tỷ lệ khung hình tuỳ chỉnh. Đặt tỷ lệ khung hình tuỳ chỉnh bằng `aspectRatio`.
`RECTANGLE_4_3`	Áp dụng ảnh cắt hình chữ nhật có tỷ lệ khung hình 4:3.

Phong cách đường viền

Các lựa chọn kiểu cho đường viền thẻ hoặc tiện ích, bao gồm cả loại và màu đường viền.

Biểu diễn dưới dạng JSON
{ "type": enum (`BorderType`), "strokeColor": { object (`Color`) }, "cornerRadius": integer }

Các trường

type

enum (BorderType)

Loại đường viền.

strokeColor

object (Color)

Màu cần sử dụng khi loại là BORDER_TYPE_STROKE.

cornerRadius

integer

Bán kính góc của đường viền.

Loại đường viền

Đại diện cho các loại đường viền được áp dụng cho tiện ích.

Enum
`BORDER_TYPE_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`NO_BORDER`	Giá trị mặc định. Không có đường viền.
`STROKE`	Đường viền.

GridItemLayout

Biểu thị các tuỳ chọn bố cục có sẵn cho một mục trong lưới.

Enum
`GRID_ITEM_LAYOUT_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`TEXT_BELOW`	Tiêu đề và tiêu đề phụ được hiển thị bên dưới hình ảnh của mục lưới.
`TEXT_ABOVE`	Tiêu đề và tiêu đề phụ hiển thị phía trên hình ảnh của mục lưới.

Cột

Tiện ích Columns hiển thị tối đa 2 cột trong một thông báo thẻ hoặc hộp thoại. Bạn có thể thêm các tiện ích vào mỗi cột; các tiện ích xuất hiện theo thứ tự được chỉ định. Để xem ví dụ trong các ứng dụng Google Chat, hãy xem phần Cột.

Chiều cao của mỗi cột được xác định bởi cột cao hơn. Ví dụ: nếu cột đầu tiên cao hơn cột thứ hai, cả hai cột đều có chiều cao của cột đầu tiên. Vì mỗi cột có thể chứa một số lượng tiện ích khác nhau, nên bạn không thể xác định hàng hoặc căn chỉnh tiện ích giữa các cột.

Các cột hiển thị cạnh nhau. Bạn có thể tuỳ chỉnh chiều rộng của từng cột bằng trường HorizontalSizeStyle. Nếu chiều rộng màn hình của người dùng quá hẹp, cột thứ hai sẽ xuống dưới cột thứ nhất:

Trên web, cột thứ hai sẽ ngắt nếu chiều rộng màn hình nhỏ hơn hoặc bằng 480 pixel.
Trên thiết bị iOS, cột thứ hai sẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 300 pt.
Trên thiết bị Android, cột thứ hai sẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 320 dp.

Để thêm nhiều hơn 2 cột hoặc để sử dụng hàng, hãy sử dụng tiện ích Grid.

Được các ứng dụng Chat hỗ trợ, nhưng không được hỗ trợ bởi tiện ích bổ sung của Google Workspace.

Biểu diễn dưới dạng JSON
{ "columnItems": [ { object (`Column`) } ] }

Các trường

columnItems[]

object (Column)

Một mảng các cột. Bạn có thể thêm tối đa 2 cột vào một thẻ hoặc hộp thoại.

Cột

Một cột.

Biểu diễn dưới dạng JSON
{ "horizontalSizeStyle": enum (`HorizontalSizeStyle`), "horizontalAlignment": enum (`HorizontalAlignment`), "verticalAlignment": enum (`VerticalAlignment`), "widgets": [ { object (`Widgets`) } ] }

Các trường
`horizontalSizeStyle`	`enum (HorizontalSizeStyle)` Chỉ định cách một cột lấp đầy chiều rộng của thẻ.
`horizontalAlignment`	`enum (HorizontalAlignment)` Chỉ định xem các tiện ích có căn chỉnh ở bên trái, bên phải hay giữa cột hay không.
`verticalAlignment`	`enum (VerticalAlignment)` Chỉ định xem các tiện ích sẽ căn chỉnh vào đầu, cuối hay giữa cột.
`widgets[]`	`object (Widgets)` Một mảng các tiện ích được đưa vào một cột. Tiện ích sẽ xuất hiện theo thứ tự được chỉ định.

HorizontalSizeStyle

Chỉ định cách một cột lấp đầy chiều rộng của thẻ. Chiều rộng của mỗi cột phụ thuộc vào cả HorizontalSizeStyle và chiều rộng của các tiện ích trong cột.

Enum
`HORIZONTAL_SIZE_STYLE_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`FILL_AVAILABLE_SPACE`	Giá trị mặc định. Cột sẽ lấp đầy không gian có sẵn, bằng tới 70% chiều rộng của thẻ. Nếu bạn đặt cả hai cột thành `FILL_AVAILABLE_SPACE`, thì mỗi cột sẽ lấp đầy 50% không gian.
`FILL_MINIMUM_SPACE`	Cột này lấp đầy không gian tối thiểu có thể và không quá 30% chiều rộng của thẻ.

Căn ngang

Chỉ định xem các tiện ích có căn chỉnh ở bên trái, bên phải hay giữa cột hay không.

Enum
`HORIZONTAL_ALIGNMENT_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`START`	Giá trị mặc định. Căn chỉnh các tiện ích tới vị trí bắt đầu của cột. Đối với bố cục từ trái sang phải, hãy căn chỉnh sang trái. Đối với bố cục từ phải sang trái, hãy căn chỉnh sang phải.
`CENTER`	Căn chỉnh các tiện ích vào giữa cột.
`END`	Căn chỉnh các tiện ích tới vị trí cuối của cột. Đối với bố cục từ trái sang phải, hãy căn chỉnh tiện ích sang phải. Đối với bố cục từ phải sang trái, hãy căn chỉnh tiện ích sang trái.

Căn dọc

Chỉ định xem các tiện ích sẽ căn chỉnh vào đầu, cuối hay giữa cột.

Enum
`VERTICAL_ALIGNMENT_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`CENTER`	Giá trị mặc định. Căn chỉnh tiện ích tới giữa cột.
`TOP`	Căn chỉnh các tiện ích lên đầu cột.
`BOTTOM`	Căn chỉnh các tiện ích tới cuối cột.

Tiện ích

Các tiện ích được hỗ trợ mà bạn có thể đưa vào một cột.

Biểu diễn dưới dạng JSON

{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  }
  // End of list of possible types for union field data.
}

Các trường
Trường nhóm `data`. `data` chỉ có thể là một trong những trạng thái sau đây:
`textParagraph`	`object (TextParagraph)` Tiện ích `TextParagraph`.
`image`	`object (Image)` Tiện ích `Image`.
`decoratedText`	`object (DecoratedText)` Tiện ích `DecoratedText`.
`buttonList`	`object (ButtonList)` Tiện ích `ButtonList`.
`textInput`	`object (TextInput)` Tiện ích `TextInput`.
`selectionInput`	`object (SelectionInput)` Tiện ích `SelectionInput`.
`dateTimePicker`	`object (DateTimePicker)` Tiện ích `DateTimePicker`.

Đường phân chia

Kiểu đường phân chia của thẻ. Hiện chỉ được sử dụng cho đường phân chia giữa các phần thẻ.

Enum
`DIVIDER_STYLE_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`SOLID_DIVIDER`	Tuỳ chọn mặc định. Kết xuất một dải phân cách đồng nhất giữa các phần.
`NO_DIVIDER`	Nếu được đặt, sẽ không có đường phân chia nào được kết xuất giữa các phần.

Hành động thẻ

Hành động thẻ là thao tác liên kết với thẻ. Ví dụ: thẻ hoá đơn có thể bao gồm các thao tác như xoá hoá đơn, gửi hoá đơn qua email hoặc mở hoá đơn trong trình duyệt.

Không được các ứng dụng Chat hỗ trợ.

Biểu diễn dưới dạng JSON
{ "actionLabel": string, "onClick": { object (`OnClick`) } }

Các trường

actionLabel

string

Nhãn hiển thị dưới dạng mục trong trình đơn thao tác.

onClick

object (OnClick)

Hành động onClick cho mục hành động này.

CardCố định Chân trang

Một chân trang cố định (cố định) xuất hiện ở cuối thẻ. Để tham khảo ví dụ trong các ứng dụng Google Chat, hãy xem phần Chân trang thẻ.

Việc đặt fixedFooter mà không chỉ định primaryButton hoặc secondaryButton sẽ gây ra lỗi.

Được hỗ trợ bởi các tiện ích bổ sung của Google Workspace và các ứng dụng nhắn tin. Đối với các ứng dụng Chat, bạn có thể dùng chân trang cố định trong hộp thoại, nhưng không dùng được tin nhắn thẻ.

Biểu diễn dưới dạng JSON
{ "primaryButton": { object (`Button`) }, "secondaryButton": { object (`Button`) } }

Các trường

primaryButton

object (Button)

Nút chính của chân trang cố định. Nút phải là nút văn bản đã có tập hợp văn bản và màu.

secondaryButton

object (Button)

Nút phụ của chân trang đã cố định. Nút phải là nút văn bản đã có tập hợp văn bản và màu. Nếu đặt secondaryButton, bạn cũng phải đặt primaryButton.

Kiểu hiển thị

Trong Tiện ích bổ sung cho Google Workspace, quy trình này sẽ quyết định cách thẻ được hiển thị.

Không được các ứng dụng Chat hỗ trợ.

Enum
`DISPLAY_STYLE_UNSPECIFIED`	Đừng sử dụng. Không xác định.
`PEEK`	Tiêu đề của thẻ xuất hiện ở cuối thanh bên, che một phần thẻ trên cùng hiện tại của ngăn xếp. Khi nhấp vào tiêu đề, thẻ sẽ được đưa vào ngăn xếp thẻ. Nếu thẻ không có tiêu đề, thì tiêu đề đã tạo sẽ được sử dụng.
`REPLACE`	Giá trị mặc định. Thẻ này sẽ xuất hiện bằng cách thay thế chế độ xem của thẻ trên cùng trong ngăn xếp thẻ.