> ## 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.
# Kustomisasi formulir
> Pelajari cara membuat komponen kustom di YiDA untuk kebutuhan bisnis low-code — mulai dari pembuatan, debug, instalasi, hingga penggunaan komponen dengan panduan lengkap langkah demi langkah.
| **Fitur** | **Edisi Gratis** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| --------------- | ---------------- | --------------- | ---------------------- | ------------------- |
| Komponen kustom | Tidak didukung | Tidak didukung | Didukung | Didukung |
## 1. Gambaran umum fitur
### 1.1 Tentang komponen kustom
Fitur komponen kustom memungkinkan pelanggan membangun komponen mereka sendiri. Fitur ini meningkatkan kesesuaian antara komponen dan kebutuhan bisnis, menekan biaya pengembangan serta pemeliharaan, dan meningkatkan reusabilitas komponen.
### 1.2 Skenario penggunaan
Ketika komponen standar YiDA tidak dapat memenuhi kebutuhan bisnis aplikasi Anda, buat komponen yang disesuaikan dengan skenario bisnis Anda berdasarkan praktik atau persyaratan spesifik industri. Komponen kustom juga dapat dibagikan di seluruh Organisasi yang sama, sehingga mudah digunakan kembali saat Anda membangun aplikasi serupa di kemudian hari.
### 1.3 Struktur komponen
Sebuah Komponen terdiri dari tampilan (view) dan Atribut. Di sisi konsumen, Anda dapat mengubah Atribut komponen untuk merender tampilan yang berbeda.
Tampilan dibagi lebih lanjut menjadi tampilan desain dan tampilan runtime. Dalam banyak kasus, keduanya dapat digunakan kembali.
Di sisi produsen, Anda membangun tampilan dan Atribut komponen secara terpisah.
## 2. Panduan langkah demi langkah
Ikuti contoh singkat yang **mengimplementasikan fitur salin teks** menggunakan komponen kustom untuk merasakan alur lengkap: membangun, melakukan debug, menginstal, dan menggunakan komponen kustom.
### 2.1 Skenario
Gunakan fitur komponen kustom untuk meningkatkan komponen Teks YiDA yang sudah ada dengan low-code, lalu implementasikan fitur salin teks. Fitur ini memungkinkan pengguna menyalin konten teks ke clipboard, sangat berguna ketika mereka perlu menggunakan kembali nilai field yang sama.
### 2.2 Hasil akhir
Gambar 2.2-1 Demo salin teks
### 2.3 Langkah-langkah
#### 2.3.1 Langkah 1: Buat komponen kustom
Dengan mengonfigurasi nama, tipe, identifier, dan Atribut lain dari komponen, Anda dapat membangun komponen yang sesuai dengan kebutuhan bisnis Anda dengan biaya rendah.
**Langkah-langkah:**
1. Aplikasi YiDA > Pengaturan aplikasi > Manajemen komponen > Pusat komponen (lihat Gambar 2.3-1).
Gambar 2.3-1 Masuk ke pusat komponen
2. Tambah komponen > Isi Nama komponen, tipe komponen, identifier komponen, dan Atribut lainnya > Konfirmasi (lihat Gambar 2.3-2).
Gambar 2.3-2 Buat komponen counter kustom
1. Komponen biasa umumnya digunakan untuk fitur tampilan saja dan tidak dapat menyimpan data. Komponen ini tidak mendukung pengiriman data. Saat mendesain komponen, konfirmasikan skenario bisnis yang sebenarnya. Jika komponen menyertakan elemen seperti kotak input teks, data apa pun yang dikirim oleh pengguna tidak akan disimpan.
#### 2.3.2 Langkah 2: Kembangkan dan debug komponen kustom
Kembangkan dan lakukan debug komponen untuk memenuhi kebutuhan bisnis yang berbeda. Dalam contoh ini, Anda akan mengimplementasikan fitur counter.
**Langkah-langkah:**
1. Pusat komponen > Komponen saya > Temukan komponen yang akan di-debug > Kembangkan (lihat Gambar 2.3-3).
Gambar 2.3-3 Titik masuk untuk mengembangkan dan melakukan debug komponen kustom
Seperti disebutkan sebelumnya, komponen dibangun dari tampilan dan Atribut. Saat mengembangkan komponen, mulailah dengan mengabstraksikan Atribut yang dibutuhkan. Awali dari Atribut: komponen ini hanya memerlukan satu Atribut untuk konten teks. Buka Konfigurasi atribut > Definisi atribut, tambahkan Atribut konten teks bernama `content`, atur tipe Atribut ke teks, lalu pilih `textSetter` sebagai setter.
Setelah Atribut didefinisikan, bangun tampilan komponen. Tambahkan komponen standar YiDA yang diperlukan ke kanvas (contoh ini menggunakan dua komponen Teks, bernama "Teks" dan "Salin"), lalu konfigurasikan Atribut dasarnya. Ikat Konten komponen Teks ke sebuah variabel — yaitu Atribut `props.content` yang baru saja Anda definisikan — sehingga nilai yang diteruskan akan ditampilkan saat runtime (lihat Gambar 2.3-4).
Gambar 2.3-4 Tata letak komponen kustom
4. Konfigurasikan Tindakan pada komponen Tombol untuk mengimplementasikan perilaku salin teks. Pilih teks "Salin" > Buat Tindakan > `onCopyText` saat klik (lihat Gambar 2.3-5).
Gambar 2.3-5 Konfigurasikan Tindakan tombol
5. Tulis logika salin di panel JS (lihat Gambar 2.3-6).
Gambar 2.3-6 Kode untuk Tindakan tombol "Salin"
```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onCopyText() {
const input = document.createElement('input');
input.setAttribute('readonly', 'readonly');
// Akses atribut melalui this.props.xxx
input.setAttribute('value', this.props.content);
document.body.appendChild(input);
input.select();
input.setSelectionRange(0, 9999);
document.execCommand('copy');
document.body.removeChild(input);
this.utils.toast('Disalin ke clipboard');
}
```
Gambar 2.3-7 Isi informasi rilis
8. Notifikasi konfirmasi muncul saat komponen dipublikasikan (lihat Gambar 2.3-8). Dalam pengembangan nyata, setelah menyimpan komponen, Anda dapat menginstal Versi pengembangan (0.1.0) untuk debug langsung. Publikasikan Versi resmi hanya setelah pengembangan selesai.
Gambar 2.3-8 Notifikasi publikasi Berhasil
#### 2.3.3 Langkah 3: Instal komponen kustom
Instal komponen kustom yang telah dikembangkan dan di-debug ke dalam halaman agar dapat digunakan saat mendesain halaman. Selama [instalasi komponen](/id/yida/form/sg47d6), Anda harus memilih tipe halaman. Komponen kustom hanya muncul di desainer halaman untuk tipe halaman yang Anda pilih.
**Langkah-langkah:**
1. Halaman desain formulir > Pustaka komponen > Komponen kustom > Manajemen komponen (lihat Gambar 2.3-9).
Gambar 2.3-9 Titik masuk untuk menginstal komponen kustom
2. Halaman manajemen komponen > Daftar komponen > Pilih komponen kustom yang akan diinstal > Instal (lihat Gambar 2.3-10).
Gambar 2.3-10 Pilih komponen yang akan diinstal
3. Pilih Versi instalasi dan Cakupan instalasi > Instal (lihat Gambar 2.3-11).
Gambar 2.3-11 Instal komponen
1. Untuk memastikan stabilitas komponen kustom di Produksi, selalu instal rilis resmi 1.x.x saat memilih Versi.
2. Untuk memastikan komponen kustom tersedia di desainer halaman, pilih tipe halaman yang sesuai dalam Cakupan instalasi. Komponen hanya muncul di desainer halaman untuk tipe halaman yang Anda pilih.
3. Setelah instalasi pertama, Versi komponen mendukung "Perbarui".
#### 2.3.4 Langkah 4: Gunakan komponen kustom
Setelah langkah-langkah di atas, komponen kustom muncul di bawah Komponen kustom dalam pustaka komponen halaman. Gunakan sebagai berikut.
**Langkah-langkah:**
1. Halaman desain formulir > Pustaka komponen > Komponen kustom > Pilih komponen yang diinginkan > Seret ke kanvas (lihat Gambar 2.3-12).
Gambar 2.3-12 Gunakan komponen kustom
#### 2.3.5 Langkah 5: Lihat atau edit informasi komponen
Saat menggunakan komponen, jika Anda perlu memperbarui thumbnail, URL dokumen bantuan, atau deskripsinya, ikuti langkah-langkah berikut.
**Langkah-langkah**
1. Pengaturan aplikasi > Manajemen komponen > Pusat komponen (lihat Gambar 2.3-13).
Gambar 2.3-13 Masuk ke pusat komponen
2. Pilih komponen yang akan dilihat atau diedit > Detail (lihat Gambar 2.3-14).
Gambar 2.3-14 Lihat detail komponen
Halaman detail komponen berisi tiga bagian: **Informasi dasar**, **Informasi rilis**, dan **Admin** (lihat Gambar 2.3-15).
1. Informasi dasar: Klik "Edit" untuk memperbarui thumbnail, URL dokumen bantuan, dan deskripsi komponen kustom. Field lain diatur saat komponen dibuat dan tidak dapat diubah.
2. Informasi rilis: Lihat Riwayat iterasi komponen, termasuk Versi dan Catatan Rilisnya.
3. Admin (memiliki Izin untuk mengembangkan dan melakukan debug komponen kustom; secara Default adalah Pembuat komponen): Tambahkan atau hapus admin untuk Kelola izin.
4. Informasi instalasi: Lihat Riwayat instalasi komponen, termasuk aplikasi yang diinstal, Versi, Cakupan, penginstal, dan Waktu instalasi.
Gambar 2.3-15 Halaman detail komponen
## 3. Atribut komponen kustom
Selain meningkatkan komponen YiDA yang sudah ada, fitur komponen kustom memungkinkan Anda menyesuaikan Atribut (`propTypes`) dari komponen yang dibangun. Hal ini membuat komponen kustom lebih sesuai dengan skenario dan kebiasaan harian pengembang, sekaligus memberikan fleksibilitas dan kustomisasi yang lebih besar.
### 3.1 Titik masuk untuk mengonfigurasi Atribut komponen kustom
**Path**: Desainer komponen low-code > Pilih "komponen bisnis low-code" pada kanvas > Atribut di sebelah kanan (lihat Gambar 3.1-1).
Gambar 3.1-1 Titik masuk untuk mengonfigurasi Atribut komponen kustom
### 3.2 Konfigurasi Atribut komponen kustom
Atribut komponen kustom diatur dalam empat bagian: **Desain dua sisi**, **Definisi atribut (**`propTypes`**)**, **Siklus hidup**, dan **Identifier unik**.
* Desain dua sisi: Sebuah toggle. Saat diaktifkan, desain PC dan seluler dipisahkan sepenuhnya sehingga Anda dapat mendesain masing-masing sisi secara independen untuk memenuhi persyaratan yang berbeda di kedua sisi.
* Definisi atribut (`propTypes`): Sesuaikan Atribut dasar komponen kustom, seperti Judul, Nama, Tipe (Format data), dan Default. Anda juga dapat mengikat Acara untuk Apakah tersembunyi (status visibilitas) dan Saat berubah (perubahan nilai) demi memenuhi berbagai kebutuhan bisnis. Untuk detailnya, lihat [Konfigurasi atribut komponen](/id/yida/form/zyrrlb).
* Siklus hidup: Komponen kustom memiliki empat Hooks siklus hidup — komponen ter-mount (`componentDidMount`), komponen diperbarui (`componentDidUpdate`), komponen menangkap Kesalahan (`componentDidCatch`), dan sebelum komponen di-unmount (`componentWillUnmount`). Tulis logika di hook yang sesuai untuk memenuhi kebutuhan bisnis yang kompleks.
* Identifier unik: Seperti komponen standar YiDA, komponen kustom memiliki Atribut identifier unik yang berfungsi sebagai ID komponen. Identifier ini dibuat secara otomatis dan umumnya tidak perlu diubah. YiDA menggunakannya untuk menyimpan data di backend, mengikat kode, dan sebagainya.
**Penting:**
* Identifier unik komponen (`fieldId`) adalah ID yang digunakan YiDA untuk mereferensikan komponen. Mengubahnya dapat memengaruhi formula, penyimpanan data (data bahkan bisa hilang), dan referensi Fungsi JS yang menggunakan komponen tersebut. Kami sangat menyarankan untuk tidak mengubah identifier unik.
* Jika Anda tetap ingin mengubahnya (saat ini hanya dimungkinkan melalui impor schema), Anda mengakui memahami konsekuensinya dan menerima tanggung jawab sepenuhnya atas hal itu. YiDA tidak bertanggung jawab atas hasilnya. Terima kasih atas pengertian Anda.
* Alias komponen bekerja sama dengan identifier unik (`fieldId`). Karena `fieldId` dihasilkan sistem dan sulit diingat, gunakan Alias untuk membuat Nama field lebih mudah digunakan dalam kode dan panggilan OpenAPI.
## 4. Lampiran
### 4.1 Tipe komponen
Komponen kustom YiDA hadir dalam tiga tipe: **Komponen biasa**, **komponen formulir**, dan **Komponen portal**. Perbedaan utamanya adalah:
1. Komponen biasa umumnya digunakan untuk fitur tampilan saja dan tidak dapat menyimpan data. Komponen ini mirip dengan komponen "Teks Kaya" dan "Grup" yang sudah ada.
2. Komponen formulir dapat mengirim data. Komponen ini lebih kompleks untuk dikembangkan dibandingkan komponen biasa dan memerlukan konfigurasi metadata tambahan.
3. Komponen portal juga digunakan untuk fitur tampilan saja dan tidak dapat menyimpan data. Komponen ini dirancang untuk digunakan pada halaman portal.
### 4.2 Tipe instalasi komponen
[Tipe halaman](/id/yida/intro/poq66i) YiDA mencakup halaman formulir biasa, halaman formulir alur kerja, halaman laporan, dasbor DataV, halaman kustom, tautan eksternal, dan halaman portal.
Komponen kustom YiDA (tipe komponen biasa) saat ini dapat diinstal pada halaman kustom, formulir biasa, dan formulir alur kerja.
Saat menginstal, pilih tipe halaman yang sesuai — komponen kemudian muncul di desainer halaman untuk tipe halaman tersebut.
### 4.3 Versi komponen
Komponen kustom YiDA memiliki dua Versi: **pengembangan** dan **resmi**.
Kami menambahkan konvensi tambahan di atas [semantic versioning](https://semver.org/lang/zh-CN/).
1. 0.1.0 adalah Versi pengembangan Default. Versi pengembangan tetap tersinkron secara Real-time dengan desainer komponen dan digunakan untuk debug.
2. 1.x.x adalah Versi rilis resmi. Versi ini mengunci fungsionalitas saat ini dan memastikan stabilitas di Produksi. Untuk aplikasi Produksi, selalu instal rilis resmi 1.x.x.
## 5. FAQ
**T: Apakah menghapus komponen aman?**
Menghapus dan mencopot instalasi komponen kini didukung. Pengembang bertanggung jawab memastikan kompatibilitas mundur.
**T: Bagaimana saya harus memahami komponen kustom?**
Lihat [**tautan**](/id/open/yida/guide/keywords) ini.
**T: Terdiri dari apa saja sebuah komponen?**
Sebuah komponen terdiri dari tampilan dan Atribut. Di sisi konsumen, Anda dapat mengubah Atribut komponen untuk merender tampilan yang berbeda.
Tampilan dibagi lebih lanjut menjadi tampilan desain dan tampilan runtime. Dalam banyak kasus, keduanya dapat digunakan kembali.
**Di sisi produsen, Anda membangun tampilan dan Atribut komponen secara terpisah.**
**T: Jika aplikasi yang menggunakan komponen kustom didistribusikan ke Organisasi lain melalui distribusi aplikasi, apakah aplikasi tersebut akan terbuka dengan benar?**
Ya.
Setelah aplikasi didistribusikan ke Organisasi lain, Organisasi tersebut dapat menggunakan komponen secara normal. Jika aplikasi yang didistribusikan telah mengaktifkan Izin Edit, Organisasi target juga dapat menginstal komponen.
**T: Bagaimana cara membaca Atribut komponen kustom pada halaman?**
Komponen kustom berperilaku seperti Komponen dasar. Gunakan `this.$('fieldId').get('propName')` untuk membaca Atribut.
**T: Bagaimana cara memperbarui Atribut komponen kustom pada halaman?**
Komponen kustom berperilaku seperti Komponen dasar. Gunakan `this.$('fieldId').set('propName', propValue)` untuk memperbarui Atribut.
Anda juga dapat mengikat Atribut ke variabel Sumber Data.
**T: Bagaimana sebuah komponen mengakses komponen lain di halaman dan berinteraksi dengannya?**
Tambahkan Atribut bertipe `function` ke komponen kustom — sebuah Callback peristiwa.
Pada halaman, gunakan Callback ini untuk berinteraksi dengan komponen lain.
Di dalam komponen, panggil `this.props.xxx()` pada Waktu yang tepat — misalnya, pada Peristiwa komponen atau di `DidMount` komponen — untuk memicu Callback.
**Tip: Atribut bertipe `function` dapat memiliki nilai Default dan dapat disembunyikan.**
**T: Dapatkah komponen kustom menginstal paket NPM pihak ketiga?**
J: Belum. Muat sumber daya CDN secara dinamis sebagai gantinya.
```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function loadScript(src, callback) {
if (!src) {
return;
}
const node = document.createElement('script');
node.src = src;
node.addEventListener('load', callback, false);
document.head.appendChild(node);
}
function loadCss(url) {
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = url;
document.body.appendChild(linkElement);
}
(function loadAssets() {
loadCss('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/css/react-cropper.css');
loadScript('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/js/react-cropper.js', () => {
// kode Anda
});
})();
```
**T: Saya menginstal sebuah komponen tetapi tidak melihatnya di panel. Mengapa?**
J: Periksa Cakupan instalasi.
**T: Bagaimana komponen kustom dapat mengirim data dalam sebuah formulir?**
J: Komponen kustom YiDA belum mendukung tipe komponen formulir. Untuk mengirim data, isi komponen formulir yang sudah ada sebagai gantinya. Misalnya, deklarasikan Atribut "identifier unik", teruskan identifier field formulir yang sudah ada saat menggunakan komponen, dan di sisi komponen, gunakan Acara untuk menulis data yang diperlukan kembali ke field formulir yang sudah ada.
**T: Bagaimana cara kerja pemversian komponen?**
Komponen memiliki Versi pengembangan dan Versi resmi.
Versi komponen kustom YiDA mengikuti aturan tambahan di atas [**semantic versioning**](https://semver.org/lang/zh-CN/).
0.1.0 adalah Versi pengembangan Default. Versi pengembangan tetap tersinkron secara Real-time dengan desainer komponen dan digunakan untuk debug.
1.x.x adalah Versi rilis resmi. Versi ini mengunci fungsionalitas saat ini dan memastikan stabilitas di Produksi. Untuk aplikasi Produksi, selalu instal rilis resmi 1.x.x.
**T: Saya mendefinisikan sebuah Atribut. Bagaimana komponen dapat bereaksi terhadap perubahan pada Atribut tersebut?**
Di desainer komponen, temukan komponen target dan Atribut yang relevan. Ikat Atribut ke variabel atau Fungsi handler kustom, lalu gunakan `this.props.xxx` untuk mempercabangkan logika Anda. Contoh:
**Atau**
**T: Dapatkah saya mengatur gaya secara dinamis di dalam komponen?**
Ya. Gunakan komponen kontainer, tambahkan "kelas gaya kustom" padanya, dan ikat kelas tersebut ke variabel.
**T: Apakah komponen kustom mendukung Organisasi induk-anak atau hulu-hilir?**
J: Komponen kustom belum mendukung penggunaan lintas Organisasi, termasuk Organisasi induk-anak dan hulu-hilir.