Daftar tombol

Widget ButtonList menampilkan satu set tombol. Tombol bisa menampilkan teks, ikon, atau teks dan ikon.


Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Setiap Button mendukung tindakan OnClick yang terjadi saat pengguna mengklik tombol. Contoh:

  • Buka hyperlink dengan OpenLink, seperti hyperlink ke dokumentasi developer Google Chat, https://developers.google.com/chat.
  • Menjalankan tindakan yang menjalankan fungsi kustom, seperti memanggil API.

Anda dapat mencegah pengguna mengklik tombol dengan menyetel "disabled": "true".

Untuk aksesibilitas, tombol mendukung teks alternatif.

Contoh

Berikut adalah kartu yang terdiri dari widget ButtonList yang terdiri dari dua Button. Satu tombol akan membuka dokumentasi developer Google Chat di tab baru. Tombol lainnya menjalankan fungsi kustom yang disebut goToView() dan meneruskan satu parameter: viewType="Bird Eye View".

Contoh 2: tombol dengan warna khusus dan tombol yang dinonaktifkan

Berikut adalah kartu yang terdiri dari widget ButtonList yang terdiri dari dua Button. Satu tombol menggunakan kolom Color untuk menyesuaikan warna latar belakang tombol. Tombol lainnya dinonaktifkan dengan kolom Disabled, yang mencegah pengguna mengklik tombol dan menjalankan fungsi.

Contoh 3: tombol yang menampilkan ikon

Berikut adalah kartu yang terdiri dari widget ButtonList dengan dua ikon widget Button. Satu tombol menggunakan kolom knownIcon untuk menampilkan ikon email bawaan Google Chat. Tombol lainnya menggunakan kolom iconUrl untuk menampilkan widget ikon kustom.

Contoh 4: tombol dengan ikon dan teks

Berikut adalah kartu yang terdiri dari widget ButtonList yang meminta pengguna untuk mengirim email. Tombol pertama menampilkan ikon email dan tombol kedua menampilkan teks. Pengguna dapat mengklik ikon atau tombol teks untuk menjalankan fungsi sendEmail.

Kolom dan representasi JSON

Representasi JSON
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Kolom
buttons[]

object (Button)

Array tombol.

Tombol

Representasi JSON
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Kolom
text

string

Teks yang ditampilkan di dalam tombol.

icon

object (Icon)

Gambar ikon. Jika icon dan text ditetapkan, ikon akan muncul sebelum teks.

color

object (Color)

Jika disetel, tombol akan diisi dengan warna latar belakang yang solid dan warna font akan berubah untuk mempertahankan kontras dengan warna latar belakang. Misalnya, menetapkan latar belakang biru kemungkinan akan menghasilkan teks putih.

Jika tidak disetel, latar belakang gambar akan berwarna putih dan warna font akan berwarna biru.

Untuk warna merah, hijau, dan biru, nilai setiap kolom adalah angka float yang dapat dinyatakan dengan salah satu dari dua cara berikut: sebagai angka antara 0 dan 255 yang dibagi 255 (153/255), atau sebagai nilai antara 0 dan 1 (0,6). 0 mewakili tidak adanya warna dan 1 atau 255/255 mewakili kehadiran penuh warna pada skala RGB.

Jika ingin, tetapkan alpha, yang menetapkan tingkat transparansi menggunakan persamaan ini:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Untuk alpha, nilai 1 sesuai dengan warna solid, dan nilai 0 sesuai dengan warna yang sepenuhnya transparan.

Misalnya, warna berikut mewakili merah transparan setengah:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object (OnClick)

Wajib. Tindakan yang harus dilakukan saat pengguna mengklik tombol, seperti membuka hyperlink atau menjalankan fungsi kustom.

disabled

boolean

Jika true, tombol ditampilkan dalam keadaan tidak aktif dan tidak merespons tindakan pengguna.

altText

string

Teks alternatif yang digunakan untuk aksesibilitas.

Menyetel teks deskriptif yang memungkinkan pengguna mengetahui fungsi tombol tersebut. Misalnya, jika tombol membuka hyperlink, Anda mungkin menulis: "Membuka tab browser baru dan membuka dokumentasi developer Google Chat di https://developers.google.com/chat".

Ikon

Ikon yang ditampilkan di widget pada kartu. Untuk mengetahui contoh di aplikasi Google Chat, lihat Ikon.

Mendukung ikon bawaan dan kustom.

Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.

Representasi 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.
}
Kolom
altText

string

Opsional. Deskripsi ikon yang digunakan untuk aksesibilitas. Jika tidak ditentukan, nilai default Button akan diberikan. Sebagai praktik terbaik, Anda harus menetapkan deskripsi yang berguna untuk apa yang ditampilkan ikon tersebut, dan jika memungkinkan, apa yang dilakukan ikon tersebut. Misalnya, A user's account portrait, atau Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat.

Jika ikon ditetapkan dalam Button, altText akan muncul sebagai teks bantuan saat pengguna mengarahkan kursor ke tombol. Namun, jika tombol juga menetapkan text, altText ikon akan diabaikan.

imageType

enum (ImageType)

Gaya pangkas yang diterapkan pada gambar. Dalam beberapa kasus, menerapkan pemangkasan CIRCLE akan menyebabkan gambar digambar lebih besar daripada ikon bawaan.

Kolom gabungan icons. Ikon yang ditampilkan di widget pada kartu. icons hanya dapat berupa salah satu dari yang berikut:
knownIcon

string

Menampilkan salah satu ikon bawaan yang disediakan oleh Google Workspace.

Misalnya, untuk menampilkan ikon pesawat, tentukan AIRPLANE. Untuk bus, tentukan BUS.

Untuk mengetahui daftar lengkap ikon yang didukung, lihat ikon bawaan.

iconUrl

string

Menampilkan ikon kustom yang dihosting di URL HTTPS.

Contoh:

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

Jenis file yang didukung mencakup .png dan .jpg.

ImageType

Bentuk yang digunakan untuk memangkas gambar.

Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.

Enum
SQUARE Nilai default. Menerapkan mask persegi pada gambar. Misalnya, gambar 4x3 akan menjadi 3x3.
CIRCLE Menerapkan mask lingkaran ke gambar. Misalnya, gambar 4x3 menjadi lingkaran dengan diameter 3.

Warna

Representasi JSON
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Kolom
red

number

Jumlah merah dalam warna sebagai nilai dalam interval [0, 1].

green

number

Jumlah hijau dalam warna sebagai nilai dalam interval [0, 1].

blue

number

Jumlah biru dalam warna sebagai nilai dalam interval [0, 1].

alpha

number

Fraksi warna ini yang harus diterapkan ke piksel. Yaitu, warna piksel akhir ditentukan oleh persamaan:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Ini berarti bahwa nilai 1,0 berarti warna solid, sedangkan nilai 0,0 berarti warna yang sepenuhnya transparan. Kode ini menggunakan pesan wrapper, bukan skalar float sederhana sehingga memungkinkan untuk membedakan antara nilai default dan nilai yang tidak disetel. Jika dihilangkan, objek warna ini dirender sebagai warna solid (seolah-olah nilai alfa telah secara eksplisit diberi nilai 1.0).

OnClick

Mewakili cara merespons ketika pengguna mengeklik elemen interaktif pada kartu, seperti tombol.

Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.

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

Kolom gabungan data.

data hanya dapat berupa salah satu dari yang berikut:

action

object (Action)

Jika ditentukan, tindakan akan dipicu oleh onClick ini.

card

object (Card)

Kartu baru didorong ke tumpukan kartu setelah diklik jika ditentukan.

Tersedia untuk Add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

Memecahkan masalah

Saat aplikasi atau kartu Google Chat menampilkan error, antarmuka Chat akan menampilkan pesan yang menyatakan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi atau kartu Chat memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak muncul.

Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error deskriptif dan data log tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk mendapatkan bantuan dalam melihat, men-debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.