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 phần tử 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 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.

Thiết kế và xem trước thẻ bằng Trình tạo thẻ.

Mở Trình tạo thẻ

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

• Đối với các ứng dụng Google Chat, hãy xem phần Thiết kế các thành phần của thẻ hoặc hộp thoại.
• Đối với Tiện ích bổ sung của Google Workspace, hãy xem bài viết Giao diện dùng thẻ.

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

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

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/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": "[e-mail]"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "[phone]"
                 }
               },
               {
                 "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
{ "header": { object (CardHeader) }, "sections": [ { object (Section) } ], "sectionDividerStyle": enum (DividerStyle), "cardActions": [ { object (CardAction) } ], "name": string, "fixedFooter": { object (CardFixedFooter) }, "displayStyle": enum (DisplayStyle), "peekCardHeader": { object (CardHeader) } }

Trường
header	object (CardHeader) Tiêu đề của thẻ. Tiêu đề thường chứa hình ảnh và tiêu đề ở đầu trang. 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 không bắt buộc. Các phần được phân tách trực quan bằng đường phân chia dòng. Để xem ví dụ trong các ứng dụng Google Chat, hãy xem bài viết Xác định một phần của 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 trên thanh công cụ của thẻ. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat. Ví dụ: JSON sau đây tạo trình đơn thao tác trên thẻ có 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 giá trị nhận dạng thẻ trong thao tác thẻ. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.
fixedFooter	object (CardFixedFooter) Chân trang cố định 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. Đối với các ứng dụng trong Chat, bạn có thể dùng chân trang cố định trong hộp thoại, nhưng không thể dùng tin nhắn thẻ. Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.
displayStyle	enum (DisplayStyle) Trong 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. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.
peekCardHeader	object (CardHeader) Khi hiển thị nội dung theo ngữ cảnh, tiêu đề của thẻ xem trước hoạt động như một phần giữ chỗ để người dùng có thể di chuyển giữa thẻ trang chủ và thẻ theo ngữ cảnh. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.

CardHeader

Đại diện cho tiêu đề thẻ. Để tham khảo ví dụ về các ứng dụng Google Chat, hãy xem phần Thêm tiêu đề.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
title	string Bắt buộc. Tiêu đề của thẻ. Tiêu đề có chiều cao cố định: nếu cả tiêu đề và tiêu đề phụ đều được chỉ định thì mỗi tiêu đề sẽ chiếm một dòng. Nếu chỉ có tiêu đề được chỉ định thì tiêu đề sẽ bao gồm cả hai dòng.
subtitle	string Phụ đề của tiêu đề thẻ. Nếu được chỉ định, sẽ xuất hiện trên dòng riêng bên dưới title.
imageType	enum (ImageType) Hình dạng được dùng để cắt hình ảnh. Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.
imageUrl	string URL loại 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 để hỗ trợ người khuyết tật.

ImageType

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Mục

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
header	string Văn bản xuất hiện ở đầu một phần. Hỗ trợ văn bản có định dạng HTML đơn giản. Để biết thêm thông tin về việc định dạng văn bản, hãy xem phần Đị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 có ít nhất một tiện ích.
collapsible	boolean Cho biết liệu 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 này để xem 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 sẽ được thu gọn theo mặc định. uncollapsibleWidgetsCount chỉ được xem xét khi collapsible là true.

Tiện ích

Mỗi thẻ được tạo thành từ các tiện ích.

Tiện ích là một đối tượng kết hợp có thể đại diện cho một trong các loại văn bản, hình ảnh, nút và các loại đối tượng khác.

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

Trường
horizontalAlignment	enum (HorizontalAlignment) Chỉ định xem các tiện ích sẽ căn chỉnh ở bên trái, bên phải hay giữa cột.
Trường hợp data. Tiện ích chỉ có thể có một trong các mục sau. 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 các trạng thái sau:
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ề việc định dạng văn bản, hãy xem phần Đị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 một văn bản in đậm: "textParagraph": { "text": " <b>bold text</b>" }
image	object (Image) Hiển thị 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/workspace/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
decoratedText	object (DecoratedText) Hiển thị 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í cho thấy địa chỉ email: "decoratedText": { "icon": { "knownIcon": "EMAIL" }, "topLabel": "Email Address", "text": "[e-mail]", "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 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 đườ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 hộp văn bản để người dùng có thể nhập nội dung. Ví dụ: JSON sau đây tạo mục nhập văn bản cho địa chỉ email: "textInput": { "name": "mailing_address", "label": "Mailing Address" } Một ví dụ khác là JSON sau đây 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) Cho thấy chế độ kiểm soát 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 tạo một trình đơn thả xuống cho phép 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 và giờ. Ví dụ: tệp JSON sau đây sẽ tạo một bộ chọn ngày giờ để lên lịch một cuộc hẹn: "dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
divider	object (Divider) Hiện đường phân chia theo chiều 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 số mục chia cho số cột. Một lưới có 10 mục và 2 cột có 5 hàng. Một lưới có 11 mục và 2 cột có 6 hàng. Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Ví dụ: JSON sau đây tạo lưới gồm 2 cột với 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. Để đưa vào 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 tạo 2 cột, mỗi cột chứa các đ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" } } ] } ] }

TextParagraph

Đ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 Thêm một đoạn văn bản đã định dạng. Để biết thêm thông tin về việc định dạng văn bản, hãy xem phần Đị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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

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

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

Hình ảnh được chỉ định bằng một URL và có thể có thao tác onClick. Để biết ví dụ, hãy xem phần Thêm hình ảnh.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
imageUrl	string URL loại HTTPS lưu trữ hình ảnh. Ví dụ: https://developers.google.com/workspace/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 để hỗ trợ người khuyết tật.

OnClick

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
Trường hợp data. data chỉ có thể là một trong các trạng thái sau:
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 thao tác mở đường liên kết.
openDynamicLinkAction	object (Action) Tiện ích bổ sung sẽ kích hoạt hành động này khi hành động đó cần mở một đường liên kết. Giao diện này khác với openLink ở trên ở chỗ 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 có một số công tác chuẩn bị trước khi phản hồi hành động liên kết mở trở lại. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.
card	object (Card) Thẻ mới được đẩy vào ngăn xếp thẻ sau khi nhấp nếu thẻ được chỉ định. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.

Hành động

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 được kích hoạt, các giá trị của biểu mẫu được gửi đến máy chủ.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
function	string Một hàm tuỳ chỉnh để gọi khi phần tử chứa được nhấp hoặc được kích hoạt. Để tham khảo ví dụ về cách sử dụng, hãy xem phần Đọc dữ liệu biểu mẫu.
parameters[]	object (ActionParameter) Danh sách 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ệnh gọi hành động.
persistValues	boolean Cho biết liệu các giá trị biểu mẫu có còn tồn tại sau hành động hay không. Giá trị mặc định là false. Nếu là true, các giá trị biểu mẫu sẽ 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 thao tác đang được xử lý, hãy đặt LoadIndicator thành NONE. Đối với tin nhắn thẻ trong ứng dụng Chat, bạn cũng phải đặt ResponseType của thao tác thành UPDATE_MESSAGE và sử dụng cùng một cardId từ thẻ chứa thao tác đó. Nếu là false, các giá trị của 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 các thay đổi trong khi thao tác đ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 tương tác với người dùng, chẳng hạn như khi người dùng nhấp vào 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 một 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ụ: bằng cách đặt interaction thành OPEN_DIALOG, ứng dụng có thể mở một hộp thoại. Khi được chỉ định, chỉ báo tải sẽ không hiển thị. Nếu được chỉ định cho 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. Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

ActionParameter

Danh sách các tham số chuỗi cần cung cấp khi phương thức hành động được gọi. Ví dụ: xem xét 3 nút tạm ẩn: tạm ẩn ngay bây giờ, tạm ẩn 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 ẩn 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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

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ố.

LoadIndicator

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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 tương tác với người dùng, chẳng hạn như khi người dùng nhấp vào 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 một 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ụ: bằng cách đặt interaction thành OPEN_DIALOG, ứng dụng có thể mở một hộp thoại.

Khi được chỉ định, chỉ báo tải sẽ không hiển thị. Nếu được chỉ định cho 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.

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

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 – giao diện dạng thẻ có cửa sổ mà các ứng dụng trong Chat dùng để tương tác với người dùng. Chỉ được các ứng dụng trong Chat hỗ trợ khi người dùng nhấp vào nút trên tin nhắn trong thẻ. Nếu được chỉ định cho 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. Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

OpenLink

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
url	string URL cần mở.
openAs	enum (OpenAs) Cách mở một đường liên kết. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.
onClose	enum (OnClose) Liệu máy khách 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 lại không. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.

OpenAs

Khi thao tác OnClick mở một đường liên kết, thì ứ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 mà ứ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 chức 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ị đó. Tất cả ứng dụng đều hỗ trợ FULL_SIZE.

Có trong tiện ích bổ sung của Google Workspace và không dùng được trong 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 khách 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.

OnClose

Những việc ứng dụng sẽ thực hiện khi đóng một đường liên kết bằng thao tác OnClick.

Quá trình 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ở một đường liên kết trong cửa sổ bật lên bằng trình xử lý OnClose.

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

Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.

Enum
NOTHING	Giá trị mặc định. Thẻ không tải lại và không có gì xảy ra.
RELOAD	Tải lại thẻ sau khi cửa sổ con đóng. Nếu được dùng cùng với OpenAs.OVERLAY, cửa sổ con 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.

DecoratedText

Tiện ích hiển thị văn bản với các thành phần trang trí không bắt buộc, chẳng hạn như nhãn ở trên hoặc dưới văn bản, biểu tượng ở trước văn bản, tiện ích lựa chọn hoặc nút sau văn bản. Để xem ví dụ về các ứng dụng Google Chat, hãy xem bài viết Hiển thị văn bản bằng văn bản trang trí.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
icon (deprecated)	object (Icon) Mục này không được dùng nữa! Ngừng sử dụng và thay vào đó là 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ề việc định dạng văn bản, hãy xem phần Đị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 là true, văn bản sẽ được gói và hiển thị trên nhiều dòng. Nếu không, văn bản sẽ bị cắt bớt. 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 hợp 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 các trạng thái sau:
button	object (Button) Nút mà người dùng có thể nhấp để kích hoạt hành động.
switchControl	object (SwitchControl) 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) 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

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

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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, "materialIcon": { object (MaterialIcon) } // End of list of possible types for union field icons. }

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, thì giá trị mặc định Button sẽ được cung cấp. Tốt nhất là bạn nên đặt mộ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/workspace/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 đặt 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 đường cắt CIRCLE khiến hình ảnh được vẽ lớn hơn biểu tượng tích hợp sẵn.
Trường hợp icons. Biểu tượng xuất hiện trong tiện ích trên thẻ. icons chỉ có thể là một trong các trạng thái sau:
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 một xe buýt, hãy chỉ định BUS. Để xem danh sách đầy đủ các biểu tượng được hỗ trợ, hãy xem 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/workspace/chat/images/quickstart-app-avatar.png" Các loại tệp được hỗ trợ bao gồm .png và .jpg.
materialIcon	object (MaterialIcon) Hiển thị một trong các biểu tượng Material của Google. Ví dụ: để cho thấy biểu tượng hộp đánh dấu, hãy sử dụng "materialIcon": { "name": "check_box" } Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

MaterialIcon

Biểu tượng Material trên Google bao gồm hơn 2500 lựa chọn.

Ví dụ: để hiển thị biểu tượng hộp đánh dấu với trọng số và cấp tuỳ chỉnh, hãy viết như sau:

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

Biểu diễn dưới dạng JSON
{ "name": string, "fill": boolean, "weight": integer, "grade": integer }

Trường
name	string Tên biểu tượng được xác định trong Biểu tượng Google Material, ví dụ: check_box. Mọi tên không hợp lệ đều bị loại bỏ và được thay thế bằng chuỗi trống, dẫn đến việc biểu tượng không hiển thị được.
fill	boolean Liệu biểu tượng có hiển thị dưới dạng đã tô màu nền hay không. Giá trị mặc định là sai. Để xem trước các chế độ cài đặt biểu tượng khác nhau, hãy chuyển đến Biểu tượng phông chữ của Google và điều chỉnh chế độ cài đặt đó trong mục Tuỳ chỉnh.
weight	integer Độ đậm nét của biểu tượng. Chọn trong số {100, 200, 300, 400, 500, 600, 700}. Nếu không có, giá trị mặc định sẽ là 400. Nếu bạn chỉ định bất kỳ giá trị nào khác, thì giá trị mặc định sẽ được sử dụng. Để xem trước các chế độ cài đặt biểu tượng khác nhau, hãy chuyển đến Biểu tượng phông chữ của Google và điều chỉnh chế độ cài đặt đó trong mục Tuỳ chỉnh.
grade	integer Trọng số và cấp ảnh hưởng đến độ dày của biểu tượng. Điều chỉnh điểm sẽ chi tiết hơn so với việc điều chỉnh độ đậm và có tác động nhỏ đến kích thước của biểu tượng. Chọn từ {-25, 0, 200}. Nếu không có, giá trị mặc định sẽ là 0. Nếu bạn chỉ định bất kỳ giá trị nào khác, thì giá trị mặc định sẽ được sử dụng. Để xem trước các chế độ cài đặt biểu tượng khác nhau, hãy chuyển đến Biểu tượng phông chữ của Google và điều chỉnh chế độ cài đặt đó trong mục Tuỳ chỉnh.

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ụ về các ứng dụng Google Chat, hãy xem phần Thêm nút.

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
text	string Văn bản xuất hiện 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 này sẽ xuất hiện trước văn bản.
color	object (Color) Nếu được đặt, nút sẽ được tô bằng mộ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 hình ảnh sẽ dùng màu trắng và phông chữ sẽ có 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à 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 đại diện cho sự hiện diện đầy đủ của màu đó trên thang RGB. Nếu muốn, hãy đặt alpha để đặt mức độ trong suốt bằng cách sử dụng phương trình sau: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Đối với alpha, giá trị của 1 tương ứng với một màu đồng nhất và giá trị của 0 tương ứng với một màu hoàn toàn trong suốt. Ví dụ: màu sau đây đại diện cho 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ở một siêu liên kết hoặc chạy một hàm tùy chỉnh.
disabled	boolean Nếu 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 với thao tác của người dùng.
altText	string Văn bản thay thế dùng để hỗ trợ 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 một đường siêu liên kết, bạn có thể viết: "Mở một thẻ trình duyệt mới rồi chuyển đến tài liệu dành cho nhà phát triển của Google Chat tại https://developers.google.com/workspace/chat".

Màu

Đại diện cho một màu trong hệ màu RGBA. Cách 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 sắc bằng nhiều ngôn ngữ thay vì tính gọn gàng. Ví dụ: các trường của biểu diễn này có thể được cung cấp đơn giản cho hàm khởi tạo của java.awt.Color trong Java; cũng có thể dễ dàng cung cấp cho phương thức +colorWithRed:green:blue:alpha của UIColor trong iOS; và chỉ cần một chút thao tác, bạn có thể dễ dàng định dạng 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 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 nhận khác) sẽ coi hai màu là bằng nhau nếu tất cả giá trị đỏ, xanh lục, xanh dương và alpha của mỗi màu 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 }

Trường
red	number Lượng màu đỏ dưới dạng một giá trị trong khoảng [0, 1].
green	number Lượng màu xanh lục dưới dạng một giá trị trong khoảng [0, 1].
blue	number Lượng màu xanh dương trong màu dưới dạng một 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ì đại lượng 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ột 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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
name	string Tên mà tiện ích công tắc đượ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 nhập vào 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 nhập vào 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 sẽ được chọn.
onChangeAction	object (Action) Hành động cần thực hiện khi trạng thái công tắc thay đổi, chẳng hạn như cần chạy hàm nào.
controlType	enum (ControlType) Cách nút chuyển xuất hiện trong giao diện người dùng. Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

ControlType

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

ButtonList

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

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

TextInput

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

Các ứng dụng trong Chat nhận và có thể xử lý giá trị của văn bản đã nhập trong 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 nhập vào 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 không xác định hoặc dữ liệu trừu tượng từ người dùng, hãy nhập dữ liệu dạ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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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 }

Trường
name	string Tên mà theo đó 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 nhập vào 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 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 đang hỏi tên của một người nào đó nhưng cụ thể cần họ của họ, hãy viết surname thay vì name. Bắt buộc nếu bạn không chỉ định hintText. Nếu không thì 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 sẽ luôn hiển thị. Bắt buộc nếu bạn không chỉ định label. Nếu không thì 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 nhập vào 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 dữ liệu 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 dữ liệu 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ó thể làm như chạy một hàm tuỳ chỉnh hoặc mở một hộp thoại trong Google Chat.
initialSuggestions	object (Suggestions) Các 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 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ỉ cho thấy 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. Khi tham chiếu đến JavaScript, một số người dùng có thể nhập javascript và số khác là 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. Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.
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 hành động được chỉ định ở đây, chẳng hạn như chạy một hàm tuỳ chỉnh. Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.
placeholderText	string Văn bản xuất hiện trong trường nhập dữ liệu khi trường đó trống. Sử 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. Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

Loại

Cách trường nhập dữ liệu 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 trường 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 chính sách này thành MULTIPLE_LINE.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Enum
SINGLE_LINE	Trường nhập dữ liệu 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.

RenderActions

Một tập hợp lệnh kết xuất yêu cầu một thẻ thực hiện một thao tác hoặc yêu cầu ứng dụng lưu trữ tiện ích bổ sung hoặc ứng dụng Chat thực hiện một thao tác dành riêng cho ứng dụng.

Dùng được cho ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Trường
action	Action

Hành động

Trường
navigations[]	Navigation Đẩy hoặc cập nhật các thẻ hiển thị.

Thao tác

Thêm thẻ mới vào ngăn xếp (di chuyển về phía trước). Đối với các ứng dụng Chat, chỉ có trên trang chủ ứng dụng.

Dùng được cho ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

navigations: {
  pushCard: CARD
}

Thay thế thẻ trên cùng bằng một thẻ mới. Đối với các ứng dụng Chat, chỉ có trên trang chủ ứng dụng.

Dùng được cho ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

navigations: {
  updateCard: CARD
}

Trường
Trường hợp navigate_action. navigate_action chỉ có thể là một trong những trạng thái sau:
pushCard	Card Ngăn xếp thẻ đẩy thẻ vào ngăn xếp thẻ.
updateCard	Card Ngăn xếp thẻ cập nhật thẻ trên cùng bằng một thẻ mới và giữ nguyên các giá trị của các trường đã điền trong biểu mẫu. Đối với trường không tương đương, giá trị sẽ bị loại bỏ.

Nội dung đề xuất

Các 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 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ẽ cho thấy 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. Khi tham chiếu đến JavaScript, một số người dùng có thể nhập javascript và số khác là 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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

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

SuggestionItem

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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
Trường hợp content. content chỉ có thể là một trong các trạng thái sau:
text	string Giá trị của dữ liệu 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.

SelectionInput

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ể dự đoán hoặc liệt kê. Để xem ví dụ về các ứng dụng Google Chat, hãy xem phần Thêm các thành phần có thể chọn trên giao diện người dùng.

Ứng dụng trong Chat 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 nhập vào 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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
name	string Tên xác định mục nhập lựa chọn 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 nhập vào 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 mức độ khẩn cấp của phiếu yêu cầu làm việc trong 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ị trong trình đơn thả xuống.
items[]	object (SelectionItem) Một dãy các mục có thể chọn. Ví dụ: một dãy 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 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 nhập vào 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 không chỉ định, giá trị mặc định sẽ là 3 mục.
multiSelectMinQueryLength	integer Đối với các trình đơn chọn nhiều mục, số lượng ký tự văn bản mà người dùng nhập trước khi ứng dụng truy vấn tính năng tự động hoàn thành và hiện các mục đề xuất trong trình đơn. Nếu không chỉ định thì giá trị mặc định sẽ là 0 ký tự đối với nguồn dữ liệu tĩnh và 3 ký tự đối với nguồn dữ liệu bên ngoài.
Trường hợp multi_select_data_source. Đối với trình đơn chọn nhiều mục, nguồn dữ liệu sẽ điền sẵn các mục lựa chọn. Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace. multi_select_data_source chỉ có thể là một trong các trạng thái sau:
externalDataSource	object (Action) Một nguồn dữ liệu bên ngoài, chẳng hạn như cơ sở dữ liệu quan hệ.
platformDataSource	object (PlatformDataSource) Một nguồn dữ liệu từ Google Workspace.

SelectionType

Đị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 kiểu 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 trong trình đơn thả xuống.

Mỗi dữ liệu đầu vào của lựa chọn đều hỗ trợ một loại lựa chọn. Ví dụ: kết hợp hộp đánh dấu và nút chuyển.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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 nhóm 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	Trình đơn chọn nhiều mục 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 trò chuyện trong 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 chọ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 trên Google Workspace, chẳng hạn như người dùng Google Workspace hoặc phòng trò chuyện 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 bên ngoài Google Workspace. Để biết ví dụ về cách triển khai trình đơn nhiều chọn, hãy xem phần Thêm trình đơn chọn nhiều mục. Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Tính năng chọn nhiều mục cho tiện ích bổ sung của Google Workspace đang ở giai đoạn Bản dùng thử cho nhà phát triển.

SelectionItem

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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
text	string Văn bản giúp nhận dạng hoặc mô tả mặt hàng cho người dùng.
value	string Giá trị được liên kết với mục này. Ứng dụng nên 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 nhập vào 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 dữ liệu đầu vào của lựa chọn chỉ chấp nhận một giá trị (chẳng hạn như 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 cho biểu tượng xuất hiện bên cạnh trường text của mục. Hỗ trợ các tệp PNG và JPEG. Bạn phải dùng một URL HTTPS. Ví dụ: https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
bottomText	string Đối với các trình đơn chọn nhiều mục, nội dung mô tả bằng văn bản hoặc nhãn xuất hiện bên dưới trường text của mục.

PlatformDataSource

Đố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 trên Google Workspace). Dùng để điền các mục trong trình đơn chọn nhiều mục.

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

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

Trường
Trường hợp data_source. Nguồn dữ liệu. data_source chỉ có thể là một trong các trạng thái sau:
commonDataSource	enum (CommonDataSource) Một nguồn dữ liệu dùng chung cho tất cả ứng dụng của Google Workspace, chẳng hạn như người dùng trong một tổ chức Google Workspace.
hostAppDataSource	object (HostAppDataSourceMarkup) Nguồn dữ liệu dành riêng cho một ứng dụng lưu trữ trên Google Workspace, chẳng hạn như các không gian trong Google Chat.

CommonDataSource

Nguồn dữ liệu dùng chung cho tất cả ứng dụng Google Workspace.

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

Enum
UNKNOWN	Giá trị mặc định. Không sử dụng.
USER	Người dùng Google Workspace. Người dùng chỉ có thể xem và chọn người dùng trong tổ chức Google Workspace của họ.

HostAppDataSourceMarkup

Đố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ừ một ứng dụng trên Google Workspace). Nguồn dữ liệu sẽ điền sẵn các mục lựa chọn cho trình đơn chọn nhiều mục.

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung 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. }

Trường
Trường hợp data_source. Ứng dụng Google Workspace điền các mục cho trình đơn nhiều mục. data_source chỉ có thể là một trong các trạng thái sau:
chatDataSource	object (ChatClientDataSourceMarkup) Nguồn dữ liệu từ Google Chat.

ChatClientDataSourceMarkup

Đối với tiện ích SelectionInput sử dụng trình đơn nhiều lựa chọn, một nguồn dữ liệu từ Google Chat. Nguồn dữ liệu sẽ điền sẵn các mục lựa chọn cho trình đơn chọn nhiều mục. Ví dụ: người dùng có thể chọn các phòng trò chuyện trong Google Chat mà họ là thành viên.

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

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

Trường
Trường hợp source. Nguồn dữ liệu trong Google Chat. source chỉ có thể là một trong các trạng thái sau:
spaceDataSource	object (SpaceDataSource) Các không gian trong Google Chat mà người dùng là thành viên.

SpaceDataSource

Nguồn dữ liệu điền sẵn các phòng trò chuyện trong Google Chat dưới dạng các mục lựa chọn cho trình đơn chọn nhiều mục. Chỉ điền các không gian có người dùng là thành viên.

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

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

Trường
defaultToCurrentSpace	boolean Nếu bạn đặt chính sách này thành true, thì theo mặc định, trình đơn chọn nhiều sẽ chọn không gian hiện tại trong Google Chat làm một mục.

DateTimePicker

Cho phép người dùng nhập ngày, giờ hoặc cả ngày và giờ. Để tham khảo ví dụ về các ứng dụng Google Chat, hãy xem phần Cho phép người dùng chọn ngày và 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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
name	string Tên mà theo đó 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 nhập vào 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 và giờ. Ví dụ: nếu người dùng đang đặt 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. 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ụ: để biểu thị lúc 12:00 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 vào lúc 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 mức chênh lệch múi giờ so với giờ 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ẽ được đặt thành chế độ cài đặt múi giờ của người dùng theo mặc định.
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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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 thời gian.

Dải phân cách

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

Hiện đường phân chia giữa các tiện ích dưới dạng đường ngang. Để tham khảo ví dụ trong các ứng dụng Google Chat, hãy xem phần Thêm đường phân chia theo chiều ngang giữa các tiện ích.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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 chứa văn bản hoặc hình ảnh. Đối với các cột thích ứng hoặc để bao gồm nhiều hơn văn bản hay hình ảnh, hãy sử dụng Columns. Để xem ví dụ về các ứng dụng Google Chat, hãy xem phần Hiển thị một lưới với một bộ sưu tập các mục.

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Ví dụ: JSON sau đây tạo lưới gồm 2 cột với 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) } }

Trường
title	string Văn bản xuất hiện 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 sẽ hiển thị trong lưới. Giá trị mặc định sẽ được sử dụng nếu bạn không chỉ định trường này và giá trị mặc định đó thay đổi 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 trong 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 mục được thêm vào thông số của lệnh gọi lại.

GridItem

Đạ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.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
id	string Giá trị nhận dạng do người dùng chỉ định cho mục trong 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 xuất hiện 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 trong lưới.

ImageComponent

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
imageUri	string URL của 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.

ImageCropStyle

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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 }

Trường
type	enum (ImageCropType) Loại cắt.
aspectRatio	number Tỷ lệ khung hình sẽ 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 }

ImageCropType

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Enum
IMAGE_CROP_TYPE_UNSPECIFIED	Không sử dụng. Không xác định.
SQUARE	Giá trị mặc định. Áp dụng ảnh cắt hình vuông.
CIRCLE	Áp dụng kiểu cắt hình tròn.
RECTANGLE_CUSTOM	Áp dụng một vùng cắt hình chữ nhật có tỷ lệ khung hình tuỳ chỉnh. Thiết lập 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.

BorderStyle

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
type	enum (BorderType) Loại đường viền.
strokeColor	object (Color) Màu sẽ sử dụng khi kiểu là BORDER_TYPE_STROKE.
cornerRadius	integer Bán kính góc của đường viền.

BorderType

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Enum
BORDER_TYPE_UNSPECIFIED	Khô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

Đại diện cho các tuỳ chọn bố cục khác nhau có sẵn cho một mục lưới.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Enum
GRID_ITEM_LAYOUT_UNSPECIFIED	Không sử dụng. Không xác định.
TEXT_BELOW	Tiêu đề và tiêu đề phụ xuất hiện bên dưới hình ảnh của mục lưới.
TEXT_ABOVE	Tiêu đề và tiêu đề phụ xuất hiện 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ẻ hoặc hộp thoại. Bạn có thể thêm các tiện ích vào từng cột; các tiện ích này xuất hiện theo thứ tự mà chúng được chỉ định. Để xem ví dụ trong các ứng dụng Google Chat, hãy xem phần Hiện thẻ và hộp thoại trong 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 thì 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 các hàng hoặc căn chỉnh tiện ích giữa các cột.

Các cột được 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ẽ xuống dòng 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.

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Các cột cho tiện ích bổ sung của Google Workspace đang ở Bản dùng thử cho nhà phát triển.

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

Trường
columnItems[]	object (Column) Một mảng cột. Bạn có thể đưa tối đa 2 cột vào một thẻ hoặc hộp thoại.

Cột

Một cột.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Các cột cho tiện ích bổ sung của Google Workspace đang ở Bản dùng thử cho nhà phát triển.

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

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 sẽ căn chỉnh ở bên trái, bên phải hay giữa cột.
verticalAlignment	enum (VerticalAlignment) Chỉ định xem các tiện ích có căn chỉnh ở đầu, cuối hay giữa cột hay không.
widgets[]	object (Widgets) Một mảng các tiện ích được đưa vào một cột. Các 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 đó.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Các cột cho tiện ích bổ sung của Google Workspace đang ở Bản dùng thử cho nhà phát triển.

Enum
HORIZONTAL_SIZE_STYLE_UNSPECIFIED	Không sử dụng. Không xác định.
FILL_AVAILABLE_SPACE	Giá trị mặc định. Cột lấp đầy không gian có sẵn, tối đa 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 lấp đầy khoảng không gian tối thiểu có thể và không quá 30% chiều rộng của thẻ.

HorizontalAlignment

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

Dùng được trong ứng dụng Google Chat và không dùng được trong tiện ích bổ sung của Google Workspace.

Enum
HORIZONTAL_ALIGNMENT_UNSPECIFIED	Khô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 đến 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.

VerticalAlignment

Chỉ định xem các tiện ích có căn chỉnh ở đầu, cuối hay giữa cột hay không.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Các cột cho tiện ích bổ sung của Google Workspace đang ở Bản dùng thử cho nhà phát triển.

Enum
VERTICAL_ALIGNMENT_UNSPECIFIED	Không sử dụng. Không xác định.
CENTER	Giá trị mặc định. Căn chỉnh các tiện ích vào 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 xuống cuối cột.

Tiện ích

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

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Các cột cho tiện ích bổ sung của Google Workspace đang ở Bản dùng thử cho nhà phát triển.

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

Trường
Trường hợp data. data chỉ có thể là một trong các trạng thái sau:
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.

DividerStyle

Kiểu 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ẻ.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

Enum
DIVIDER_STYLE_UNSPECIFIED	Không sử dụng. Không xác định.
SOLID_DIVIDER	Tuỳ chọn mặc định. Kết xuất một đường phân chia đồng nhất giữa các phần.
NO_DIVIDER	Nếu bạn đặt chính sách này, thì sẽ không có đường phân chia nào được hiển thị giữa các phần.

CardAction

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

Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.

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

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.

CardFixedFooter

Một chân trang cố định (cố định) xuất hiện ở cuối thẻ.

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

Đối với các ứng dụng trong Chat, bạn có thể dùng chân trang cố định trong hộp thoại, nhưng không thể dùng tin nhắn thẻ. Để tham khảo ví dụ trong các ứng dụng Google Chat, hãy xem phần Thêm một chân trang cố định.

Dùng được trong các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace.

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

Trường
primaryButton	object (Button) Nút chính của chân trang cố định. Nút này phải là nút văn bản đã có văn bản và màu.
secondaryButton	object (Button) Nút phụ của chân trang cố định. Nút này phải là nút văn bản đã có văn bản và màu. Nếu đặt secondaryButton, bạn cũng phải đặt primaryButton.

DisplayStyle

Trong Tiện ích bổ sung của Google Workspace, hãy xác định cách thẻ hiển thị.

Có trong tiện ích bổ sung của Google Workspace và không dùng được trong các ứng dụng Google Chat.

Enum
DISPLAY_STYLE_UNSPECIFIED	Khô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 phủ 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 đẩy 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ẻ.