Widżet ButtonList
wyświetla zestaw przycisków. Przyciski mogą zawierać tekst, ikonę lub zarówno tekst, jak i ikonę.
Każde Button
obsługuje OnClick
działanie, które następuje, gdy użytkownik kliknie ten przycisk. Na przykład:
- Otwórz hiperlink z wartością
OpenLink
, np. z dokumentacją dla deweloperów Google Chat w usłudzehttps://developers.google.com/chat
. - Uruchom działanie, które będzie przeprowadzać funkcję niestandardową, np. wywoływać interfejs API.
Aby uniemożliwić użytkownikom kliknięcie przycisku, ustaw "disabled": "true"
.
W przypadku ułatwień dostępu przyciski obsługują tekst zastępczy.
Przykłady
Przykład 1: przycisk otwierający link i przycisk z funkcją niestandardową
Poniższa ilustracja przedstawia kartę zawierającą widżet ButtonList
składający się z dwóch elementów Button
. Jeden przycisk otwiera dokumentację dewelopera Google Chat w nowej karcie. Drugi przycisk uruchamia funkcję niestandardową o nazwie goToView()
i przekazuje jeden parametr: viewType="Bird Eye View"
.

ButtonList
z 2 elementami Button
Oto kod JSON karty:
JSON
{
"cardsV2": [
{
"cardId": "exampleCard",
"card": {
"sections": [
{
"widgets": [
{
"buttonList": {
"buttons": [
{
"text": "Open a hyperlink",
"onClick": {
"openLink": {
"url": "https://developers.google.com/chat",
}
}
},
{
"text": "Run a custom function",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "BIRD EYE VIEW",
}
],
}
}
}
]
}
}
]
}
]
}
}
]
}
Przykład 2. Przycisk z niestandardowym kolorem i wyłączonym przyciskiem
Poniższa ilustracja przedstawia kartę zawierającą widżet ButtonList
składający się z dwóch elementów Button
. Do zmiany koloru tła przycisku służy jeden przycisk w polu Color
. Drugi przycisk jest dezaktywowany za pomocą pola Disabled
, które uniemożliwia użytkownikowi kliknięcie przycisku i wykonanie funkcji.

ButtonList
z 2 Button
Oto kod JSON karty:
JSON
{
"cards_v2":[
{
"card_id":"exampleCard",
"card":{
"sections":[
{
"widgets":[
{
"buttonList":{
"buttons":[
{
"text":"View documentation hyperlink",
"onClick":{
"openLink":{
"url":"https://developers.google.com/chat"
}
},
"color":{
"red":0,
"green":0,
"blue":1,
"alpha":0.5
}
},
{
"text":"Button disabled",
"onClick":{
"openLink":{
"url":"https://developers.google.com/chat"
}
},
"disabled":true
}
]
}
}
]
}
]
}
}
]
}
Przykład 3: przyciski z ikonami
Poniższa ilustracja przedstawia kartę zawierającą widżet ButtonList
z 2 ikonami: Button
. Jeden przycisk używa pola [knownIcon]((https://developers.google.com/chat/api/guides/message-formats/cards#builtinicons))
do wyświetlania wbudowanej ikony e-maila w Google Chat. Drugi przycisk wyświetla pole niestandardowej widżetu w polu iconUrl
.

ButtonList
z 2 ikonami Button
Oto kod JSON karty:
JSON
{
"cards_v2": [
{
"card_id": "exampleCard",
"card": {
"sections": [
{
"widgets": [
{
"buttonList": {
"buttons": [
{
"icon": {"knownIcon": "EMAIL",},
"onClick": {
"action": {
"function": "sendEmail",
"parameters": [
{
"key": "emailContent",
"value": "Email value",
}
],
}
}
},
{
"icon": {"iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png",},
"onClick": {
"action": {
"function": "inviteBot",
"parameters": [
{
"key": "botType",
"value": "Bot value",
}
],
}
}
},
]
}
}
]
}
]
}
}
]
}
Przykład 4: przyciski z ikoną i tekstem
Poniższa ilustracja przedstawia kartę zawierającą widżet ButtonList
z prośbą o wysłanie e-maila. Na pierwszym przycisku wyświetla się ikona e-maila, a na drugim – tekst. Użytkownik może kliknąć ikonę lub przycisk tekstowy, aby wykonać funkcję sendEmail
.

ButtonList
z 2 elementami Button
Oto kod JSON karty:
JSON
{
"cards_v2": [
{
"card_id": "exampleCard",
"card": {
"sections": [
{
"widgets": [
{
"buttonList": {
"buttons": [
{
"icon": {"knownIcon": "EMAIL",},
"onClick": {
"action": {
"function": "sendEmail",
"parameters": [
{
"key": "emailContent",
"value": "Email value",
}
],
}
}
},
{
"text": "Send email",
"onClick": {
"action": {
"function": "sendEmail",
"parameters": [
{
"key": "sendEmailType",
"value": "email value",
}
],
}
}
},
]
}
}
]
}
]
}
}
]
}
Reprezentacja i pola JSON
Zapis JSON |
---|
{
"buttons": [
{
object (
|
Pola | |
---|---|
buttons[]
|
Tablica przycisków. |
Przycisk
Zapis JSON |
---|
{ "text": string, "icon": { object ( |
Pola | |
---|---|
text
|
Tekst wyświetlany na przycisku. |
icon
|
Obraz ikony. Jeśli ustawione są |
color
|
Po ustawieniu przycisk jest wypełniany jednolitym kolorem tła, a kolor czcionki zmienia się, aby zachować kontrast z kolorem tła. Na przykład ustawienie niebieskiego tła powoduje, że pojawia się biały tekst. Jeśli zasada jest nieskonfigurowana, tło obrazu jest białe, a czcionka ma kolor niebieski.
W przypadku czerwonych, zielonych i niebieskich wartości każdego pola można podać
Opcjonalnie ustaw
W przypadku
Na przykład ten kolor to półprzezroczysty czerwony:
|
onClick
|
Wymagany. Działanie wykonywane, gdy użytkownik kliknie przycisk – na przykład otworzy hiperlink lub uruchomi funkcję niestandardową. |
disabled
|
Jeśli |
altText
|
Tekst alternatywny używany przy ułatwieniach dostępu. Ustaw tekst opisowy informujący użytkowników o przeznaczeniu przycisku. Jeśli na przykład przycisk uruchamia hiperlink, możesz napisać: „Otwiera nową kartę przeglądarki i otwiera dokumentację dla deweloperów Google Chat na stronie https://developers.google.com/chat”. |
Ikona
Ikona wyświetlana w widżecie na karcie.
Obsługuje ikony wbudowane i niestandardowe.
Zapis JSON |
---|
{ "altText": string, "imageType": enum ( |
Pola | |
---|---|
altText
|
Opcjonalnie. Opis ikony ułatwień dostępu. Jeśli wartość nie jest określona, podawana jest wartość domyślna
Jeśli ikonę jest ustawiona w |
imageType
|
Styl przycinania zastosowany do obrazu. W niektórych przypadkach zastosowanie przycięcia w formacie |
Pole sumy: icons . Ikona wyświetlana w widżecie na karcie.
icons może być tylko jedną z tych wartości:
|
|
knownIcon
|
Wyświetlaj jedną z wbudowanych ikon Google Workspace.
Aby na przykład wyświetlić ikonę samolotu, podaj Pełną listę obsługiwanych ikon znajdziesz w sekcji Ikony wbudowane. |
iconUrl
|
Wyświetlaj ikonę niestandardową hostowaną pod adresem URL HTTPS. Na przykład:
Obsługiwane typy plików to |
Typ obrazu
Kształt używany do przycinania.
Wartości w polu enum | |
---|---|
SQUARE
|
Wartość domyślna. Stosuje do maski kwadratową. Na przykład obraz o wymiarach 4 × 3 stanie się obrazem 3 × 3. |
CIRCLE
|
Stosuje do maski okrągłą. Na przykład obraz o wymiarach 4 × 3 zmienia się w koło o średnicy 3. |
Kolor
Zapis JSON |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
Pola | |
---|---|
red
|
Czerwony kolor w postaci wartości z przedziału [0, 1]. |
green
|
Zielony kolor w wartościach z przedziału [0, 1]. |
blue
|
Niebieski kolor w wartościach z przedziału [0, 1]. |
alpha
|
Odsetek tego koloru, który należy zastosować w pikselu. Oznacza to, że końcowy kolor piksela jest określany za pomocą równania:
Oznacza to, że wartość 1,0 odpowiada jednolitemu kolorowi, a wartość 0,0 odpowiada całkowicie przezroczystemu kolorowi. Korzysta on z kodu towarzyszącego, a nie z prostego skalarnego skalarnego, dzięki czemu można odróżnić wartość domyślną od ustawionej. Jeśli ten warunek zostanie pominięty, obiekt koloru jest renderowany jako jednolity kolor (tak jakby wartość alfa wynosiła 1,0). |
Po kliknięciu
Wskazuje, jak zareagować, gdy użytkownik kliknie interaktywny element na karcie, np. przycisk.
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy:
|
|
action
|
Jeśli zasada jest określona, działanie jest wywoływane przez to zdarzenie |
openLink
|
Jeśli zasada jest określona, |
openDynamicLinkAction
|
Dodatek uruchamia to działanie, gdy musi otworzyć link. Różni się to od powyższego |
card
|
Nowa karta jest przesyłana do stosu kart po kliknięciu, jeśli został określony. Obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat. |