Kartu
Antarmuka kartu yang ditampilkan di pesan Google Chat atau Add-on Google Workspace.
{i>Card<i} mendukung tata letak yang ditentukan, elemen-elemen UI interaktif seperti tombol, dan multimedia seperti gambar. Gunakan kartu untuk menyajikan informasi mendetail, mengumpulkan informasi dari pengguna, dan memandu pengguna untuk mengambil langkah berikutnya.
Desain dan pratinjau kartu dengan Card Builder.
Membuka Card Builder
Untuk mempelajari cara membuat kartu, lihat dokumentasi berikut:
- Untuk aplikasi Google Chat, lihat Desain komponen kartu atau dialog.
- Untuk Add-on Google Workspace, lihat Antarmuka berbasis kartu.
Contoh: Pesan kartu untuk aplikasi Google Chat
Untuk membuat contoh pesan kartu di Google Chat, gunakan JSON berikut:
{
"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": "sasha@example.com"
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PERSON"
},
"text": "<font color=\"#80e27e\">Online</font>"
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PHONE"
},
"text": "+1 (555) 555-1234"
}
},
{
"buttonList": {
"buttons": [
{
"text": "Share",
"onClick": {
"openLink": {
"url": "https://example.com/share"
}
}
},
{
"text": "Edit",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "EDIT"
}
]
}
}
}
]
}
}
]
}
]
}
}
]
}
Representasi JSON |
---|
{ "header": { object ( |
Kolom | |
---|---|
header
|
Header kartu. {i>Header<i} biasanya berisi gambar utama dan judul. Header selalu muncul di bagian atas kartu. |
sections[]
|
Berisi kumpulan widget. Setiap bagian memiliki {i>header<i} opsionalnya sendiri. Bagian-bagian secara visual dipisahkan oleh pemisah garis. Untuk contoh di aplikasi Google Chat, lihat Menentukan bagian kartu. |
sectionDividerStyle
|
Gaya pemisah antarbagian. |
cardActions[]
|
Tindakan kartu. Tindakan ditambahkan ke menu toolbar kartu.
Misalnya, JSON berikut menyusun menu tindakan kartu dengan
|
name
|
Nama kartu. Digunakan sebagai ID kartu dalam navigasi kartu.
|
fixedFooter
|
Footer tetap ditampilkan di bagian bawah kartu ini.
Latar (Setting)
|
displayStyle
|
Di Add-on Google Workspace, tetapkan properti tampilan
|
peekCardHeader
|
Saat menampilkan konten kontekstual, header kartu cuplikan berfungsi sebagai placeholder sehingga pengguna dapat berpindah maju antara kartu halaman beranda dan kartu kontekstual.
|
CardHeader
Mewakili header kartu. Untuk contoh di aplikasi Google Chat, lihat Tambahkan header.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
Kolom | |
---|---|
title
|
Wajib. Judul header kartu. {i>Header<i} memiliki tinggi tetap: jika judul dan subjudul ditentukan, masing-masing membutuhkan satu baris. Jika hanya judul yang ditentukan, kode tersebut akan menggunakan kedua baris. |
subtitle
|
Subjudul header kartu. Jika ditentukan, akan muncul pada barisnya sendiri di bawah
|
imageType
|
Bentuk yang digunakan untuk memangkas gambar.
|
imageUrl
|
URL HTTPS gambar di header kartu. |
imageAltText
|
Teks alternatif dari gambar ini yang digunakan untuk aksesibilitas. |
ImageType
Bentuk yang digunakan untuk memangkas gambar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
SQUARE
|
Nilai default. Menerapkan mask persegi ke gambar. Misalnya, gambar 4x3 menjadi 3x3. |
CIRCLE
|
Menerapkan mask lingkaran ke gambar. Misalnya, sebuah gambar berukuran 4x3 menjadi lingkaran dengan diameter 3. |
Bagian
Bagian berisi kumpulan widget yang dirender secara vertikal dalam urutan yang ditentukan.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "header": string, "widgets": [ { object ( |
Kolom | |
---|---|
header
|
Teks yang muncul di atas suatu bagian. Mendukung teks berformat HTML sederhana. Untuk informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace. |
widgets[]
|
Semua widget di bagian tersebut. Harus berisi minimal satu widget. |
collapsible
|
Menunjukkan apakah bagian ini dapat diciutkan. Bagian yang dapat diciutkan menyembunyikan beberapa atau semua widget, tetapi pengguna dapat meluaskan bagian tersebut untuk menampilkan widget tersembunyi dengan mengklik Tampilkan lebih banyak. Pengguna dapat menyembunyikan widget lagi dengan mengklik Tampilkan lebih sedikit.
Untuk menentukan widget mana yang disembunyikan, tentukan
|
uncollapsibleWidgetsCount
|
Jumlah widget yang tidak dapat diciutkan yang tetap terlihat meskipun bagian diciutkan.
Misalnya, jika suatu bagian berisi lima widget dan
|
collapseControl
|
Opsional. Menentukan tombol luaskan dan ciutkan bagian. Tombol ini hanya akan ditampilkan jika bagian tersebut dapat diciutkan. Jika kolom ini tidak disetel, tombol default akan digunakan.
|
Widget
Setiap kartu terdiri dari widget.
Widget adalah objek gabungan yang dapat merepresentasikan salah satu dari teks, gambar, tombol, dan jenis objek lainnya.
Representasi JSON |
---|
{ "horizontalAlignment": enum ( |
Kolom | |
---|---|
horizontalAlignment
|
Menentukan apakah widget diratakan ke kiri, kanan, atau tengah kolom. |
Kolom union
data . Widget hanya boleh memiliki salah satu dari item berikut. Anda dapat menggunakan beberapa kolom widget untuk menampilkan lebih banyak item.
data
hanya dapat berupa salah satu dari hal berikut:
|
|
textParagraph
|
Menampilkan paragraf teks. Mendukung teks berformat HTML sederhana. Untuk informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace. Misalnya, JSON berikut membuat teks tebal:
|
image
|
Menampilkan gambar. Misalnya, JSON berikut membuat gambar dengan teks alternatif:
|
decoratedText
|
Menampilkan item teks dengan dekorasi. Misalnya, JSON berikut membuat widget teks berdekorasi yang menampilkan alamat email:
|
buttonList
|
Daftar tombol. Misalnya, JSON berikut membuat dua tombol. Yang pertama adalah tombol teks biru dan yang kedua adalah tombol gambar untuk membuka link:
|
textInput
|
Menampilkan kotak teks tempat pengguna dapat mengetik. Misalnya, JSON berikut membuat input teks untuk alamat email:
Contoh lain, JSON berikut membuat input teks untuk bahasa pemrograman dengan saran statis:
|
selectionInput
|
Menampilkan kontrol pilihan yang memungkinkan pengguna memilih item. Kontrol pilihan dapat berupa kotak centang, tombol pilihan, tombol akses, atau menu dropdown. Misalnya, JSON berikut membuat menu dropdown yang memungkinkan pengguna memilih ukuran:
|
dateTimePicker
|
Menampilkan widget yang memungkinkan pengguna memasukkan tanggal, waktu, atau tanggal dan waktu. Misalnya, JSON berikut membuat pemilih tanggal dan waktu untuk menjadwalkan janji temu:
|
divider
|
Menampilkan pemisah garis horizontal di antara widget. Misalnya, JSON berikut membuat pemisah:
|
grid
|
Menampilkan petak dengan kumpulan item. {i>Grid<i} mendukung sejumlah kolom dan item. Jumlah baris ditentukan oleh batas atas item jumlah dibagi dengan jumlah kolom. Grid dengan 10 item dan 2 kolom memiliki 5 baris. Grid dengan 11 item dan 2 kolom memiliki 6 baris.
Misalnya, JSON berikut membuat petak 2 kolom dengan satu item:
|
columns
|
Menampilkan hingga 2 kolom.
Untuk menyertakan lebih dari 2 kolom, atau menggunakan baris, gunakan
Misalnya, JSON berikut membuat 2 kolom yang masing-masing berisi paragraf teks:
|
chipList
|
Daftar chip. Misalnya, JSON berikut membuat dua chip. Yang pertama adalah chip teks dan yang kedua adalah chip ikon yang membuka link:
|
TextParagraph
Paragraf teks yang mendukung pemformatan. Untuk contoh di aplikasi Google Chat, lihat Tambahkan paragraf teks berformat. Untuk informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "text": string, "maxLines": integer } |
Kolom | |
---|---|
text
|
Teks yang ditampilkan di widget. |
maxLines
|
Jumlah maksimum baris teks yang ditampilkan di widget. Jika teks melebihi jumlah baris maksimum yang ditentukan, kelebihan konten akan disembunyikan dengan tampilkan lebih banyak tombol. Jika teks sama atau lebih pendek dari jumlah baris maksimum yang ditentukan, tampilkan lebih banyak tombol tidak ditampilkan.
Nilai defaultnya adalah 0, yang dalam hal ini semua konteks ditampilkan. Nilai negatif akan diabaikan.
|
Gambar
Gambar yang ditentukan oleh URL dan dapat memiliki
onClick
tindakan. Untuk contoh, lihat
Tambahkan gambar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Kolom | |
---|---|
imageUrl
|
URL HTTPS yang menghosting gambar. Contoh:
|
onClick
|
Saat pengguna mengklik gambar, klik tersebut akan memicu tindakan ini. |
altText
|
Teks alternatif dari gambar ini yang digunakan untuk aksesibilitas. |
OnClick
Merepresentasikan cara merespons saat pengguna mengklik elemen interaktif pada kartu, seperti tombol.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ // Union field |
Kolom | |
---|---|
Kolom union
|
|
action
|
Jika ditentukan, tindakan akan dipicu oleh ini
|
openLink
|
Jika ditentukan,
|
openDynamicLinkAction
|
Add-on memicu tindakan ini ketika tindakan perlu membuka link. Hal ini berbeda dari
|
card
|
Kartu baru didorong ke tumpukan kartu setelah diklik jika ditentukan.
|
overflowMenu
|
Jika ditentukan,
|
Tindakan
Tindakan yang menjelaskan perilaku saat formulir dikirimkan. Misalnya, Anda dapat memanggil skrip Apps Script untuk menangani formulir. Jika tindakan dipicu, nilai formulir akan dikirim ke server.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "function": string, "parameters": [ { object ( |
Kolom | |
---|---|
function
|
Fungsi kustom yang akan dipanggil saat elemen yang memuatnya diklik atau diaktifkan. Untuk contoh penggunaan, lihat Baca data formulir. |
parameters[]
|
Daftar parameter tindakan. |
loadIndicator
|
Menentukan indikator pemuatan yang ditampilkan tindakan saat membuat pesan ajakan (CTA). |
persistValues
|
Menunjukkan apakah nilai formulir tetap ada setelah tindakan. Nilai defaultnya adalah
Jika
Jika
|
interaction
|
Opsional. Wajib ada saat membuka dialog. Apa yang harus dilakukan sebagai respons terhadap interaksi dengan pengguna, seperti pengguna mengklik tombol di pesan kartu.
Jika tidak ditentukan, aplikasi akan merespons dengan mengeksekusi
Dengan menetapkan
|
requiredWidgets[]
|
Opsional. Isi daftar ini dengan nama widget yang diperlukan Action ini untuk pengiriman yang valid.
Jika widget yang tercantum di sini tidak memiliki nilai saat Action ini dipanggil, pengiriman formulir akan dibatalkan.
|
allWidgetsAreRequired
|
Opsional. Jika ini benar, semua widget dianggap diperlukan oleh tindakan ini.
|
ActionParameter
Daftar parameter string yang akan disediakan saat metode tindakan dipanggil. Misalnya, pertimbangkan tiga tombol tidur sebentar: penundaan sekarang, tunda satu hari, atau tunda minggu depan. Anda mungkin menggunakan
action method = snooze()
, yang meneruskan jenis tunda dan waktu tunda dalam daftar parameter string.
Untuk mempelajari lebih lanjut, lihat
CommonEventObject
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "key": string, "value": string } |
Kolom | |
---|---|
key
|
Nama parameter untuk skrip tindakan. |
value
|
Nilai parameter. |
LoadIndicator
Menentukan indikator pemuatan yang ditampilkan tindakan saat membuat pesan ajakan (CTA).
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
SPINNER
|
Menampilkan indikator lingkaran berputar untuk menunjukkan bahwa konten sedang dimuat. |
NONE
|
Tidak ada yang ditampilkan. |
Interaksi
Opsional. Wajib ada saat membuka dialog.
Apa yang harus dilakukan sebagai respons terhadap interaksi dengan pengguna, seperti pengguna mengklik tombol di pesan kartu.
Jika tidak ditentukan, aplikasi akan merespons dengan mengeksekusi
action
—seperti membuka link atau menjalankan fungsi—seperti biasa.
Dengan menetapkan
interaction
, aplikasi dapat merespons dengan cara interaktif khusus. Misalnya, dengan menetapkan
interaction
dapat
OPEN_DIALOG
, aplikasi dapat membuka
dialog.
Jika ditentukan, indikator pemuatan tidak akan ditampilkan. Jika ditentukan untuk add-on, seluruh kartu akan dihapus dan tidak ada yang ditampilkan di klien.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Enum | |
---|---|
INTERACTION_UNSPECIFIED
|
Nilai default. Tujuan
action
berjalan seperti biasa.
|
OPEN_DIALOG
|
Membuka dialog, antarmuka berbasis kartu dan berjendela yang digunakan aplikasi Chat untuk berinteraksi dengan pengguna. Hanya didukung oleh aplikasi Chat sebagai respons terhadap klik tombol pada pesan kartu. Jika ditentukan untuk add-on, seluruh kartu akan dihapus dan tidak ada yang ditampilkan di klien.
|
OpenLink
Menampilkan
onClick
yang membuka hyperlink.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "url": string, "openAs": enum ( |
Kolom | |
---|---|
url
|
URL yang akan dibuka. |
openAs
|
Cara membuka link.
|
onClose
|
Apakah klien melupakan link setelah membukanya, atau mengamatinya hingga jendela tertutup.
|
OpenAs
Jika
OnClick
tindakan membuka tautan, maka klien dapat membukanya sebagai jendela ukuran penuh (jika itu adalah bingkai yang digunakan oleh klien), atau sebuah overlay (misalnya, {i>pop-up).<i} Implementasinya bergantung pada kemampuan platform klien, dan nilai yang dipilih mungkin diabaikan jika klien tidak mendukungnya.
FULL_SIZE
didukung oleh semua klien.
Tersedia untuk Add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
Enum | |
---|---|
FULL_SIZE
|
Link akan terbuka sebagai jendela ukuran penuh (jika itu adalah frame yang digunakan oleh klien). |
OVERLAY
|
Tautan akan terbuka sebagai overlay, misalnya sebagai pop-up. |
OnClose
Apa yang dilakukan klien ketika
tautan dibuka oleh
OnClick
tindakan ditutup.
Implementasinya bergantung pada kemampuan platform klien. Misalnya, sebuah {i>browser<i} web mungkin membuka
tautan di jendela {i>pop-up<i} dengan
OnClose
sebagai pengendali
Jika keduanya
OnOpen
dan
OnClose
ditetapkan, dan platform klien tidak dapat
mendukung kedua nilai itu,
OnClose
akan diprioritaskan.
Tersedia untuk Add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
Enum | |
---|---|
NOTHING
|
Nilai default. Kartu tidak dapat dimuat ulang; tidak akan terjadi apa pun. |
RELOAD
|
Memuat ulang kartu setelah jendela turunan ditutup.
Jika digunakan
bersamaan dengan
|
OverflowMenu
Widget yang menampilkan menu pop-up dengan satu atau beberapa tindakan yang dapat dipanggil oleh pengguna. Misalnya, menampilkan tindakan non-utama di kartu. Anda dapat menggunakan widget ini saat tindakan tidak sesuai dengan ruang yang tersedia. Untuk menggunakannya, tentukan widget ini di
OnClick
tindakan widget yang mendukungnya. Misalnya, di
Button
.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{
"items": [
{
object (
|
Kolom | |
---|---|
items[]
|
Wajib. Daftar opsi menu. |
OverflowMenuItem
Opsi yang dapat dipanggil pengguna dalam menu tambahan.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ "startIcon": { object ( |
Kolom | |
---|---|
startIcon
|
Ikon yang ditampilkan di depan teks. |
text
|
Wajib. Teks yang mengidentifikasi atau menjelaskan item kepada pengguna. |
onClick
|
Wajib. Tindakan ini dipanggil saat opsi menu dipilih. Ini
|
disabled
|
Apakah opsi menu dinonaktifkan. Nilai defaultnya adalah false (salah). |
Ikon
Ikon yang ditampilkan dalam widget pada kartu. Untuk contoh di aplikasi Google Chat, lihat Tambahkan ikon.
Mendukung bawaan dan kustom ikon.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "altText": string, "imageType": enum ( |
Kolom | |
---|---|
altText
|
Opsional. Deskripsi ikon yang digunakan untuk aksesibilitas. Jika tidak ditentukan, nilai default-nya
Jika ikon diatur dalam
|
imageType
|
Gaya pemangkasan yang diterapkan ke gambar. Dalam beberapa kasus, menerapkan
|
Kolom union
icons . Ikon yang ditampilkan di widget pada kartu.
icons
hanya dapat berupa salah satu dari hal berikut:
|
|
knownIcon
|
Menampilkan salah satu ikon bawaan yang disediakan oleh Google Workspace.
Misalnya, untuk menampilkan ikon pesawat, tentukan
Untuk daftar lengkap ikon yang didukung, lihat ikon bawaan. |
iconUrl
|
Menampilkan ikon kustom yang dihosting di URL HTTPS. Contoh:
Jenis file yang didukung mencakup
|
materialIcon
|
Tampilkan salah satu Ikon Material Google. Misalnya, untuk menampilkan ikon kotak centang, gunakan
|
MaterialIcon
J Ikon Material Google, yang berisi lebih dari 2.500 opsi.
Misalnya, untuk menampilkan ikon kotak centang dengan bobot dan tingkat yang disesuaikan, tulis hal berikut:
{
"name": "check_box",
"fill": true,
"weight": 300,
"grade": -25
}
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ "name": string, "fill": boolean, "weight": integer, "grade": integer } |
Kolom | |
---|---|
name
|
Nama ikon yang didefinisikan dalam
Ikon Material Google, misalnya,
|
fill
|
Apakah ikon dirender sebagai terisi. Nilai defaultnya adalah false (salah). Untuk melihat pratinjau berbagai setelan ikon, buka Ikon Google Font dan sesuaikan pengaturan pada Sesuaikan. |
weight
|
Ketebalan goresan ikon. Pilih dari {100, 200, 300, 400, 500, 600, 700}. Jika tidak ada, nilai defaultnya adalah 400. Jika ada nilai lain yang ditentukan, nilai default akan digunakan. Untuk melihat pratinjau berbagai setelan ikon, buka Ikon Google Font dan sesuaikan pengaturan pada Sesuaikan. |
grade
|
Bobot dan gradasi memengaruhi ketebalan simbol. Penyesuaian nilai lebih terperinci daripada penyesuaian bobot dan memiliki dampak kecil pada ukuran simbol. Pilih dari {-25, 0, 200}. Jika tidak ada, nilai defaultnya adalah 0. Jika ada nilai lain yang ditentukan, nilai default akan digunakan. Untuk melihat pratinjau berbagai setelan ikon, buka Ikon Google Font dan sesuaikan pengaturan pada Sesuaikan. |
DecoratedText
Widget yang menampilkan teks dengan dekorasi opsional seperti label di atas atau di bawah teks, ikon di depan teks, widget pilihan, atau tombol setelah teks. Untuk contoh di aplikasi Google Chat, lihat Menampilkan teks dengan teks dekoratif.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "icon": { object ( |
Kolom | |
---|---|
icon
|
Tidak berlaku lagi dan digantikan
|
startIcon
|
Ikon yang ditampilkan di depan teks. |
topLabel
|
Teks yang muncul di atas
|
text
|
Wajib. Teks utama. Mendukung pemformatan sederhana. Untuk informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace. |
wrapText
|
Setelan kemas teks. Jika
Hanya berlaku untuk
|
bottomLabel
|
Teks yang muncul di bawah
|
onClick
|
Tindakan ini dipicu saat pengguna mengklik
|
Kolom union
control . Tombol, {i>switch<i}, kotak centang, atau gambar yang muncul di sebelah kanan teks dalam
decoratedText
.
control
hanya dapat berupa salah satu dari hal berikut:
|
|
button
|
Tombol yang dapat diklik pengguna untuk memicu tindakan. |
switchControl
|
Widget tombol akses yang dapat diklik pengguna untuk mengubah statusnya dan memicu tindakan. |
endIcon
|
Ikon yang ditampilkan setelah teks. |
Tombol
Teks, ikon, atau teks dan tombol ikon yang dapat diklik pengguna. Untuk contoh di aplikasi Google Chat, lihat Tambahkan tombol.
Untuk membuat gambar menjadi tombol yang dapat diklik, tentukan
(bukan
Image
) dan setel
ImageComponent
onClick
tindakan.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "text": string, "icon": { object ( |
Kolom | |
---|---|
text
|
Teks yang ditampilkan di dalam tombol. |
icon
|
Gambar ikon. Jika keduanya
|
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, menyetel latar belakang biru kemungkinan akan menghasilkan teks putih. Jika tidak disetel, latar belakang gambar akan berwarna putih dan warna font biru.
Untuk warna merah, hijau, dan biru, nilai dari setiap {i>field<i} adalah
Opsional
Sebagai
Misalnya, warna berikut mewakili setengah warna merah transparan:
|
onClick
|
Wajib. Tindakan yang akan dilakukan saat pengguna mengklik tombol, seperti membuka hyperlink atau menjalankan fungsi kustom. |
disabled
|
Jika
|
altText
|
Teks alternatif yang digunakan untuk aksesibilitas. Tetapkan teks deskriptif yang memungkinkan pengguna mengetahui fungsi tombol. Misalnya, jika tombol membuka hyperlink, Anda dapat menulis: "Membuka tab browser baru dan membuka dokumentasi developer Google Chat di https://developers.google.com/workspace/chat". |
type
|
Menentukan jenis tombol.
|
Warna
Mewakili warna dalam ruang warna RGBA. Representasi ini dirancang untuk kemudahan konversi ke dan dari representasi warna dalam berbagai bahasa daripada kerapatan. Misalnya, ruang isian dari representasi ini bisa dengan mudah diberikan ke konstruktor
java.awt.Color
di Java; ini juga dapat dengan mudah diberikan ke antarmuka UIColor
+colorWithRed:green:blue:alpha
di iOS; dan, hanya dengan sedikit pekerjaan, dapat dengan mudah diformat ke dalam CSS
rgba()
di JavaScript.
Halaman referensi ini tidak memiliki informasi tentang ruang warna absolut yang harus digunakan untuk menafsirkan nilai RGB—misalnya, sRGB, Adobe RGB, DCI-P3, dan BT.2020. Secara default, aplikasi harus menggunakan ruang warna sRGB.
Ketika kesetaraan warna perlu ditentukan, implementasi, kecuali jika didokumentasikan sebaliknya, memperlakukan dua warna sama jika semua nilai merah, hijau, biru, dan alfa masing-masing paling berbeda
1e-5
.
Contoh (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();
}
// ...
Contoh (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;
}
// ...
Contoh (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('');
};
// ...
Representasi JSON |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
Kolom | |
---|---|
red
|
Jumlah merah dalam warna sebagai nilai dalam interval [0, 1]. |
green
|
Jumlah hijau dalam warna sebagai nilai dalam interval [0, 1]. |
blue
|
Jumlah biru dalam warna sebagai nilai dalam interval [0, 1]. |
alpha
|
Fraksi warna ini yang harus diterapkan ke piksel. Yaitu, warna piksel akhir ditentukan oleh persamaan:
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 secara eksplisit diberi nilai 1,0). |
Jenis
Tujuan jenis tombol.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Enum | |
---|---|
TYPE_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
OUTLINED
|
Tombol {i>outline<i} adalah tombol dengan penekanan sedang. Add-on biasanya berisi tindakan yang penting, tetapi bukan tindakan utama di aplikasi Chat atau add-on. |
FILLED
|
Tombol yang terisi memiliki penampung dengan warna solid. Warna ini memiliki dampak visual paling besar dan direkomendasikan untuk tindakan penting dan utama di aplikasi Chat atau add-on. |
FILLED_TONAL
|
Tombol {i>tonal<i} yang terisi adalah jalan tengah alternatif antara tombol yang terisi dan {i>outline<i}. Diagram ini berguna dalam konteks di mana tombol dengan prioritas lebih rendah memerlukan penekanan yang sedikit lebih besar daripada yang diberikan oleh tombol garis besar. |
BORDERLESS
|
Tombol tidak memiliki penampung yang tidak terlihat dalam status defaultnya. Hal ini sering digunakan untuk tindakan prioritas terendah, terutama saat menyajikan beberapa opsi. |
SwitchControl
Tombol gaya beralih atau kotak centang di dalam
decoratedText
.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Hanya didukung di
decoratedText
.
Representasi JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Kolom | |
---|---|
name
|
Nama yang digunakan untuk mengidentifikasi widget tombol dalam peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
value
|
Nilai yang dimasukkan oleh pengguna, ditampilkan sebagai bagian dari peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
selected
|
Kapan
|
onChangeAction
|
Tindakan yang akan dilakukan saat status tombol berubah, seperti fungsi yang akan dijalankan. |
controlType
|
Cara tombol muncul di antarmuka pengguna.
|
ControlType
Cara tombol muncul di antarmuka pengguna.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
SWITCH
|
Tombol gaya beralih. |
CHECKBOX
|
Tidak berlaku lagi dan digantikan
CHECK_BOX .
|
CHECK_BOX
|
Kotak centang. |
ButtonList
Daftar tombol yang ditata secara horizontal. Untuk contoh di aplikasi Google Chat, lihat Tambahkan tombol.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{
"buttons": [
{
object (
|
Kolom | |
---|---|
buttons[]
|
Array tombol. |
TextInput
Kolom tempat pengguna dapat memasukkan teks. Mendukung saran dan tindakan saat perubahan. Untuk contoh di aplikasi Google Chat, lihat Tambahkan kolom tempat pengguna dapat memasukkan teks.
Aplikasi Chat menerima dan dapat memproses nilai teks yang dimasukkan selama peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir.
Saat Anda perlu mengumpulkan data yang tidak ditentukan atau abstrak dari pengguna, gunakan input teks. Untuk mengumpulkan data yang ditentukan atau dienumerasi dari pengguna, gunakan
SelectionInput
.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Kolom | |
---|---|
name
|
Nama yang digunakan untuk mengidentifikasi input teks dalam peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
label
|
Teks yang muncul di atas kolom input teks di antarmuka pengguna.
Tentukan teks yang membantu pengguna memasukkan informasi yang dibutuhkan aplikasi Anda. Misalnya, jika Anda menanyakan nama seseorang, tetapi secara khusus membutuhkan nama belakangnya, tulis
Wajib jika
|
hintText
|
Teks yang muncul di bawah kolom input teks yang dimaksudkan untuk membantu pengguna dengan meminta mereka memasukkan nilai tertentu. Teks ini selalu terlihat.
Wajib jika
|
value
|
Nilai yang dimasukkan oleh pengguna, ditampilkan sebagai bagian dari peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
type
|
Cara kolom input teks muncul di antarmuka pengguna. Misalnya, apakah kolom satu atau beberapa baris. |
onChangeAction
|
Tindakan yang harus dilakukan saat terjadi perubahan dalam kolom input teks. Misalnya, pengguna yang menambahkan ke kolom atau menghapus teks. Contoh tindakan yang harus dilakukan antara lain menjalankan fungsi kustom atau membuka dialog di Google Chat. |
initialSuggestions
|
Nilai yang disarankan yang dapat dimasukkan pengguna. Nilai ini muncul saat pengguna mengklik di dalam kolom input teks. Saat pengguna mengetik, nilai yang disarankan akan memfilter secara dinamis agar sesuai dengan yang diketik pengguna.
Misalnya, kolom input teks untuk bahasa pemrograman dapat menyarankan Java, JavaScript, Python, dan C++. Saat pengguna mulai mengetik
Nilai yang disarankan akan membantu memandu pengguna untuk memasukkan nilai yang dapat dipahami oleh aplikasi Anda. Saat merujuk ke JavaScript, beberapa pengguna mungkin memasukkan
Bila ditentukan,
|
autoCompleteAction
|
Opsional. Menentukan tindakan yang akan diambil saat kolom input teks memberikan saran kepada pengguna yang berinteraksi dengannya.
Jika tidak ditentukan, saran akan ditetapkan oleh
Jika ditentukan, aplikasi akan mengambil tindakan yang ditentukan di sini, seperti menjalankan fungsi kustom.
|
validation
|
Tentukan validasi yang diperlukan untuk kolom input teks ini.
|
placeholderText
|
Teks yang muncul di kolom input teks saat kolom kosong. Gunakan teks ini untuk meminta pengguna memasukkan nilai. Misalnya,
|
Jenis
Cara kolom input teks muncul di antarmuka pengguna. Misalnya, baik berupa kolom input baris tunggal atau input multibaris. Jika
initialSuggestions
ditentukan,
type
selalu
SINGLE_LINE
, meskipun disetel ke
MULTIPLE_LINE
.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
SINGLE_LINE
|
Kolom input teks memiliki tinggi tetap satu baris. |
MULTIPLE_LINE
|
Kolom input teks memiliki tinggi tetap beberapa baris. |
RenderActions
Sekumpulan instruksi {i>render<i} yang memberi tahu kartu untuk melakukan tindakan, atau memberi tahu aplikasi host add-on atau aplikasi Chat untuk melakukan tindakan khusus aplikasi.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Kolom | |
---|---|
action |
Tindakan
Kolom | |
---|---|
navigations[] |
Kirim atau perbarui kartu yang ditampilkan. |
Saran
Nilai yang disarankan yang dapat dimasukkan pengguna. Nilai ini muncul saat pengguna mengklik di dalam kolom input teks. Saat pengguna mengetik, nilai yang disarankan akan memfilter secara dinamis agar sesuai dengan yang diketik pengguna.
Misalnya, kolom input teks untuk bahasa pemrograman dapat menyarankan Java, JavaScript, Python, dan C++. Saat pengguna mulai mengetik
Jav
, daftar filter saran yang ditampilkan
Java
dan
JavaScript
.
Nilai yang disarankan akan membantu memandu pengguna untuk memasukkan nilai yang dapat dipahami oleh aplikasi Anda. Saat merujuk ke JavaScript, beberapa pengguna mungkin memasukkan
javascript
dan lainnya
java script
. Menyarankan
JavaScript
bisa menstandarkan cara pengguna berinteraksi dengan aplikasi Anda.
Bila ditentukan,
TextInput.type
selalu
SINGLE_LINE
, meskipun disetel ke
MULTIPLE_LINE
.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{
"items": [
{
object (
|
Kolom | |
---|---|
items[]
|
Daftar saran yang digunakan untuk rekomendasi pelengkapan otomatis di kolom input teks. |
SuggestionItem
Satu nilai yang disarankan yang dapat dimasukkan pengguna dalam kolom input teks.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ // Union field |
Kolom | |
---|---|
Kolom union
|
|
text
|
Nilai input yang disarankan ke kolom input teks. Ini sama dengan apa yang dimasukkan pengguna. |
Validasi
Mewakili data yang diperlukan untuk memvalidasi widget yang dilampirkan.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{
"characterLimit": integer,
"inputType": enum (
|
Kolom | |
---|---|
characterLimit
|
Tentukan batas karakter untuk widget input teks. Perhatikan bahwa ini hanya digunakan untuk input teks dan diabaikan untuk widget lainnya.
|
inputType
|
Tentukan jenis widget input.
|
InputType
Jenis widget input.
Enum | |
---|---|
INPUT_TYPE_UNSPECIFIED
|
Jenis tidak ditentukan. Jangan gunakan. |
TEXT
|
Teks biasa yang menerima semua karakter. |
INTEGER
|
Nilai bilangan bulat. |
FLOAT
|
Nilai float. |
EMAIL
|
Alamat email. |
EMOJI_PICKER
|
Emoji yang dipilih dari pemilih emoji yang disediakan sistem. |
SelectionInput
Widget yang membuat satu atau beberapa item UI yang dapat dipilih pengguna. Misalnya, menu dropdown atau kotak centang. Anda dapat menggunakan widget ini untuk mengumpulkan data yang dapat diprediksi atau dienumerasi. Untuk contoh di aplikasi Google Chat, lihat Tambahkan elemen UI yang dapat dipilih.
Aplikasi Chat dapat memproses nilai item yang dipilih atau dimasukkan pengguna. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir.
Untuk mengumpulkan data yang tidak didefinisikan atau abstrak dari pengguna, gunakan
TextInput
.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Kolom | |
---|---|
name
|
Wajib. Nama yang mengidentifikasi input pilihan dalam peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
label
|
Teks yang muncul di atas kolom input pilihan di antarmuka pengguna. Tentukan teks yang membantu pengguna memasukkan informasi yang dibutuhkan aplikasi Anda. Misalnya, jika pengguna memilih urgensi tiket kerja dari menu drop-down, labelnya mungkin adalah "Urgensi" atau "Pilih urgensi". |
type
|
Jenis item yang ditampilkan kepada pengguna di
|
items[]
|
Array item yang dapat dipilih. Misalnya, array tombol pilihan atau kotak centang. Mendukung hingga 100 item. |
onChangeAction
|
Jika ditentukan, formulir akan dikirim saat pilihan berubah. Jika tidak ditentukan, Anda harus menentukan tombol terpisah yang mengirimkan formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
multiSelectMaxSelectedItems
|
Untuk menu multi-pilihan, jumlah item maksimum yang dapat dipilih pengguna. Nilai minimumnya adalah 1 item. Jika tidak ditentukan, setelan defaultnya adalah 3 item. |
multiSelectMinQueryLength
|
Untuk menu multi-pilihan, jumlah karakter teks yang dimasukkan pengguna sebelum kueri aplikasi akan dilengkapi secara otomatis dan menampilkan item yang disarankan dalam menu. Jika tidak ditentukan, defaultnya adalah 0 karakter untuk sumber data statis dan 3 karakter untuk sumber data eksternal. |
validation
|
Untuk menu dropdown, validasi untuk kolom input pilihan ini.
|
Kolom union
|
|
externalDataSource
|
Sumber data eksternal, seperti basis data relasional. |
platformDataSource
|
Sumber data dari Google Workspace. |
SelectionType
Format untuk item yang dapat dipilih pengguna. Opsi yang berbeda mendukung jenis interaksi yang berbeda. Misalnya, pengguna dapat memilih beberapa kotak centang, tetapi hanya dapat memilih satu item dari menu dropdown.
Setiap input pilihan mendukung satu jenis pilihan. Mencampur kotak centang dan tombol, misalnya, tidak didukung.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
CHECK_BOX
|
Sekumpulan kotak centang. Pengguna dapat memilih satu atau beberapa kotak centang. |
RADIO_BUTTON
|
Serangkaian tombol pilihan. Pengguna dapat memilih satu tombol pilihan. |
SWITCH
|
Sekumpulan tombol. Pengguna dapat mengaktifkan satu atau beberapa tombol. |
DROPDOWN
|
Menu dropdown. Pengguna dapat memilih satu item dari menu. |
MULTI_SELECT
|
Menu multi-pilihan untuk data statis atau dinamis. Dari panel menu, pengguna memilih satu atau beberapa item. Pengguna juga dapat memasukkan nilai untuk mengisi data dinamis. Misalnya, pengguna dapat mulai mengetik nama ruang Google Chat dan widget akan menyarankan ruang tersebut secara otomatis. Untuk mengisi item pada menu multi-pilihan, Anda dapat menggunakan salah satu jenis sumber data berikut:
Untuk contoh cara menerapkan menu multi-pilihan, lihat Tambahkan menu multi-pilihan.
|
SelectionItem
Item yang dapat dipilih pengguna dalam input pilihan, seperti kotak centang atau tombol.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string } |
Kolom | |
---|---|
text
|
Teks yang mengidentifikasi atau menjelaskan item kepada pengguna. |
value
|
Nilai yang terkait dengan item ini. Klien harus menggunakan ini sebagai nilai input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
selected
|
Apakah item dipilih secara default. Jika input pilihan hanya menerima satu nilai (seperti untuk tombol pilihan atau menu dropdown), hanya setel kolom ini untuk satu item. |
startIconUri
|
Untuk menu multi-pilihan, URL untuk ikon yang ditampilkan di samping
|
bottomText
|
Untuk menu pilihan banyak, deskripsi teks atau label ditampilkan di bawah
|
PlatformDataSource
Untuk
yang menggunakan menu multi-pilihan, yaitu sumber data dari Google Workspace. Digunakan untuk mengisi item dalam menu multi-pilihan.
SelectionInput
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ // Union field |
Kolom | |
---|---|
Kolom union
data_source . Sumber data.
data_source
hanya dapat berupa salah satu dari hal berikut:
|
|
commonDataSource
|
Sumber data yang digunakan bersama oleh semua aplikasi Google Workspace, seperti pengguna di organisasi Google Workspace. |
hostAppDataSource
|
Sumber data yang unik untuk aplikasi host Google Workspace, seperti ruang di Google Chat. |
CommonDataSource
Sumber data yang dibagikan oleh semua Aplikasi Google Workspace.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Enum | |
---|---|
UNKNOWN
|
Nilai default. Jangan gunakan. |
USER
|
pengguna Google Workspace. Pengguna hanya dapat melihat dan memilih pengguna dari organisasi Google Workspace miliknya. |
HostAppDataSourceMarkup
Untuk
widget yang menggunakan menu multi-pilihan, yaitu sumber data dari aplikasi Google Workspace. Sumber data mengisi item pilihan untuk menu multi-pilihan.
SelectionInput
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ // Union field |
Kolom | |
---|---|
Kolom union
data_source . Aplikasi Google Workspace yang mengisi item untuk menu multi-pilihan.
data_source
hanya dapat berupa salah satu dari hal berikut:
|
|
chatDataSource
|
Sumber data dari Google Chat. |
ChatClientDataSourceMarkup
Untuk
yang menggunakan menu multi-pilihan, yaitu sumber data dari Google Chat. Sumber data mengisi item pilihan untuk menu multi-pilihan. Misalnya, pengguna dapat memilih ruang Google Chat tempat mereka menjadi anggota.
SelectionInput
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ // Union field |
Kolom | |
---|---|
Kolom union
source . Sumber data Google Chat.
source
hanya dapat berupa salah satu dari hal berikut:
|
|
spaceDataSource
|
Ruang Google Chat tempat pengguna menjadi anggota. |
SpaceDataSource
Sumber data yang mengisi ruang Google Chat sebagai item pilihan untuk menu multi-pilihan. Hanya mengisi ruang tempat pengguna menjadi anggota.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ "defaultToCurrentSpace": boolean } |
Kolom | |
---|---|
defaultToCurrentSpace
|
Jika ditetapkan ke
|
DateTimePicker
Memungkinkan pengguna memasukkan tanggal, waktu, atau tanggal dan waktu. Untuk contoh di aplikasi Google Chat, lihat Izinkan pengguna memilih tanggal dan waktu.
Pengguna dapat memasukkan teks atau menggunakan pemilih untuk memilih tanggal dan waktu. Jika pengguna memasukkan tanggal atau waktu yang tidak valid, pemilih akan menampilkan error yang meminta pengguna untuk memasukkan informasi dengan benar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Kolom | |
---|---|
name
|
Nama yang digunakan
Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Terima data formulir. |
label
|
Teks yang meminta pengguna untuk memasukkan tanggal, waktu, atau tanggal dan waktu. Misalnya, jika pengguna menjadwalkan janji temu, gunakan label seperti
|
type
|
Apakah widget mendukung memasukkan tanggal, waktu, atau tanggal dan waktu. |
valueMsEpoch
|
Nilai default yang ditampilkan di widget, dalam milidetik sejak Waktu epoch Unix.
Tentukan nilai berdasarkan jenis pemilih (
|
timezoneOffsetDate
|
Angka yang mewakili selisih zona waktu dari UTC, dalam menit. Jika disetel,
|
onChangeAction
|
Dipicu saat pengguna mengklik
Simpan
atau
Hapus
dari
|
validation
|
Opsional. Tentukan validasi yang diperlukan untuk pemilih datetime ini.
|
DateTimePickerType
Format untuk tanggal dan waktu dalam
DateTimePicker
. Menentukan apakah pengguna dapat memasukkan tanggal, waktu, atau tanggal dan waktu.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
DATE_AND_TIME
|
Pengguna memasukkan tanggal dan waktu. |
DATE_ONLY
|
Pengguna memasukkan tanggal. |
TIME_ONLY
|
Pengguna memasukkan waktu. |
Pembatas
Jenis ini tidak memiliki kolom.
Menampilkan pemisah antar-widget sebagai garis horizontal. Untuk contoh di aplikasi Google Chat, lihat Tambahkan pemisah horizontal antar-widget.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Misalnya, JSON berikut membuat pemisah:
"divider": {}
Petak
Menampilkan petak dengan kumpulan item. Item hanya boleh menyertakan teks atau gambar. Untuk kolom responsif, atau untuk menyertakan lebih dari sekadar teks atau gambar, gunakan
. Untuk contoh di aplikasi Google Chat, lihat
Menampilkan Petak dengan koleksi item.
Columns
{i>Grid<i} mendukung sejumlah kolom dan item. Jumlah baris ditentukan dengan item dibagi dengan kolom. Grid dengan 10 item dan 2 kolom memiliki 5 baris. Grid dengan 11 item dan 2 kolom memiliki 6 baris.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Misalnya, JSON berikut membuat petak 2 kolom dengan satu item:
"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"
}
}
}
Representasi JSON |
---|
{ "title": string, "items": [ { object ( |
Kolom | |
---|---|
title
|
Teks yang ditampilkan di header grid. |
items[]
|
Item yang akan ditampilkan dalam petak. |
borderStyle
|
Gaya batas yang akan diterapkan ke setiap item petak. |
columnCount
|
Jumlah kolom yang akan ditampilkan di petak. Nilai default digunakan jika kolom ini tidak ditentukan, dan nilai default tersebut berbeda-beda bergantung pada tempat petak ditampilkan (dialog versus pengiring). |
onClick
|
Callback ini digunakan kembali oleh setiap item petak, tetapi dengan ID dan indeks item dalam daftar item yang ditambahkan ke parameter callback. |
GridItem
Mewakili item dalam tata letak petak. Item dapat berisi teks, gambar, atau teks dan gambar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "id": string, "image": { object ( |
Kolom | |
---|---|
id
|
ID yang ditentukan pengguna untuk item petak ini. ID ini ditampilkan di petak induk
|
image
|
Gambar yang ditampilkan dalam item petak. |
title
|
Judul item petak. |
subtitle
|
Subtitel item petak. |
layout
|
Tata letak yang akan digunakan untuk item petak. |
ImageComponent
Menampilkan gambar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
Kolom | |
---|---|
imageUri
|
URL gambar. |
altText
|
Label aksesibilitas untuk gambar. |
cropStyle
|
Gaya pemangkasan yang akan diterapkan ke gambar. |
borderStyle
|
Gaya batas yang akan diterapkan pada gambar. |
ImageCropStyle
Mewakili gaya pemangkasan yang diterapkan pada gambar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Misalnya, berikut cara menerapkan rasio aspek 16:9:
cropStyle {
"type": "RECTANGLE_CUSTOM",
"aspectRatio": 16/9
}
Representasi JSON |
---|
{
"type": enum (
|
Kolom | |
---|---|
type
|
Jenis pemangkasan. |
aspectRatio
|
Rasio aspek yang akan digunakan jika jenis pemangkasan
Misalnya, berikut cara menerapkan rasio aspek 16:9:
|
ImageCropType
Mewakili gaya pemangkasan yang diterapkan pada gambar.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
IMAGE_CROP_TYPE_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
SQUARE
|
Nilai default. Menerapkan pemangkasan persegi. |
CIRCLE
|
Menerapkan pemangkasan lingkaran. |
RECTANGLE_CUSTOM
|
Menerapkan pemangkasan persegi panjang dengan rasio aspek kustom. Tetapkan rasio aspek kustom dengan
aspectRatio .
|
RECTANGLE_4_3
|
Menerapkan pangkas persegi panjang dengan rasio aspek 4:3. |
BorderStyle
Opsi gaya untuk batas kartu atau widget, termasuk jenis dan warna batas.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{ "type": enum ( |
Kolom | |
---|---|
type
|
Jenis batas. |
strokeColor
|
Warna yang akan digunakan ketika jenis
|
cornerRadius
|
Radius sudut untuk batas. |
BorderType
Mewakili jenis batas yang diterapkan ke widget.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
NO_BORDER
|
Nilai default. Tidak ada batas. |
STROKE
|
{i>Outline<i}. |
GridItemLayout
Menampilkan berbagai opsi tata letak yang tersedia untuk item petak.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
TEXT_BELOW
|
Judul dan subjudul ditampilkan di bawah gambar item petak. |
TEXT_ABOVE
|
Judul dan subjudul ditampilkan di atas gambar item petak. |
Kolom
Tujuan
Columns
menampilkan hingga 2 kolom dalam kartu atau dialog. Anda dapat menambahkan widget ke setiap kolom; widget muncul sesuai urutan yang ditentukan. Untuk contoh di aplikasi Google Chat, lihat
Menampilkan kartu dan dialog dalam kolom.
Ketinggian setiap kolom ditentukan oleh kolom yang lebih tinggi. Misalnya, jika kolom pertama lebih tinggi daripada kolom kedua, kedua kolom memiliki tinggi kolom pertama. Karena setiap kolom dapat berisi jumlah widget yang berbeda, Anda tidak dapat menentukan baris atau meratakan widget di antara kolom.
Kolom ditampilkan secara berdampingan. Anda dapat menyesuaikan lebar setiap kolom menggunakan
HorizontalSizeStyle
kolom tersebut. Jika lebar layar pengguna terlalu sempit, kolom kedua akan digabungkan di bawah yang pertama:
- Di web, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 480 piksel.
- Pada perangkat iOS, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 300 pt.
- Pada perangkat Android, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 320 dp.
Untuk menyertakan lebih dari 2 kolom, atau menggunakan baris, gunakan
.
Grid
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Representasi JSON |
---|
{
"columnItems": [
{
object (
|
Kolom | |
---|---|
columnItems[]
|
Array kolom. Anda dapat menyertakan hingga 2 kolom dalam kartu atau dialog. |
Kolom
Kolom.
Representasi JSON |
---|
{ "horizontalSizeStyle": enum ( |
Kolom | |
---|---|
horizontalSizeStyle
|
Menentukan cara kolom mengisi lebar kartu. |
horizontalAlignment
|
Menentukan apakah widget diratakan ke kiri, kanan, atau tengah kolom. |
verticalAlignment
|
Menentukan apakah widget diratakan dengan bagian atas, bawah, atau tengah kolom. |
widgets[]
|
Array widget yang disertakan dalam kolom. Widget muncul sesuai urutan yang ditentukan. |
HorizontalSizeStyle
Menentukan cara kolom mengisi lebar kartu. Lebar setiap kolom bergantung pada
HorizontalSizeStyle
dan lebar widget dalam kolom.
Enum | |
---|---|
HORIZONTAL_SIZE_STYLE_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
FILL_AVAILABLE_SPACE
|
Nilai default. Kolom mengisi ruang yang tersedia, hingga 70% dari lebar kartu. Jika kedua kolom
ditetapkan ke
FILL_AVAILABLE_SPACE , setiap kolom mengisi 50% ruang.
|
FILL_MINIMUM_SPACE
|
Kolom mengisi ruang seminimal mungkin dan tidak lebih dari 30% dari lebar kartu. |
HorizontalAlignment
Menentukan apakah widget diratakan ke kiri, kanan, atau tengah kolom.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Enum | |
---|---|
HORIZONTAL_ALIGNMENT_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
START
|
Nilai default. Meratakan widget ke posisi awal kolom. Untuk tata letak kiri-ke-kanan, ratakan ke kiri. Untuk tata letak kanan-ke-kiri, sejajarkan ke kanan. |
CENTER
|
Meratakan widget ke tengah kolom. |
END
|
Meratakan widget ke posisi akhir kolom. Untuk tata letak kiri-ke-kanan, sejajarkan widget ke kanan. Untuk tata letak kanan-ke-kiri, sejajarkan widget ke kiri. |
VerticalAlignment
Menentukan apakah widget diratakan dengan bagian atas, bawah, atau tengah kolom.
Enum | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
CENTER
|
Nilai default. Meratakan widget ke tengah kolom. |
TOP
|
Meratakan widget ke bagian atas kolom. |
BOTTOM
|
Meratakan widget ke bagian bawah kolom. |
Widget
Widget yang didukung yang dapat Anda sertakan dalam kolom.
Representasi JSON |
---|
{ // Union field |
Kolom | |
---|---|
Kolom union
|
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|
chipList
|
|
ChipList
Daftar chip ditata secara horizontal, yang dapat di-scroll secara horizontal atau digabungkan ke baris berikutnya.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ "layout": enum ( |
Kolom | |
---|---|
layout
|
Tata letak daftar chip yang ditentukan. |
chips[]
|
Array chip. |
Tata Letak
Tata letak daftar chip.
Enum | |
---|---|
LAYOUT_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
WRAPPED
|
Nilai default. Daftar chip digabungkan ke baris berikutnya jika ruang horizontal tidak cukup. |
HORIZONTAL_SCROLLABLE
|
Chip akan di-scroll secara horizontal jika tidak pas dengan ruang yang tersedia. |
Chip
Teks, ikon, atau teks dan chip ikon yang dapat diklik pengguna.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ "icon": { object ( |
Kolom | |
---|---|
icon
|
Gambar ikon. Jika keduanya
|
label
|
Teks yang ditampilkan di dalam chip. |
onClick
|
Opsional. Tindakan yang akan dilakukan saat pengguna mengklik chip, seperti membuka hyperlink atau menjalankan fungsi kustom. |
enabled
|
Apakah chip dalam status aktif dan merespons tindakan pengguna. Default-nya adalah
|
disabled
|
Apakah chip dalam status tidak aktif dan mengabaikan tindakan pengguna. Default-nya adalah
|
altText
|
Teks alternatif yang digunakan untuk aksesibilitas. Tetapkan teks deskriptif yang memungkinkan pengguna mengetahui fungsi chip tersebut. Misalnya, jika chip membuka hyperlink, tulis: "Membuka tab browser baru dan membuka dokumentasi developer Google Chat di https://developers.google.com/workspace/chat". |
CollapseControl
Merepresentasikan kontrol luaskan dan ciutkan.
Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk Add-on Google Workspace.
Representasi JSON |
---|
{ "horizontalAlignment": enum ( |
Kolom | |
---|---|
horizontalAlignment
|
Perataan horizontal tombol luaskan dan ciutkan. |
expandButton
|
Opsional. Tentukan tombol yang dapat disesuaikan untuk meluaskan bagian tersebut. Kolom ExpandButton dan ciutkanButton harus ditetapkan. Hanya satu kumpulan kolom yang tidak akan diterapkan. Jika kolom ini tidak disetel, tombol default akan digunakan. |
collapseButton
|
Opsional. Tentukan tombol yang dapat disesuaikan untuk menciutkan bagian. Kolom ExpandButton dan ciutkanButton harus ditetapkan. Hanya satu kumpulan kolom yang tidak akan diterapkan. Jika kolom ini tidak disetel, tombol default akan digunakan. |
DividerStyle
Gaya pembagi kartu. Saat ini hanya digunakan untuk pemisah antarbagian kartu.
Tersedia untuk aplikasi Google Chat dan Add-on Google Workspace.
Enum | |
---|---|
DIVIDER_STYLE_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
SOLID_DIVIDER
|
Opsi default. Tampilkan pemisah yang solid di antara bagian. |
NO_DIVIDER
|
Jika ditetapkan, tidak ada pemisah yang akan dirender di antara bagian. |
CardAction
Tindakan kartu adalah tindakan yang terkait dengan kartu. Misalnya, kartu invoice dapat berisi tindakan seperti menghapus invoice, mengirim invoice melalui email, atau membuka invoice di browser.
Tersedia untuk Add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
Representasi JSON |
---|
{
"actionLabel": string,
"onClick": {
object (
|
Kolom | |
---|---|
actionLabel
|
Label yang ditampilkan sebagai item menu tindakan. |
onClick
|
Tujuan
|
DisplayStyle
Di Add-on Google Workspace, menentukan cara kartu ditampilkan.
Tersedia untuk Add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
Enum | |
---|---|
DISPLAY_STYLE_UNSPECIFIED
|
Jangan gunakan. Tidak ditentukan. |
PEEK
|
Header kartu muncul di bagian bawah sidebar, yang sebagian menutupi kartu atas tumpukan saat ini. Mengklik header akan memunculkan kartu ke dalam tumpukan kartu. Jika kartu tidak memiliki header, header yang dihasilkan akan digunakan. |
REPLACE
|
Nilai default. Kartu ditampilkan dengan mengganti tampilan kartu teratas di tumpukan kartu. |