Skip to main content

​
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:

​
3.1.3 Templat preset

Tersedia tujuh Templat kartu. Aktifkan Templat untuk membangun kartu dengan cepat.

​
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.
1

Langkah 1

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.
2

Langkah 2

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”.
1

Definisikan variabel Standar kondisional di perancang kartu, seperti 'Habis terjual', dengan jenis variabel diatur ke 'boolean', dan konfigurasikan data tiruan.

2

Langkah 2

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.
3

Konfigurasikan node Kartu di integrasi & otomatisasi dan petakan data Konteks alur kerja ke variabel Sumber data kartu.

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”.