Kustomisasi formulir

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:

Aplikasi YiDA > Pengaturan aplikasi > Manajemen komponen > Pusat komponen (lihat Gambar 2.3-1).

Gambar 2.3-1 Masuk ke pusat komponen

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

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:

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

Langkah 1

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.

Langkah 2

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

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

Tulis logika salin di panel JS (lihat Gambar 2.3-6).

Gambar 2.3-6 Kode untuk Tindakan tombol “Salin”

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');
}

Simpan > Pratinjau komponen

Publikasikan > Isi nomor Versi dan Catatan Rilis > Konfirmasi (lihat Gambar 2.3-7).

Gambar 2.3-7 Isi informasi rilis

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, Anda harus memilih tipe halaman. Komponen kustom hanya muncul di desainer halaman untuk tipe halaman yang Anda pilih. Langkah-langkah:

Halaman desain formulir > Pustaka komponen > Komponen kustom > Manajemen komponen (lihat Gambar 2.3-9).

Gambar 2.3-9 Titik masuk untuk menginstal komponen kustom

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

Pilih Versi instalasi dan Cakupan instalasi > Instal (lihat Gambar 2.3-11).

Gambar 2.3-11 Instal komponen

Untuk memastikan stabilitas komponen kustom di Produksi, selalu instal rilis resmi 1.x.x saat memilih Versi.
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.
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:

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

Pengaturan aplikasi > Manajemen komponen > Pusat komponen (lihat Gambar 2.3-13).

Gambar 2.3-13 Masuk ke pusat komponen

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

Informasi dasar: Klik “Edit” untuk memperbarui thumbnail, URL dokumen bantuan, dan deskripsi komponen kustom. Field lain diatur saat komponen dibuat dan tidak dapat diubah.
Informasi rilis: Lihat Riwayat iterasi komponen, termasuk Versi dan Catatan Rilisnya.
Admin (memiliki Izin untuk mengembangkan dan melakukan debug komponen kustom; secara Default adalah Pembuat komponen): Tambahkan atau hapus admin untuk Kelola izin.
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.
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:

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.
Komponen formulir dapat mengirim data. Komponen ini lebih kompleks untuk dikembangkan dibandingkan komponen biasa dan memerlukan konfigurasi metadata tambahan.
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 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.

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.

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

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

Memulai

Mulai Cepat

Manajemen Formulir

Desain Alur Kerja

Desain Laporan

Desain Tabel Agregat

Desain Portal

Halaman Kustom

Integrasi & Otomatisasi

Cool App

Manajemen Aplikasi

Manajemen Platform

Internasionalisasi

YiDA Dedicated

Fitur Pengembang

1. Gambaran umum fitur

1.1 Tentang komponen kustom

1.2 Skenario penggunaan

1.3 Struktur komponen

2. Panduan langkah demi langkah

2.1 Skenario

2.2 Hasil akhir

2.3 Langkah-langkah

2.3.1 Langkah 1: Buat komponen kustom

2.3.2 Langkah 2: Kembangkan dan debug komponen kustom

2.3.3 Langkah 3: Instal komponen kustom

2.3.4 Langkah 4: Gunakan komponen kustom

2.3.5 Langkah 5: Lihat atau edit informasi komponen

3. Atribut komponen kustom

3.1 Titik masuk untuk mengonfigurasi Atribut komponen kustom

3.2 Konfigurasi Atribut komponen kustom

4. Lampiran

4.1 Tipe komponen

4.2 Tipe instalasi komponen

4.3 Versi komponen

5. FAQ

​1. Gambaran umum fitur

​1.1 Tentang komponen kustom

​1.2 Skenario penggunaan

​1.3 Struktur komponen

​2. Panduan langkah demi langkah

​2.1 Skenario

​2.2 Hasil akhir

​2.3 Langkah-langkah

​2.3.1 Langkah 1: Buat komponen kustom

​2.3.2 Langkah 2: Kembangkan dan debug komponen kustom

​2.3.3 Langkah 3: Instal komponen kustom

​2.3.4 Langkah 4: Gunakan komponen kustom

​2.3.5 Langkah 5: Lihat atau edit informasi komponen

​3. Atribut komponen kustom

​3.1 Titik masuk untuk mengonfigurasi Atribut komponen kustom

​3.2 Konfigurasi Atribut komponen kustom

​4. Lampiran

​4.1 Tipe komponen

​4.2 Tipe instalasi komponen

​4.3 Versi komponen

​5. FAQ

1. Gambaran umum fitur

1.1 Tentang komponen kustom

1.2 Skenario penggunaan

1.3 Struktur komponen

2. Panduan langkah demi langkah

2.1 Skenario

2.2 Hasil akhir

2.3 Langkah-langkah

2.3.1 Langkah 1: Buat komponen kustom

2.3.2 Langkah 2: Kembangkan dan debug komponen kustom

2.3.3 Langkah 3: Instal komponen kustom

2.3.4 Langkah 4: Gunakan komponen kustom

2.3.5 Langkah 5: Lihat atau edit informasi komponen

3. Atribut komponen kustom

3.1 Titik masuk untuk mengonfigurasi Atribut komponen kustom

3.2 Konfigurasi Atribut komponen kustom

4. Lampiran

4.1 Tipe komponen

4.2 Tipe instalasi komponen

4.3 Versi komponen

5. FAQ