Teks yang dihias

Widget DecoratedText menampilkan teks dengan tata letak opsional dan fitur fungsi. Contoh:

  • Tampilkan icon di depan teks dengan startIcon.
  • Tampilkan judul sebelum teks dengan topLabel.
  • Tambahkan tombol yang dapat diklik dengan button atau tombol yang dapat diganti dengan switchControl.


Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Gunakan widget DecoratedText saat Anda perlu menyajikan informasi dengan cara yang mudah dipahami dan interaktif. Widget ini sangat cocok untuk kartu kontak, pembaruan status pesanan, dan notifikasi tiket kerja.

Berikut adalah kartu yang terdiri dari widget DecoratedText yang digunakan untuk menampilkan detail kontak, seperti alamat email, status online, nomor telepon, dan situs:

Memformat teks di widget DecoratedText

Widget DecoratedText mendukung format HTML teks sederhana. Saat menyetel konten teks dari widget ini, cukup sertakan tag HTML yang sesuai. Untuk informasi selengkapnya tentang tag HTML yang didukung, lihat Pemformatan teks kartu.

Kolom dan representasi JSON

Representasi 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.
}
Kolom
icon
(deprecated)

object (Icon)

Tidak digunakan lagi dan digantikan dengan startIcon.

startIcon

object (Icon)

Ikon yang ditampilkan di depan teks.

topLabel

string

Teks yang muncul di atas text. Selalu potong.

text

string

Wajib diisi. Teks utama.

Mendukung pemformatan sederhana. Untuk mengetahui informasi selengkapnya tentang cara memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace.

wrapText

boolean

Setelan kemas teks. Jika true, teks akan digabungkan dan ditampilkan di beberapa baris. Jika tidak, teks akan terpotong.

Hanya berlaku untuk text, bukan topLabel dan bottomLabel.

bottomLabel

string

Teks yang muncul di bawah text. Selalu gabungkan.

onClick

object (OnClick)

Tindakan ini dipicu saat pengguna mengklik topLabel atau bottomLabel.

Kolom gabungan control. Tombol, tombol akses, kotak centang, atau gambar yang muncul di sisi kanan teks pada widget decoratedText. control hanya dapat berupa salah satu dari yang berikut:
button

object (Button)

Tombol yang dapat diklik pengguna untuk memicu tindakan.

switchControl

object (SwitchControl)

Widget tombol akses yang dapat diklik pengguna untuk mengubah statusnya dan memicu tindakan.

endIcon

object (Icon)

Ikon yang ditampilkan setelah teks.

Mendukung ikon bawaan dan kustom.

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.

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.

Tindakan

Tindakan yang menjelaskan perilaku saat formulir dikirimkan. Misalnya, Anda dapat memanggil skrip Apps Script untuk menangani formulir. Jika tindakan ini dipicu, nilai formulir akan dikirim ke server.

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

Representasi JSON
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Kolom
function

string

Fungsi kustom yang akan dipanggil saat elemen penampung diklik atau diaktifkan secara berlawanan.

Untuk contoh penggunaan, lihat Membuat kartu interaktif.

parameters[]

object (ActionParameter)

Daftar parameter tindakan.

loadIndicator

enum (LoadIndicator)

Menentukan indikator pemuatan yang ditampilkan tindakan saat melakukan pesan ajakan (CTA).

persistValues

boolean

Menunjukkan apakah nilai formulir tetap ada setelah tindakan. Nilai defaultnya adalah false.

Jika true, nilai formulir akan tetap ada setelah tindakan dipicu. Untuk mengizinkan pengguna membuat perubahan saat tindakan sedang diproses, tetapkan LoadIndicator ke NONE. Untuk pesan kartu di aplikasi Chat, Anda juga harus menetapkan tindakan ResponseType ke UPDATE_MESSAGE dan menggunakan cardId yang sama dari kartu yang berisi tindakan.

Jika false, nilai formulir akan dihapus saat tindakan dipicu. Untuk mencegah pengguna membuat perubahan saat tindakan sedang diproses, tetapkan LoadIndicator ke SPINNER.

interaction

enum (Interaction)

Opsional. Diperlukan saat membuka dialog.

Apa yang harus dilakukan sebagai respons atas 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 menentukan interaction, aplikasi dapat merespons dengan cara interaktif khusus. Misalnya, dengan menetapkan interaction ke 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.

Aplikasi Google Chat:

Tombol

Teks, ikon, atau tombol teks dan ikon yang dapat diklik pengguna. Untuk contoh di aplikasi Google Chat, lihat Daftar tombol.

Untuk membuat gambar menjadi tombol yang dapat diklik, tentukan Image (bukan ImageComponent) dan tetapkan tindakan onClick.

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

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 diisi. 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".

SwitchControl

Tombol gaya tombol beralih atau kotak centang di dalam widget decoratedText.

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

Hanya didukung di widget decoratedText.

Representasi JSON
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Kolom
name

string

Nama yang digunakan widget tombol untuk diidentifikasi dalam peristiwa input formulir.

Untuk mengetahui detail mengenai penggunaan input formulir, lihat Menerima data formulir.

value

string

Nilai yang dimasukkan oleh pengguna, ditampilkan sebagai bagian dari peristiwa input formulir.

Untuk mengetahui detail mengenai penggunaan input formulir, lihat Menerima data formulir.

selected

boolean

Saat true, tombol dipilih.

onChangeAction

object (Action)

Tindakan yang harus dilakukan saat status tombol berubah, seperti fungsi yang akan dijalankan.

controlType

enum (ControlType)

Cara tombol muncul di antarmuka pengguna.

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

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.