> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Desain Cool Card
> Artikel ini memperkenalkan tiga jenis kartu YiDA — kartu Notifikasi pesan, kartu interaktif, dan kartu obrolan yang disematkan — serta menjelaskan cara membuat masing-masing kartu. Artikel ini juga menjelaskan cara menggunakan perancang kartu, termasuk pohon kerangka, pustaka komponen blok, templat preset, dan modul Sumber data di bilah alat kiri.
## 1. Gambaran umum kartu
* Sebagai format presentasi utama YiDA Cool App, kartu dirancang untuk memberikan jalur pemrosesan bisnis yang lebih singkat melalui jejak yang ringan dan konfigurasi minimal, sehingga pengguna dapat fokus pada pekerjaan mereka.
* Kartu YiDA terbagi menjadi tiga jenis: kartu Notifikasi pesan, kartu yang disematkan, dan kartu interaktif. Jalur pembuatan untuk setiap jenis dijelaskan di bawah ini.
### 1.1 Buat kartu Notifikasi pesan
Kartu Notifikasi pesan meliputi:
* Notifikasi pesan Formulir: Buka Desain Formulir >> Pengaturan Halaman >> Notifikasi pesan untuk membuat Notifikasi pesan Formulir. Sistem secara otomatis mengirim pesan ke pengguna atau Obrolan tertentu ketika Formulir dibuat, diedit, dikomentari, atau dihapus. Untuk detailnya, lihat Notifikasi pesan Formulir.
* Kartu persetujuan cepat alur kerja: Saat mengirimkan alur kerja, pilih opsi untuk memberi tahu penyetuju guna mengaktifkan pengingat persetujuan alur kerja.
### 1.2 Buat kartu interaktif
Konfigurasikan node Kartu di Integrasi & Otomatisasi. Ketika Formulir memenuhi Kondisi Pemicu, data Formulir dikirim ke Obrolan Grup yang ditentukan sebagai kartu interaktif.
#### 1.2.1 Prosedur
**Jalur**: Halaman Admin >> Integrasi & Otomatisasi >> Buat Integrasi & Otomatisasi >> Node "Kirim Kartu" >> Pilih jenis kartu interaktif
### 1.3 Buat kartu obrolan yang disematkan
Konfigurasikan node Kartu di Integrasi & Otomatisasi. Ketika Formulir memenuhi Kondisi Pemicu, data Formulir dikirim ke Obrolan Grup yang ditentukan sebagai kartu obrolan yang disematkan.
#### 1.3.1 Prosedur
**Jalur**: Halaman Admin >> Integrasi & Otomatisasi >> Buat Integrasi & Otomatisasi >> Node "Kirim Kartu" >> Pilih jenis kartu obrolan yang disematkan
## 2. Kasus penggunaan
Di halaman desain kartu, seret dan lepas Komponen untuk menyesuaikan kartu, atau modifikasi Templat kartu YiDA agar lebih sesuai dengan kebutuhan bisnis Anda.
## 3. Gambaran umum perancang kartu
Gambaran umum perancang kartu
### 3.1 Bilah alat kiri
Bilah alat kiri berisi pohon kerangka, pustaka Komponen blok, Templat preset, dan Sumber data.
#### 3.1.1 Pohon kerangka
Menampilkan struktur dan susunan Komponen pada kartu dalam Tampilan pohon.
* Seret Komponen di kerangka untuk mengubah posisinya pada kartu.
* Klik tombol tampilkan/sembunyikan di sebelah kanan Nama Komponen untuk menampilkan atau menyembunyikan Komponen terkait di kanvas.
Perancang kartu — pohon kerangka
#### 3.1.2 Pustaka Komponen blok
Pustaka Komponen kartu menyediakan 17 Komponen. Seret dan lepas Komponen ke kanvas kartu. Menggunakan Komponen yang tepat memudahkan pembuatan kartu yang rapi.
**Komponen dijelaskan di bawah ini:**
| **Nama komponen** | **Deskripsi** |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Header kartu** | Ditempatkan di bagian atas kartu untuk mengatur Judul kartu. |
| **Beberapa Gambar** | Untuk skenario yang memerlukan beberapa Gambar pada kartu. |
| **Carousel** | Menambahkan carousel Gambar ke kartu. |
| **Video** | Menambahkan Video ke kartu. |
| **Teks** | Menambahkan Konten Teks ke kartu. |
| **Teks Kaya** | Menampilkan tata letak Teks dan Gambar yang kompleks. |
| **Gambar** | Menampilkan satu Gambar pada kartu. |
| **Pembatas** | Menambahkan Pembatas di dalam Konten kartu. |
| **Tautan** | Menambahkan URL Tautan ke kartu. |
| **Teks dua kolom** | Menambahkan Teks dalam tata letak dua kolom. Konten atau variabel yang terikat dapat diatur untuk setiap kolom secara terpisah. |
| **Metrik** | Menampilkan data utama. Ikat variabel untuk nama metrik dan nilai metrik ke data yang mendasarinya. |
| **Daftar pengguna** | Menampilkan pengguna yang terikat pada tugas tertentu sebagai array objek. Cocok untuk skenario seperti undian acak, pemesanan makanan, atau penugasan tugas di mana pengguna terkait dengan item. |
| **Tombol** | Menambahkan Tombol ke kartu. Tulis penangan Peristiwa klik untuk mendukung berbagai kebutuhan bisnis. |
#### 3.1.3 Templat preset
Tersedia tujuh Templat kartu. Aktifkan Templat untuk membangun kartu dengan cepat.
| **Templat kartu interaktif** | Templat tiket tertunda | Templat penyelesaian tiket | Templat pemesanan makanan | Templat undian acak |
| --------------------------------- | -------------------------- | --------------------------------- | --------------------------------- | ------------------- |
| **Templat kartu yang disematkan** | Templat sematan info tiket | Templat sematan pemesanan makanan | Templat sematan hasil undian acak | -- |
#### 3.1.4 Sumber data
Menyediakan variabel preset yang dapat diikat ke Komponen untuk mengaktifkan data Komponen dinamis. Panel Sumber data kartu berisi daftar variabel dan data tiruan.
##### Daftar variabel
Menampilkan variabel preset. Klik variabel untuk melihat deskripsi, jenis, apakah bersifat privat, dan informasi terkait lainnya.
* Edit variabel (edit variabel Standar): Edit nama, jenis, dan deskripsi variabel yang ada. Klik Tambah variabel untuk membuat variabel baru.
##### Data tiruan
Sumber data kartu mengadopsi konsep front-end berupa data tiruan, sehingga perancang dapat menyimulasikan data dengan kode JSON pada tahap desain. Ini memungkinkan Anda melakukan Pratinjau efek kartu dan melakukan penyesuaian tanpa memuat data nyata.
### 3.2 Opsi Pratinjau di bagian atas
**Mode Pratinjau**: Mengontrol apakah Pratinjau diaktifkan.
* Aktif: Hanya melihat efek kartu secara keseluruhan. Properti Komponen tidak dapat diubah.
* Nonaktif: Klik untuk memilih Komponen dan mendesain propertinya di panel properti kanan.
**Opsi simulasi:**
* Lingkungan simulasi: Pilih DingTalk Desktop, Android, atau iOS untuk melihat bagaimana kartu dirender di lingkungan yang berbeda.
* Versi simulasi: Ubah Versi DingTalk untuk melakukan Pratinjau kartu di berbagai Versi DingTalk dan lebih menyesuaikan dengan kebiasaan kerja Organisasi Anda.
* Bahasa simulasi: Atur Bahasa untuk Konten kartu dalam mode Pratinjau. Tujuh Bahasa didukung: Tionghoa Sederhana, Tionghoa Tradisional, Inggris, Jepang, Vietnam, Thailand, dan Indonesia.
**Mode Gelap/Terang**: Sesuai dengan mode Gelap di Pengaturan Tampilan DingTalk. Anda dapat melihat dan memodifikasi gaya kartu selama tahap desain.
### 3.3 Panel properti kanan
Atur properti untuk kartu atau Komponen kartu, termasuk gaya dan logika eksekusi, agar sesuai dengan kebutuhan Anda.
Definisi properti kartu
## 4. FAQ
**Q1: Di mana saya dapat dengan cepat membuat dan mengirim/memperbarui kartu?**
A: Tambahkan node Kirim/Perbarui Kartu di integrasi & otomatisasi atau di perancang alur kerja sederhana yang baru. Pilih Templat kartu resmi atau kartu interaktif/kartu obrolan yang disematkan kustom untuk desain kartu Anda.
**Q2: Saya mengonfigurasi node Kirim/Perbarui Kartu di integrasi & otomatisasi. Log menunjukkan kartu berhasil dikirim, tetapi saya tidak menerimanya.**
**A: Ada tiga penyebab umum kegagalan pengiriman kartu:**
**1. Cool App belum dipublikasikan ke pusat aplikasi kustom Organisasi. Publikasikan aplikasi ke pusat aplikasi kustom terlebih dahulu.**
**2. Cool App belum diaktifkan di Tindakan Cepat Obrolan ("Lainnya > Marketplace Cool App") pada Grup Internal atau Obrolan Departemen. Aktifkan Cool App kustom terlebih dahulu.**
**3. Formulir tidak diinisiasi dari dalam Obrolan (tidak ada Konteks Obrolan). Misalnya, "Pemicu Berbasis Waktu + Kirim kartu ke Obrolan saat ini" tidak didukung dalam kasus ini. Dengan "Pemicu Berbasis Waktu + Kirim kartu ke Obrolan tertentu", menginisiasi Formulir dari dalam Obrolan yang ditentukan memberikan Konteks Formulir dan kartu dapat dikirim dengan sukses.**
**Q3: Setelah mendesain ulang kartu di perancang kartu kustom, kartu yang dikirim melalui DingTalk tidak mencerminkan perubahan tersebut.**
Setelah kartu diperbarui, Anda harus memicu ulang pengiriman atau pembaruan untuk mengirim atau memperbarui kartu yang baru. Karena caching dalam aplikasi, gaya kartu mungkin tidak diperbarui setelah pemicu baru. Jika ini terjadi, buka **Pengaturan** > **Penyimpanan** > **Data cache** > **Bersihkan**, lalu pilih **Kartu pesan, Cache web** untuk menghapus cache.
**Q4: Bagaimana cara @Sebut pengguna dalam kartu?**
**A: Tambahkan variabel pengguna saat mendesain kartu, dan petakan data pengguna di node Kartu di integrasi & otomatisasi.**
Di Perancang kartu > Sumber data, tambahkan variabel Standar dengan jenis variabel diatur ke "Info pengguna", dan definisikan data tiruan jika diperlukan. Seret Komponen Teks Kaya dan @Sebut variabel bernama tersebut di panel setter Komponen.
Tambahkan node Kirim/Perbarui Kartu di integrasi & otomatisasi atau di perancang alur kerja sederhana yang baru. Dalam konfigurasi Konten kartu, ikat Sumber data kartu dan petakan Bidang pengguna ke variabel "Info pengguna" untuk mengaktifkan efek @Sebut.
**Q5: Bagaimana cara menampilkan Metrik, bilah progres, dan indikator data lainnya pada kartu, mirip dengan Cool Dasbor?**
1. Untuk alur konfigurasi lengkap, lihat Catatan Rilis 2022.08.16 — YiDA Cool Dasbor (Layanan Data + Kartu Data Cool).
2. Perenderan Komponen Bagan laporan pada kartu saat ini tidak didukung.
3. Bergantung pada skenario bisnis dan jumlah Metrik yang ditampilkan, pendekatan desain yang berbeda direkomendasikan.
**Q6: Data Metrik pada kartu ditampilkan sebagai desimal secara default. Bagaimana cara menampilkannya sebagai persentase?**
Buka Data Factory > Layanan Data > Buat Bidang Formula, dan gunakan Formula untuk mengonversi ke persentase. Lihat konfigurasi di bawah ini sebagai referensi. Untuk detail lengkap, lihat Catatan Rilis 2022.08.16 — YiDA Cool Dasbor (Layanan Data + Kartu Data Cool).
**Q7: Bagaimana cara menampilkan atau menyembunyikan elemen seperti Tombol pada kartu secara kondisional?**
Ambil skenario "pemesanan makanan grup" sebagai contoh. Ketika makanan habis terjual, tampilkan Tombol "Habis terjual" dan sembunyikan Tombol "Pesan".
Seret semua Tombol yang perlu ditampilkan atau disembunyikan ke perancang kanvas. Di panel setter Tombol, konfigurasikan properti "Tampilkan". Definisikan Kondisi dan ikatkan ke variabel yang didefinisikan di langkah 1. Ketika nilai boolean bernilai true, Komponen ditampilkan; jika tidak, disembunyikan.
**Q8: Dapatkah saya menempatkan beberapa halaman dari sebuah aplikasi di Tindakan Cepat Obrolan sebagai beberapa Entri?**
Ya. **Satu Cool App sekarang dapat menempatkan beberapa Entri cepat di Tindakan Cepat Obrolan.** Tampilan yang diperluas didukung; Tampilan yang diciutkan tidak didukung.
**Q9: Ketika halaman kustom dialihkan ke halaman Formulir, bagaimana cara meneruskan parameter ID Obrolan saat ini?**
**Secara default, sebuah Cool App hanya meneruskan "ID Obrolan (conversationId)" ke halaman pertama yang dibuka dari Tindakan Cepat Obrolan. Untuk meneruskan parameter lebih lanjut, sertakan di URL.**
Misalkan Entri Tindakan Cepat Obrolan dikonfigurasi dengan **halaman kustom**, dan **mengklik Tombol atau Tautan pada halaman kustom mengalihkan ke halaman Formulir**. Dalam kasus ini, halaman Formulir harus memperoleh ID Obrolan agar kartu dapat dikirim ke Obrolan yang sesuai setelah pengiriman.
!!!**Catatan: Kasus ini tidak berlaku untuk halaman kustom yang mengalihkan ke halaman manajemen data.**
**Cara melakukannya:**
Pada halaman kustom, gunakan blok Tautan untuk mengalihkan ke halaman Formulir. Jika blok Tautan dikonfigurasi dengan "halaman internal", parameter "ID Obrolan" diteruskan secara otomatis.
Jika blok Tautan dikonfigurasi dengan "Tautan eksternal", teruskan parameter "ID Obrolan" secara manual.
Kode:
`(this.state.urlParams || {}).conversationId`
Tambahkan Komponen **Teks satu baris** ke Formulir. Atur **Judul** ke **"ID Obrolan"**, atur **Status** ke **Tersembunyi**, dan atur **Pengiriman data** ke **Selalu kirim**.
!!!**PENTING: Ikat Default ke variabel yang membaca parameter dari URL untuk mengisi "ID Obrolan".**
Kode:
`decodeURIComponent((this.state.urlParams || {}).conversationId)`
Terakhir, saat mengirim ke Obrolan, Anda dapat memilih "Obrolan saat ini" atau Obrolan yang diidentifikasi oleh "ID Obrolan".