Pelajari cara mendefinisikan atribut komponen kustom di YiDA — tambah, edit, dan hapus atribut untuk memperkaya fungsi, mengonfigurasi tipe data, setter, serta nilai default sesuai kebutuhan bisnis.
Komponen kustom mendukung pendefinisian atribut (propTypes) untuk memperkaya komponen pada level atribut. Menambahkan atribut kustom meningkatkan tingkat kustomisasi sekaligus membuat komponen lebih fleksibel dan lebih selaras dengan kebutuhan bisnis. (Lihat Gambar 1.1-1)
Gambar 1.1-1 Titik masuk untuk pendefinisian atribut komponenAtribut komponen dapat ditambahkan melalui tombol “Tambah item”, dikustomisasi melalui tombol “Edit”, dan dihapus melalui tombol “Hapus”. Klik tombol “Edit” untuk melihat semua item konfigurasi atribut komponen. (Lihat Gambar 1.1-2)
Gambar 1.1-2 Item konfigurasi untuk pendefinisian atribut komponen kustomSemua pendefinisian atribut komponen kustom dapat dilihat dan dikonfigurasi pada halaman pratinjau komponen (untuk debugging atribut sederhana) atau setelah dipasang ke dalam aplikasi (untuk konfigurasi atribut kompleks, termasuk debugging terkait kode). (Lihat Gambar 1.1-3)
Gambar 1.1-3 Pratinjau dan debugging atribut komponenUntuk deskripsi rinci setiap item konfigurasi, lihat bagian-bagian di bawah.
Nama atribut yang dikonfigurasi untuk komponen kustom. Judul default-nya adalah “Judul atribut”. Judul yang jelas dan mudah dipahami membantu pengguna memahami makna atribut atau mengenali konten yang perlu diisi.
Ketika komponen digunakan pada halaman, tampilannya seperti berikut:
Gambar 1.1-4 Tampilan atribut komponen di desainer formulir
Nama atribut sebuah komponen berfungsi sebagai key atribut, mirip dengan props.xxx pada sebuah komponen. Nilai default-nya adalah propName. Anda dapat mengikat variabel dalam desain halaman untuk mengontrol komponen. Misalnya, nilai atribut dari komponen kustom dapat digunakan sebagai judul komponen lain di dalam komponen kustom tersebut. (Lihat Gambar 1.1-5)
Gambar 1.1-5 Menggunakan nama atribut
Catatan: Nama atribut sebuah komponen tidak boleh kosong; jika kosong, akan terjadi error saat pemanggilan atau penetapan nilai.
Tipe atribut komponen mirip dengan tipe data umum dan mencakup tujuh tipe: Teks, Boolean, Angka, Object, Array, Fungsi, dan Elemen. Setiap tipe data berkorespondensi dengan beberapa setter untuk memenuhi kebutuhan pengguna dalam memproses data pada dimensi yang berbeda. (Lihat Gambar 1.1-6)
Komponen dengan tipe atribut yang berbeda memiliki setter atribut yang berbeda, sehingga memungkinkan metode rendering komponen dan pemrosesan data yang berbeda pula. Misalnya, tipe Teks berkorespondensi dengan lima setter. (Lihat Gambar 1.1-7)
Merujuk pada bidang yang ditampilkan secara default pada komponen kustom dalam formulir saat pengguna mengakses formulir. (Lihat Gambar 1.1-8 untuk hasilnya)
Pesan
Kalender
Rapat
Kontak
Email
Dokumen
Drive
AI Table
AI Minutes
Absensi
Persetujuan
YiDA
Konsol Admin
