Di Salesforce LWC, jika Anda ingin mengizinkan pengguna memilih opsi dari daftar opsi yang ditentukan, kotak kombo digunakan. Dalam panduan ini, kita akan membahas cara membuat kotak kombo dan berbagai atribut yang didukung oleh kotak kombo beserta contohnya.
Kotak kombo
Pada dasarnya, combobox adalah field read-only yang memberikan input untuk memilih opsi dari opsi yang ditentukan. Kita dapat membuatnya menggunakan tag Lightning-combobox. Atributnya adalah kecepatan satu demi satu yang dipisahkan oleh spasi. Mari kita bahas beberapa atribut yang diperlukan saat membuat combobox.
- label – Ini digunakan untuk menentukan label (teks) untuk kotak kombo Anda.
- pilihan – Setiap opsi mengambil atribut “label” dan “value”. Kita dapat menentukan beberapa opsi dalam daftar yang dipisahkan dengan koma.
- pengganti : Sebelum memilih suatu opsi, pengguna perlu mengetahui informasi terkait opsi. Jadi, atribut ini ditentukan.
- diperlukan : Dalam beberapa kasus, wajib untuk memilih opsi. Kita dapat membuatnya diperlukan dengan menentukan atribut ini.
- dengan disabilitas : Dimungkinkan untuk mencegah pengguna dengan memilih opsi dari kotak centang. Atribut ini menonaktifkan kotak kombo.
Sintaksis:
Mari kita lihat cara membuat combobox dengan beberapa atribut penting.
nama = 'nama'
label='label_nama'
nilai={nilai_dari_pilihan_}
placeholder='Teks Bantuan'
pilihan={Daftar_pilihan_pilihan}
onchange={handleChange} >
Spesifikasi:
Mari kita lihat langkah-langkah membuat kotak kombo dan mengerjakannya.
Di file JavaScript, buat daftar opsi dengan label dan nilai di dalam metode “pengambil”.
Buat variabel yang menyimpan opsi default.
Tulis fungsi pegangan yang menyimpan opsi yang dipilih oleh pengguna dari UI.
Di file HTML, buat kotak kombo dan teruskan atributnya. Selain itu, kita perlu meneruskan event handler onchange() yang menangani opsi di kotak kombo. Dibutuhkan fungsi “Handler” yang dibuat di file “js”.
Dalam semua contoh yang akan kita bahas dalam panduan ini, logika akan diberikan sebagai kode “js”. Setelah itu kita tentukan screenshot yang memuat seluruh kode “js”.
Contoh 1:
Buat kotak kombo dengan lima subjek (detail) di file Javascript. Tentukan nilai default sebagai 'JAVA'. Tangani kotak kombo dalam metode handleSubjectsOnChange(). Teruskan nilai dan detailnya ke atribut “nilai dan opsi” di file HTML dengan label dan terapkan komponennya.
contoh pertama.html
< div kelas = 'slds-var-m-around_medium' >
label = 'Pilih Subjek Anda:'
nilai = { nilai }
pilihan = { detail }
dalam perubahan = { handleSubjectsOnChange } < / kotak kombo petir>
< saudara >
< P > Subjek mu: < B > {nilai} < / B < / P >
< / div >
< / kartu petir>
< / templat>
contoh pertama.js
// Buat nilai default - 'JAVA' untuk Comboboxnilai = 'JAWA' ;
// Tunjukkan subjeknya
mendapatkan detail ( ) {
// 5 mata pelajaran
kembali [ { label : 'Jawa' , nilai : 'JAWA' } ,
{ label : 'Piton' , nilai : 'PITON' } ,
{ label : 'HTML' , nilai : 'HTML' } ,
{ label : 'C' , nilai : 'C' } ,
{ label : 'C++' , nilai : 'C++' } ] ;
}
// Tangani logika untuk menetapkan nilai
handleSubjectsOnChange ( peristiwa ) {
ini . nilai = peristiwa. detail . nilai ;
}
}
Seluruh Kode:
komponen pertama.js-meta.xml
Versi: kapan = '1.0' ?>< / target>
< / Paket Komponen Lightning>
Keluaran:
Tambahkan komponen ini ke halaman 'Rekam' objek apa pun. Dalam file HTML, kami menampilkan nilai dalam tag paragraf. Saat pengguna memilih opsi apa pun, opsi tersebut akan ditampilkan dalam huruf tebal. Secara default, “JAVA” dipilih dan ditampilkan setelah komponen dirender pada halaman.
Mari kita pilih subjek sebagai “C”. 'C' dikembalikan di bawah kotak kombo.
Contoh 2:
Dalam contoh ini, kita akan merender berbagai komponen berdasarkan nilai daftar pilihan Jenis Kampanye (dari objek Kampanye).
- Jika jenis Kampanye adalah “Konferensi”, kami akan merender template yang mengembalikan teks – Status Kampanye: DIRENCANAKAN
- Jika jenis Kampanye adalah “Webinar”, kami akan merender template yang mengembalikan teks – Status Kampanye: SELESAI
- Jika jenis Kampanye adalah “Mitra”, kami akan merender template yang mengembalikan teks – Status Kampanye: DALAM PROGRES
- Status Kampanye: DIBATALKAN untuk opsi lainnya.
contoh kedua.html
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
=
pilihan = { NilaiJenis Kampanye. data .nilai }
dalam perubahan = { menangani Perubahan } >
< / kotak kombo petir>
< / templat>< saudara / >
< / div >
< saudara < saudara >
= { konferensi } >
< tengah > Status Kampanye: < B < Saya > DIRENCANAKAN< / Saya < / B > < / tengah >
< / templat>
< tengah > Status Kampanye: < B < Saya > SELESAI< / Saya < / B > < / tengah >
< / templat>
< tengah > Status Kampanye: < B < Saya > DALAM PROSES< / Saya < / B > < / tengah >
< / templat>
< tengah > Status Kampanye: < B < Saya > DIBATALKAN< / Saya < / B > < / tengah >
< / templat>
< / kartu petir>
< / templat>
contoh kedua.js
Kami mengimpor objek Kampanye (Standar) sebagai CAMPAIGN dan Mengetiknya sebagai TYPE. Dari Lightning/uiObjectInfoApi, kami mengimpor getPicklistValues dan getObjectInfo. Ini akan membuat nilai daftar pilihan tersedia di bidang Jenis. Ini akan digunakan sebagai opsi untuk kotak kombo. Berikut ini ditangani di handleChange().
- Jika nilai === “Conference”, kita menetapkan variabel conferenceval ke true dan dua lainnya ke false.
- Jika nilainya === “Webinar”, kita menyetel variabel webinarval ke true dan dua lainnya ke false.
- Jika nilainya === “Partners”, kita menetapkan variabel partnerval ke true dan dua lainnya ke false.
- Jika nilainya tidak ada dalam pilihan yang diberikan, semuanya salah.
impor KAMPANYE dari '@salesforce/skema/Kampanye' ;
impor JENIS dari '@salesforce/schema/Campaign.Type' ;
impor { dapatkan Nilai Daftar Pilihan } dari 'petir/uiObjectInfoApi' ;
impor { dapatkanObjectInfo } dari 'petir/uiObjectInfoApi' ;
ekspor bawaan kelas Contoh Kedua meluas Elemen Petir {
@ nilai trek ;
// Ambil Objeknya
@ kabel ( dapatkanObjectInfo , { objekApiName : KAMPANYE } )
Info objek ;
// Dapatkan Jenis Kampanye - Daftar Pilihan
@ kabel ( dapatkan Nilai Daftar Pilihan , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , bidangNamaApi : JENIS } )
NilaiJenis Kampanye ;
konferensi = PALSU ;
webinarval = PALSU ;
kemitraan = PALSU ;
lainnya = PALSU ;
// Menangani logika
menangani Perubahan ( peristiwa ) {
ini . nilai = peristiwa. target . nilai ;
jika ( ini . nilai === 'Konferensi' ) {
// Menampilkan Status sesuai RENCANA
ini . konferensi = BENAR ;
ini . webinarval = PALSU ;
ini . kemitraan = PALSU ;
}
kalau tidak jika ( ini . nilai === 'Webinar' ) {
// Tampilkan Status sebagai SELESAI
ini . webinarval = BENAR ;
ini . konferensi = PALSU ;
ini . kemitraan = PALSU ;
}
kalau tidak jika ( ini . nilai === 'Mitra' ) {
// Tampilkan Status sebagai DALAM PROGRESS
ini . webinarval = PALSU ;
ini . konferensi = PALSU ;
ini . kemitraan = BENAR ;
}
kalau tidak {
// Tampilkan Status seperti DI DIBATALKAN
ini . webinarval = PALSU ;
ini . konferensi = PALSU ;
ini . kemitraan = PALSU ;
}
}
}
komponen kedua.js-meta.xml
Versi: kapan = '1.0' ?>< / target>
< / Paket Komponen Lightning>
Keluaran:
Ketik – “Konferensi”. Jadi, statusnya adalah “RENCANA”.
Ketik – “Webinar”. Jadi, statusnya “SELESAI”.
Ketik – “Mitra”. Jadi statusnya adalah “IN PROGRESS”.
Tipenya tidak ada pada pilihan yang disediakan. Jadi, statusnya “DIBATALKAN”.
Contoh 3:
Sekarang, kita membuat kotak kombo dengan catatan Kampanye sebagai opsi. Jika kami memilih opsi apa pun, jenis Kampanye yang sesuai akan ditampilkan di UI.
Pertama, kita perlu membuat kelas Apex dengan metode getCampaign(). Metode ini mengembalikan daftar semua Kampanye dengan id, nama, jenis, dan status.
Catatan Kampanye. apxcpublik dengan berbagi kelas Catatan Kampanye {
@ Aura Diaktifkan ( dapat di-cache = BENAR )
// Dapatkan daftar Kampanye
publik statis Daftar < Kampanye > dapatkan Kampanye ( ) {
kembali [ PILIH ID , Nama , Jenis , Status dari Kampanye ] ;
}
}
contoh ketiga.html
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
label = 'Pilih Nama Kampanye'
pilihan = { Pilihan kampanye }
nilai = { nilai }
dalam perubahan = { handleonchange }
>
< / kotak kombo petir>
< / div < saudara >
< saudara >
< P > Jenis Kampanye untuk Kampanye ini: < B > {nilai} < / B < / P >
< / kartu petir>
< / templat>
thirdExample.js
- Kita perlu menentukan metode yang mendapatkan daftar Kampanye di dalam metode connectcallback(). Deklarasikan array bernama “camps” dan simpan hasilnya dengan label sebagai ID Kampanye dan nilainya sebagai Jenis Kampanye. Array ini adalah masukan ke nama kampanye (ini harus dibuat dengan dekorator trek).
- Dalam metode pengambil Campaignoptions(), kembalikan array campaignNames. Jadi, combobox menggunakan opsi ini.
- Tetapkan nilai yang dipilih dalam metode handler handleonchange().
impor dapatkan Kampanye dari '@salesforce/apex/CampaignRecords.getCampaign' ;
ekspor bawaan kelas Contoh Ketiga meluas Elemen Petir {
nilai = '' ;
@ lacak Nama kampanye = [ ] ;
mendapatkan Pilihan kampanye ( ) {
kembali ini . Nama kampanye ;
}
// Tambahkan opsi ke array camps dari Apex.
// label akan menjadi Nama Kampanye
// nilainya akan menjadi Jenis Kampanye
terhubungPanggilan Balik ( ) {
dapatkan Kampanye ( )
. Kemudian ( hasil => {
biarkan berkemah = [ ] ;
untuk ( dulu k = 0 ; k < hasil. panjang ; k ++ ) {
kamp. dorongan ( { label : hasil [ k ] . Nama , nilai : hasil [ k ] . Jenis } ) ;
}
ini . Nama kampanye = kamp ;
} )
}
// Tangani nilainya
handleonchange ( peristiwa ) {
ini . nilai = peristiwa. detail . nilai ;
}
}
Keluaran:
Mari pilih rekaman dan lihat jenisnya.
Kesimpulan
Kami mempelajari cara membuat kotak kombo di LWC dengan atribut dan contoh. Pertama, kami membuat kotak kombo dengan daftar nilai dan menampilkan nilai yang dipilih. Selanjutnya, kita merender template HTML berdasarkan nilai yang dipilih melalui rendering bersyarat. Terakhir, kita mempelajari cara membuat opsi untuk kotak kombo dari data Salesforce yang ada dan menampilkan bidang terkait di UI.