Cards v2

Thẻ

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.

Trong Google Chat, thẻ xuất hiện ở một số nơi:

• Dưới dạng tin nhắn độc lập.
• Kèm theo tin nhắn văn bản, ngay bên dưới tin nhắn văn bản.
• Dưới dạng hộp thoại .

JSON sau đây tạo một "thẻ liên hệ" để làm nổi bật:

• Tiêu đề có tên, chức danh, ảnh đại diện của người liên hệ.
• Một phần chứa thông tin liên hệ, bao gồm cả văn bản được định dạng.
• Các nút mà người dùng có thể nhấp vào để chia sẻ người liên hệ hoặc xem thêm hoặc ẩn bớt thông tin.

{
  "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": "[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) } ], "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 một hình ảnh và một tiêu đề ở đầu. Tiêu đề luôn xuất hiện ở đầu thẻ.
sections[]	object ( Section ) Chứa bộ sưu tập 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 bằng hình ảnh bằng đường phân cách đường.
cardActions[]	object ( CardAction ) Các thao tác trên thẻ. Các thao tác sẽ được thêm vào trình đơn trên thanh công cụ của thẻ. Vì thẻ ứng dụng Chat không có thanh công cụ nên các ứng dụng nhắn tin sẽ không hỗ trợ cardActions[] . Ví dụ: JSON sau đây tạo trình đơn thao tác trên thẻ với các tuỳ chọn Cài đặt và Gửi phản hồi: "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ẻ. Dùng làm giá trị nhận dạng thẻ trong phần điều hướng thẻ. Do các ứng dụng nhắn tin không hỗ trợ điều hướng thẻ nên chúng sẽ bỏ qua trường này.
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. Các ứng dụng nhắn tin hỗ trợ fixedFooter trong hộp thoại , nhưng không nằm trong tin nhắn thẻ .
displayStyle	enum ( DisplayStyle ) Trong tiện ích bổ sung của Google Workspace, hãy đặt thuộc tính hiển thị của peekCardHeader . Không được ứng dụng Chat hỗ trợ.
peekCardHeader	object ( CardHeader ) Khi hiển thị nội dung theo ngữ cảnh, tiêu đề của thẻ xem trước đóng vai trò là phần giữ chỗ để người dùng có thể di chuyển giữa thẻ trang chủ và thẻ theo ngữ cảnh. Không được ứng dụng Chat hỗ trợ.

Tiêu đề thẻ

Đại diện cho 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 đề của tiêu đề 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ẽ có một dòng. Nếu chỉ có tiêu đề được chỉ định, thì tiêu đề sẽ chiếm cả hai dòng.
subtitle	string Phụ đề của tiêu đề thẻ. Nếu được chỉ định, hãy 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 loại HTTPS của hình ảnh trong tiêu đề thẻ.
imageAltText	string Văn bản thay thế cho hình ảnh này được dù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ụ: hình ảnh 4x3 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 một hình tròn có đường kính 3.

Mục

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.

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 một phần. Hỗ trợ văn bản được định dạng HTML đơn giản .
widgets[]	object ( Widget ) Tất cả tiện ích trong phần này. Phải có ít nhất 1 tiện ích.
collapsible	boolean Cho biết liệu phần này có thể thu gọn hay không. Những 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 biểu tượng Hiển thị thêm . Người dùng có thể ẩn lại các tiện ích bằng cách nhấp vào biểu tượng Ẩn bớt . Để xác định những tiện ích nào đang 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 bạn thu gọn một mục. Ví dụ: khi một phần chứa năm tiện ích và uncollapsibleWidgetsCount được đặt thành 2 , hai tiện ích đầu tiên sẽ luôn được hiển thị và ba tiện ích cuối cùng được thu gọn theo mặc định. uncollapsibleWidgetsCount chỉ được tính đến khi collapsible là true .

Tiện ích

Mỗi thẻ bao gồm các tiện ích.

Tiện ích là một đối tượng tổng hợp có thể đại diện cho một trong các 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

{ // 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) } // End of list of possible types for union field data. }

Các trường
Trường liên kết data . Tiện ích chỉ có thể có một trong những mục sau. Bạn có thể sử dụng nhiều trường tiện ích để hiển thị thêm các mục. data chỉ có thể là một trong những trạng thái sau:
textParagraph	object ( TextParagraph ) Hiển thị một đoạn văn bản. Hỗ trợ văn bản được định dạng HTML đơn giản . 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ị một hình ảnh. Ví dụ: JSON sau đây sẽ tạo một hình ảnh bằng 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 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": "[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 sẽ tạo hai nút. Cách đầu tiên là nút văn bản màu xanh lam và nút thứ hai là nút hình ảnh để mở một 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 để người dùng có thể nhập vào. Ví dụ: JSON sau đây sẽ tạo một văn bản nhập 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 đầu vào văn bản cho một ngôn ngữ lập trình có 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 chế độ điều khiển lựa chọn cho phép người dùng chọn các mục. Các thành phần điều khiển lựa chọn có thể là hộp kiểm, nút chọn, nút chuyển hoặc trình đơn thả xuống. Ví dụ: JSON sau đây sẽ tạo một trình đơn thả xuống cho phép người dùng chọn một 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ị tiện ích chọn/nhập cho ngày, giờ hoặc ngày và giờ. Không được ứng dụng Chat hỗ trợ. Chúng tôi sẽ sớm hỗ trợ ứng dụng Chat. Ví dụ: JSON sau đây tạo một bộ chọn ngày giờ để lên lịch hẹn: "dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
divider	object ( Divider ) Hiển thị một đường phân cách dòng ngang giữa các tiện ích. Ví dụ: JSON sau đây tạo một bộ chia: "divider": { }
grid	object ( Grid ) Hiển thị một lưới có 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ố hàng được xác định bởi 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 có 5 hàng. Lưới có 11 mục và 2 cột có 6 hàng. Ví dụ: JSON sau đây sẽ tạo một lưới 2 cột có 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" } } }

Đoạn văn bản

Một đoạn văn bản hỗ trợ định dạng. Xem Định dạng văn bản để biết thêm thông tin chi tiết.

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

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

Hình ảnh

Hình ảnh do một URL chỉ định và có thể có một thao tác onClick .

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

Các trường
imageUrl	string URL 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ế cho hình ảnh này, dùng để hỗ trợ tiếp cận.

Lượt nhấp

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ư một nút.

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

Các trường
Trường liên kết data . data chỉ có thể là một trong những trạng thái sau:
action	object ( Action ) Nếu bạn chỉ định thì một hành động sẽ được kích hoạt bởi onClick này .
openLink	object ( OpenLink ) Nếu được chỉ định, onClick này sẽ kích hoạt một hành động liên kết mở.
openDynamicLinkAction	object ( Action ) Một 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. Khác với những openLink ở trên, phương thức này cần kết nối với máy chủ để lấy đường liên kết. Do đó, khách hà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.
card	object ( Card ) Một thẻ mới sẽ được đẩy đến ngăn xếp thẻ sau khi nhấp vào nếu được chỉ định. Được các tiện ích bổ sung của Google Workspace hỗ trợ, chứ không phải là các ứng dụng nhắn tin.

Thao tác

Hành động mô tả hành vi khi biểu mẫu được gửi. Ví dụ: một Apps Script có thể được gọi để xử lý biểu mẫu. Nếu thao tác 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 tùy chỉnh để gọi khi phần tử chứa được nhấp hoặc kích hoạt. Để biết ví dụ về cách sử dụng, hãy xem 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 tải mà hành động hiển thị trong khi 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 hành động đó hay không. Giá trị mặc định là false . Nếu true , các giá trị biểu mẫu vẫn tồn tại sau khi hành động được kích hoạt. Để cho phép người dùng thực hiện thay đổi trong khi hệ thống đang xử lý hành động, 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 thành UPDATE_MESSAGE và sử dụng cùng một cardId từ thẻ chứa hành động đó. Nếu false , các giá trị của biểu mẫu sẽ bị xoá khi hành động này được kích hoạt. Để ngăn người dùng thực hiện thay đổi trong khi xử lý hành động, hãy đặt LoadIndicator thành SPINNER .
interaction	enum ( Interaction ) Không bắt buộc. Bắt buộc khi mở hộp thoại . Việc nên làm để tương tác với người dùng, chẳng hạn như nhấp vào nút trên thẻ của người dùng. Nếu không xác định thì ứng dụng sẽ phản hồi bằng cách thực thi action như bình thường, chẳng hạn như mở một đường liên kết hoặc chạy một hàm. Bằng cách chỉ định interaction , ứng dụng có thể phản hồi theo các 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 xuất hiện. Được các ứng dụng nhắn tin hỗ trợ, nhưng không được hỗ trợ trên Tiện ích bổ sung của Google Workspace. Nếu bạn chỉ định một tiện ích bổ sung, thì toàn bộ thẻ sẽ bị xoá và không có gì hiển thị trong ứng dụng.

Tham 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 ẩn ngay, tạm ẩn 1 ngày, tạm ẩn vào tuần tới. Bạn có thể sử dụng phương thức hành động = mute(), chuyể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 nội dung CommonEventObject .

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

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

loadIndicator

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

Enum
SPINNER	Hiển thị vòng quay để cho biết nội dung đang tải.
NONE	Không có mục nào được hiển thị.

Tương tác

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

Việc nên làm để tương tác với người dùng, chẳng hạn như nhấp vào nút trên thẻ của người dùng.

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

Bằng cách chỉ định interaction , ứng dụng có thể phản hồi theo các 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 xuất hiện.

Được các ứng dụng nhắn tin hỗ trợ, nhưng không được hỗ trợ trên Tiện ích bổ sung của Google Workspace. Nếu bạn chỉ định một tiện ích bổ sung, thì toàn bộ thẻ sẽ bị xoá và không có gì hiển thị trong ứng dụng.

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

Đường liên kết mở

Thể hiện sự kiện onClick mở một 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
url	string URL cần mở.
openAs	enum ( OpenAs ) Cách mở một đường liên kết. Không được ứng dụng Chat hỗ trợ.
onClose	enum ( OnClose ) Khách hàng quên một đườ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 ứng dụng Chat hỗ trợ.

OpenAs

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

Được các tiện ích bổ sung của Google Workspace hỗ trợ, chứ không phải là các ứng dụng nhắn tin.

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

Đang đóng

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

Việc triển khai phụ thuộc vào khả năng của nền tảng ứng dụng. Ví dụ: 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 đặt 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ị, thì OnClose sẽ được ưu tiên.

Được các tiện ích bổ sung của Google Workspace hỗ trợ, chứ không phải là các ứng dụng nhắn tin.

Enum
NOTHING	Giá trị mặc định. Thẻ này 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. Nếu được dùng cùng với OpenAs.OVERLAY , cửa sổ con sẽ đóng vai trò 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 với các đồ trang trí không bắt buộc như nhãn phía trên hoặc phía 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.

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

Các trường
icon (deprecated)	object ( Icon ) Mặt hàng 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 bớt.
text	string Bắt buộc. Văn bản chính. Hỗ trợ định dạng đơn giản. Xem phần Định dạng văn bản để biết định dạng chi tiết.
wrapText	boolean Cài đặt xuống dòng tự động. Nếu true , văn bản sẽ bao bọc 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 cắt bớt.
onClick	object ( OnClick ) Khi người dùng nhấp vào topLabel hoặc bottomLabel , hành động này sẽ kích hoạt.
Trường liên kết control . 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:
button	object ( Button ) Bạn có thể nhấp vào một nút để kích hoạt một hành động.
switchControl	object ( SwitchControl ) Bạn có thể nhấp vào một tiện ích nút chuyển để thay đổi trạng thái và kích hoạt một hành động.
endIcon	object ( Icon ) Biểu tượng hiển thị sau văn bản. Hỗ trợ các biểu tượng được tích hợp sẵn và tuỳ chỉnh.

Biểu tượng

Biểu tượng hiển thị trong tiện ích trên thẻ.

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

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

Các trường
altText	string Không bắt buộc. Nội dung mô tả biểu tượng dùng để hỗ trợ tiếp cận. Nếu không xác định thì hệ thống sẽ cung cấp giá trị mặc định "Nút". Cách tốt nhất là bạn nên đặt mô tả hữu ích về nội dung và biểu tượng liên quan. 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 bạn đặt biểu tượng trong một 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 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.
Trường liên kết 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:
knownIcon	string Hiện một trong các biểu tượng tích hợp sẵn do Google Workspace cung cấp. Ví dụ: để hiển thị một biểu tượng máy bay, hãy chỉ định AIRPLANE . Đối với 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 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 URL loại 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 + biểu tượng mà người dùng có thể nhấp vào.

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

Hiện được hỗ trợ trong các ứng dụng Chat (bao gồm cả hộp thoại và tin nhắn trên thẻ ) và các 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 }

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ả chính sách icon và text , thì biểu tượng sẽ xuất hiện trước văn bản.
color	object ( Color ) Nút này sẽ được tô màu nền đồng nhất và màu phông chữ 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ể sẽ dẫn đến văn bản màu trắng. Nếu bạn không đặt thì nền hình ảnh sẽ có màu trắng và màu phông chữ 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à số float có thể được biểu thị bằng 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 thể hiện việc không có 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. Đặt tùy chọn alpha, tùy chọn này đặt mức độ minh bạch 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ị 1 tương ứng với 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 cần 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 tuỳ chỉnh.
disabled	boolean Nếu true , nút này sẽ ở 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 để hỗ trợ tiếp cận. Đặt văn bản mô tả để cho người dùng biết nút này có chức năng gì. Ví dụ: nếu một nút mở một 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

Biểu thị 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/từ bản trình bày màu bằng nhiều ngôn ngữ thay vì sự thu gọn. Ví dụ: các trường của cách biểu diễn này có thể được cung cấp không đáng kể cho hàm dựng của java.awt.Color trong Java; nó cũng có thể được cung cấp không đáng kể cho phương thức +colorWithRed:green:blue:alpha của UIColor trong iOS; và, chỉ với một ít công việc, nó có thể dễ dàng được định dạng thành CSS rgba() JavaScript trong JavaScript.

Trang tham khảo này không cung cấp thông tin về hệ màu tuyệt đối cần được sử dụng để diễn giải giá trị RGB (ví dụ: sRGB, Adobe RGB, DCI-P3, BT.2020, v.v.). Theo mặc định, các ứng dụng nên giả định hệ màu sRGB.

Khi cần quyết định sự cân bằng màu sắc, các cách triển khai, trừ khi được nêu khác, coi hai màu là bằng nhau nếu tất cả các giá trị đỏ, xanh lục, xanh lam và alpha của chúng đều khác nhau tối đa 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 một giá trị trong khoảng [0, 1].
green	number Số màu xanh lục trong màu 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 Tỷ lệ phần trăm của màu này nên đượ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àu đồng nhất, trong khi giá trị 0.0 tương ứng với 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ị không được đặt. Nếu bị bỏ qua, đối tượng màu này được hiển thị dưới dạng màu đồng nhất (như thể giá trị alpha đã được gán giá trị 1,0 một cách rõ ràng).

SwitchControl

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

Chỉ được hỗ trợ trên 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 chuyển đổi được xác định trong sự kiện nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý dữ liệu do biểu mẫu nhập, 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ề dưới dạng 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ý dữ liệu do biểu mẫu nhập, 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 ) Thao tác cần thực hiện khi trạng thái của nút chuyển bị thay đổi, chẳng hạn như chức năng sẽ 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 đổi kiểu quảng cáo.
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ểu diễn dưới dạng JSON
{ "buttons": [ { object (Button) } ] }

Các trường
buttons[]	object ( Button ) Một mảng 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ợ các đề xuất và hành động thay đổi.

Các ứng dụng nhắn tin 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ý dữ liệu do biểu mẫu nhập, 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 trừu tượng từ người dùng, hãy sử dụng phương thức nhập văn bản. Để thu thập dữ liệu đã xác định từ người dùng, hãy sử dụng tiện ích nhập dữ liệu lựa chọn.

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

Các trường
name	string Tên mà theo đó dữ liệu đầu vào 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ý dữ liệu do biểu mẫu nhập, 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 đang yêu cầu tên ai đó nhưng đặc biệt cần họ, hãy viết "họ" thay vì "tên". 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 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ề dưới dạng 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ý dữ liệu do biểu mẫu nhập, 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 này là trường đơn hay nhiều dòng.
onChangeAction	object ( Action ) Việc cần làm khi một thay đổi xảy ra trong trường nhập văn bản. Ví dụ về thay đổi: người dùng thêm vào trường hoặc xoá văn bản. Ví dụ về các thao tác cần thực hiện bao gồm chạy một hàm tuỳ chỉnh hoặc mở hộp thoại trong Google Chat.
initialSuggestions	object ( Suggestions ) Các giá trị được đề 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 trường nhập văn bản. Khi người dùng nhập, các giá trị được đề xuất sẽ lọc động để khớp với nội dung người dùng đã nhập. Ví dụ: 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. Các 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 "tập lệnh java". Bạn có thể đề xuất cách sử dụng "JavaScript" để chuẩn hóa 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 sẽ luôn là SINGLE_LINE , ngay cả khi bạn đặ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 văn bản. Nếu không xác định thì 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 được chỉ định ở đây, chẳng hạn như chạy một hàm tuỳ chỉnh. Được các tiện ích bổ sung của Google Workspace hỗ trợ, chứ không phải là các ứng dụng nhắn tin. Chúng tôi sẽ sớm hỗ trợ ứng dụng Chat.

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ụ: đó là trường nhập một dòng hay nhập nhiều dòng.

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

Enum
SINGLE_LINE	Trường nhập văn bản có chiều cao cố định là 1 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 ý

Các giá trị được đề 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 trường nhập văn bản. Khi người dùng nhập, các giá trị được đề xuất sẽ lọc động để khớp với nội dung người dùng đã nhập.

Ví dụ: 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.

Các 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 "tập lệnh java". Bạn có thể đề xuất cách sử dụng "JavaScript" để chuẩn hóa 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 sẽ luôn là SINGLE_LINE , ngay cả khi bạn đặt thành MULTIPLE_LINE .

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

Các trường
items[]	object ( SuggestionItem ) Danh sách các đề xuất dùng cho nội dung đề 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ị được đề 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
Trường liên kết content . content chỉ có thể là một trong những trạng thái sau:
text	string Giá trị của một giá trị nhập vào đề xuất vào trường nhập văn bản. Điều này tương đương với những gì người dùng sẽ tự nhập.

InputInput (Lựa chọn đầu vào)

Một tiện ích tạo một mục trên giao diện người dùng để người dùng có thể chọn. Ví dụ: trình đơn thả xuống hoặc danh sách kiểm tra.

Các ứng dụng nhắn tin 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ý dữ liệu do biểu mẫu nhập, 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 từ những người dùng phù hợp với các tùy chọn mà bạn đặt, hãy sử dụng dữ liệu đầu vào lựa chọn. Để thu thập dữ liệu trừu tượng từ người dùng, hãy sử dụng tiện ích nhập văn bản.

Biểu diễn dưới dạng JSON
{ "name": string, "label": string, "type": enum (SelectionType), "items": [ { object (SelectionItem) } ], "onChangeAction": { object (Action) } }

Các trường
name	string Tên mà theo đó dữ liệu đầu vào lựa chọ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ý dữ liệu do biểu mẫu nhập, 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 vé 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 ) Cách mà một tùy chọn xuất hiện với người dùng. Các tuỳ chọn khác nhau hỗ trợ nhiều loại tương tác. Ví dụ: người dùng có thể bật nhiều hộp đánh dấu nhưng chỉ có thể chọn một giá trị từ trình đơn thả xuống. Mỗi mục nhập lựa chọn hỗ trợ một loại lựa chọn. Ví dụ: hộp kiểm và công tắc trộn không được hỗ trợ.
items[]	object ( SelectionItem ) Một mảng gồm các mục đã chọn. Ví dụ: tất cả các hộp kiểm đã chọn.
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 bạn chưa chỉ định thì bạn phải chỉ định một nút riêng để gửi biểu mẫu. Để biết thông tin chi tiết về cách xử lý dữ liệu do biểu mẫu nhập, hãy xem phần Nhận dữ liệu biểu mẫu .

Loại lựa chọn

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

Mỗi mục nhập lựa chọn hỗ trợ một loại lựa chọn. Ví dụ: hộp kiểm và công tắc trộ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 nhiều hộp đánh dấu cho mỗi mục nhập lựa chọn.
RADIO_BUTTON	Một bộ nút chọn. Người dùng có thể chọn một nút chọn cho mỗi đầu vào lựa chọn.
SWITCH	Một bộ công tắc. Người dùng có thể bật nhiều công tắc cùng một lúc cho mỗi mục nhập lựa chọn.
DROPDOWN	Một trình đơn thả xuống. Người dùng có thể chọn một mục trong trình đơn thả xuống cho mỗi mục nhập lựa chọn.

Mục chọn

Một mục có thể chọn trong mục nhập lựa chọn, chẳng hạn như hộp kiểm hoặc nút chuyển.

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

Các trường
text	string Văn bản hiển thị cho người dùng.
value	string Giá trị được liên kết với mục này. Ứng dụng khách phải sử dụng giá trị này làm giá trị nhập biểu mẫu. Để biết thông tin chi tiết về cách xử lý dữ liệu do biểu mẫu nhập, hãy xem phần Nhận dữ liệu biểu mẫu .
selected	boolean Khi true , nhiều mục sẽ được chọn. Nếu nhiều mục được chọn cho các nút chọn và trình đơn thả xuống, mục đầu tiên được chọn sẽ được nhận và các mục sau đó bị bỏ qua.

Bộ chọn ngày giờ

Cho phép người dùng chỉ định ngày, giờ hoặc cả ngày và giờ.

Chấp nhận hoạt động đầu vào văn bản từ người dùng, nhưng có bộ chọn ngày và giờ tương tác giúp người dùng nhập ngày và giờ theo đúng định dạng. Nếu người dùng nhập sai ngày hoặc giờ, thì tiện ích sẽ hiển thị lỗi nhắc người dùng nhập đúng định dạng.

Không được ứng dụng Chat hỗ trợ. Chúng tôi sẽ sớm hỗ trợ ứng dụng Chat.

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à bộ chọn ngày giờ đượ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ý dữ liệu do biểu mẫu nhập, 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ờ. 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 đặt lịch hẹn, thì một nhãn như "Ngày hẹn" hoặc "Ngày và giờ hẹn" có thể sẽ hoạt động hiệu quả.
type	enum ( DateTimePickerType ) Loại ngày và giờ mà bộ chọn ngày giờ hỗ trợ.
valueMsEpoch	string ( int64 format) Giá trị hiển thị làm giá trị mặc định trước khi người dùng nhập hoặc người dùng nhập vào trước, được biểu thị bằng mili giây ( Thời gian bắt đầu ). Đối với loại DATE_AND_TIME , giá trị bắt đầu của hệ thống sẽ được sử dụng đầy đủ. Đối với loại DATE_ONLY , chỉ sử dụng ngày của thời gian bắt đầu của hệ thống. Đối với loại TIME_ONLY , chỉ sử dụng thời gian bắt đầu của hệ thống. Ví dụ:Để thể hiện 3 giờ sáng, hãy đặt thời gian bắt đầu của hệ thống từ 3 * 60 * 60 * 1000 .
timezoneOffsetDate	integer Số đại diện cho độ lệch múi giờ so với giờ UTC, tính bằng phút. Nếu được đặt, valueMsEpoch sẽ hiển thị theo múi giờ được chỉ định. Nếu bạn không đặt chính sách này, thì hệ thống sẽ sử dụng chế độ cài đặt múi giờ của người dùng ở phía máy khách.
onChangeAction	object ( Action ) Được kích hoạt khi người dùng nhấp vào Lưu hoặc Xoá khỏi giao diện bộ chọn ngày giờ.

Loại ngày giờ

Loại ngày và giờ mà bộ chọn ngày giờ hỗ trợ.

Enum
DATE_AND_TIME	Người dùng có thể chọn ngày và giờ.
DATE_ONLY	Người dùng chỉ có thể chọn một ngày.
TIME_ONLY	Người dùng chỉ có thể chọn một khoảng thời gian.

Đường phân chia

Hiển thị một dải phân cách giữa các tiện ích, một đường kẻ ngang.

Ví dụ: JSON sau đây tạo một bộ chia:

"divider": {}

Lưới

Hiển thị một lưới có 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ố 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 có 5 hàng. Lưới có 11 mục và 2 cột có 6 hàng.

Ví dụ: JSON sau đây sẽ tạo một lưới 2 cột có 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 sẽ 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. Giá trị mặc định được sử dụng nếu trường này không được chỉ định và giá trị mặc định đó khác nhau tùy 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 sử dụng lại cho từng mục trong 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 thông số của lệnh gọi lại.

Mục trong lưới

Đại diện cho một mục trong bố cục lưới.

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 trong lưới.
title	string Tiêu đề của mục trong lưới.
subtitle	string Phụ đề của mục trong lưới.
layout	enum ( GridItemLayout ) Bố cục để sử dụng cho mục trong 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 hình ảnh

Thể hiện kiểu cắt được áp dụng cho 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 loại hình 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 được cắt

Thể hiện kiểu cắt được áp dụng cho hình ảnh.

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

Kiểu đường viền

Biểu thị kiểu đường viền hoàn chỉnh áp dụng cho các mục trong tiện ích.

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 sắc nên dùng khi loại này là BORDER_TYPE_STROKE .
cornerRadius	integer Bán kính góc cho đường viền.

Loại đường viền

Biểu thị các loại đường viền được áp dụng cho tiện ích.

Enum
BORDER_TYPE_UNSPECIFIED	Chưa chỉ định giá trị.
NO_BORDER	Giá trị mặc định. Không có đường viền.
STROKE	Outline.

Lưới bố cục

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	Chưa chỉ định bố cục nào.
TEXT_BELOW	Tiêu đề và tiêu đề phụ được hiển thị bên dưới hình ảnh của mục trong lưới.
TEXT_ABOVE	Tiêu đề và tiêu đề phụ hiển thị phía trên hình ảnh của mục trong lưới.

Thao tác với thẻ

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

Không đượ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.

Thẻ cố định thẻ

Chân trang liên tục (gắn bó) 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.

Các ứng dụng nhắn tin hỗ trợ fixedFooter trong hộp thoại , nhưng không nằm trong 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 này phải là một nút văn bản có văn bản và tập hợp màu.
secondaryButton	object ( Button ) Nút phụ của chân trang cố định. Nút này phải là một nút văn bản có văn bản và tập hợp màu. Bạn phải đặt primaryButton nếu đã đặt secondaryButton .

Kiểu hiển thị

Trong tiện ích bổ sung của Google Workspace, hệ thống sẽ xác định cách hiển thị thẻ.

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

Enum
DISPLAY_STYLE_UNSPECIFIED	Không được dùng.
PEEK	Tiêu đề của thẻ xuất hiện ở cuối thanh bên, bao phủ một phần thẻ trên cùng hiện tại của ngăn xếp. Khi bạn 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 đề, tiêu đề được tạo sẽ được sử dụng.
REPLACE	Giá trị mặc định. Thẻ hiển thị bằng cách thay thế chế độ xem của thẻ trên cùng trong ngăn xếp thẻ.