Dalam Salesforce LWC, jika anda ingin membenarkan pengguna memilih pilihan daripada senarai pilihan yang ditentukan, kotak kombo digunakan. Dalam panduan ini, kami akan membincangkan cara membuat kotak kombo dan atribut berbeza yang disokong oleh kotak kombo dengan contoh.
Kotak kombo
Pada asasnya, kotak kombo ialah medan baca sahaja yang menyediakan input untuk memilih pilihan daripada pilihan yang ditentukan. Kita boleh menciptanya menggunakan tag kilat-kombokotak. Atribut adalah kelajuan satu demi satu yang dipisahkan oleh ruang. Mari bincangkan beberapa atribut yang diperlukan semasa membuat kotak kombo.
- label – Ini digunakan untuk menentukan label (teks) untuk kotak kombo anda.
- pilihan – Setiap pilihan mengambil atribut 'label' dan 'nilai'. Kita boleh menentukan berbilang pilihan dalam senarai yang dipisahkan dengan koma.
- pemegang tempat : Sebelum memilih pilihan, pengguna perlu mengetahui maklumat yang berkaitan dengan pilihan. Jadi, atribut ini ditentukan.
- diperlukan : Dalam sesetengah kes, adalah wajib untuk memilih pilihan. Kita boleh menjadikannya diperlukan dengan menyatakan atribut ini.
- kurang upaya : Anda boleh menghalang pengguna dengan memilih pilihan daripada kotak semak. Atribut ini melumpuhkan kotak kombo.
Sintaks:
Mari lihat cara membuat kotak kombo dengan beberapa atribut penting.
nama = 'nama'
label='label_name'
value={value_from_the_option}
pemegang tempat='Teks Bantuan'
options={List_of_options}
onchange={handleChange} >
Spesifikasi:
Mari lihat langkah-langkah untuk mencipta kotak kombo dan bekerjasama dengannya.
Dalam fail JavaScript, buat senarai pilihan dengan label dan nilai dalam kaedah 'pengambil'.
Buat pembolehubah yang menyimpan pilihan lalai.
Tulis fungsi pemegang yang menyimpan pilihan yang dipilih oleh pengguna daripada UI.
Dalam fail HTML, cipta kotak kombo dan lulus atribut. Selain itu, kita perlu lulus pengendali acara onchange() yang mengendalikan pilihan dalam kotak kombo. Ia memerlukan fungsi 'Pengendali' yang dibuat dalam fail 'js'.
Dalam semua contoh yang akan kita bincangkan dalam panduan ini, logik akan disediakan sebagai kod 'js'. Selepas itu, kami menentukan tangkapan skrin yang merangkumi keseluruhan kod 'js'.
Contoh 1:
Cipta kotak kombo dengan lima subjek (butiran) dalam fail Javascript. Tentukan nilai lalai sebagai 'JAVA'. Kendalikan kotak kombo dalam kaedah handleSubjectsOnChange(). Hantar nilai dan butiran kepada atribut 'nilai dan pilihan' dalam fail HTML dengan label dan gunakan komponen tersebut.
firstExample.html
< div kelas = 'slds-var-m-around_medium' >
label = 'Pilih Subjek anda:'
nilai = { nilai }
pilihan = { butiran }
onchange = { handleSubjectsOnChange } >< / kotak kombo kilat>
< br >
< hlm > Subjek Anda: < b > {value} < / b >< / hlm >
< / div >
< / kad kilat>
< / templat>
firstExample.js
// Cipta nilai lalai - 'JAVA' untuk Comboboxnilai = 'JAWA' ;
// Tunjukkan subjek
dapatkan butiran ( ) {
// 5 mata pelajaran
kembali [ { label : 'Jawa' , nilai : 'JAWA' } ,
{ label : 'Python' , nilai : 'PYTHON' } ,
{ label : 'HTML' , nilai : 'HTML' } ,
{ label : 'C' , nilai : 'C' } ,
{ label : 'C++' , nilai : 'C++' } ] ;
}
// Kendalikan logik untuk menetapkan nilai
handleSubjectsOnChange ( peristiwa ) {
ini . nilai = peristiwa. terperinci . nilai ;
}
}
Keseluruhan Kod:
firstComponent.js-meta.xml
versi = '1.0' ?>< / sasaran>
< / LightningComponentBundle>
Pengeluaran:
Tambahkan komponen ini pada halaman 'Rekod' mana-mana objek. Dalam fail HTML, kami memaparkan nilai dalam teg perenggan. Apabila pengguna memilih sebarang pilihan, ia akan dipaparkan sebagai tebal. Secara lalai, “JAVA” dipilih dan dipaparkan selepas komponen dipaparkan pada halaman.
Mari pilih subjek sebagai 'C'. 'C' dikembalikan di bawah kotak kombo.
Contoh 2:
Dalam contoh ini, kami akan memaparkan komponen berbeza berdasarkan nilai senarai pilih Jenis Kempen (daripada objek Kempen).
- Jika jenis Kempen ialah 'Persidangan', kami akan memaparkan templat yang mengembalikan teks – Status Kempen: DIRANCANG
- Jika jenis Kempen ialah “Webinar”, kami akan memaparkan templat yang mengembalikan teks – Status Kempen: SELESAI
- Jika jenis Kempen ialah “Rakan Kongsi”, kami akan memaparkan templat yang mengembalikan teks – Status Kempen: SEDANG BERLANGSUNG
- Status Kempen: DIGUGUHKAN untuk pilihan yang lain.
secondExample.html
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
pilihan = { CampaignTypeValues. data .nilai }
onchange = { mengendalikanTukar } >
< / kotak kombo kilat>
< / templat>< br / >
< / div >
< br >< br >
< pusat > Status Kempen: < b >< i > DIRANCANG< / i >< / b > < / pusat >
< / templat>
= { webinarval } >
< pusat > Status Kempen: < b >< i > SELESAI< / i >< / b > < / pusat >
< / templat>
= { partnerval } >
< pusat > Status Kempen: < b >< i > SEDANG BERLANGSUNG< / i >< / b > < / pusat >
< / templat>
< pusat > Status Kempen: < b >< i > DIGUGUHKAN< / i >< / b > < / pusat >
< / templat>
< / kad kilat>
< / templat>
secondExample.js
Kami mengimport objek Kempen (Standard) sebagai CAMPAIGN dan Taip daripadanya sebagai TYPE. Daripada lightning/uiObjectInfoApi, kami mengimport getPicklistValues dan getObjectInfo. Ini akan mendapat nilai senarai pilih yang tersedia dalam medan Jenis. Ini akan digunakan sebagai pilihan untuk kotak kombo. Perkara berikut dikendalikan dalam handleChange().
- Jika nilai === 'Persidangan', kami menetapkan pembolehubah conferenceval kepada benar dan dua yang lain sebagai palsu.
- Jika nilai === 'Webinar', kami menetapkan pembolehubah webinarval kepada benar dan dua yang lain sebagai palsu.
- Jika nilai === 'Rakan Kongsi', kami menetapkan pembolehubah partnerval kepada benar dan dua yang lain sebagai palsu.
- Jika nilai tiada dalam pilihan yang diberikan, semuanya adalah palsu.
import KEMPEN daripada '@salesforce/schema/Kempen' ;
import TYPE daripada '@salesforce/schema/Campaign.Type' ;
import { getPicklistValues } daripada 'kilat/uiObjectInfoApi' ;
import { getObjectInfo } daripada 'kilat/uiObjectInfoApi' ;
eksport lalai kelas Contoh Kedua memanjang Elemen Kilat {
@ nilai jejak ;
// Dapatkan Objek
@ wayar ( getObjectInfo , { objectApiName : KEMPEN } )
objectInfo ;
// Dapatkan Jenis Kempen - Senarai Pilih
@ wayar ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : JENIS } )
CampaignTypeValues ;
conferenceval = salah ;
webinarval = salah ;
partnerval = salah ;
lain = salah ;
// Kendalikan logik
mengendalikanTukar ( peristiwa ) {
ini . nilai = peristiwa. sasaran . nilai ;
jika ( ini . nilai === 'Persidangan' ) {
// Paparkan Status sebagai DIRANCANG
ini . conferenceval = benar ;
ini . webinarval = salah ;
ini . partnerval = salah ;
}
lain jika ( ini . nilai === 'Webinar' ) {
// Paparkan Status sebagai SELESAI
ini . webinarval = benar ;
ini . conferenceval = salah ;
ini . partnerval = salah ;
}
lain jika ( ini . nilai === 'rakan kongsi' ) {
// Paparkan Status sebagai SEDANG BERLANGSUNG
ini . webinarval = salah ;
ini . conferenceval = salah ;
ini . partnerval = benar ;
}
lain {
// Paparkan Status sebagai DALAM DIGANGGUHKAN
ini . webinarval = salah ;
ini . conferenceval = salah ;
ini . partnerval = salah ;
}
}
}
secondComponent.js-meta.xml
versi = '1.0' ?>< / sasaran>
< / LightningComponentBundle>
Pengeluaran:
Taip – “Persidangan”. Jadi, statusnya adalah 'DIRANCANG'.
Taip – “Webinar”. Jadi, statusnya adalah 'SELESAI'.
Taip – “Rakan Kongsi”. Jadi, statusnya adalah 'SEDANG BERLANGSUNG'.
Jenisnya tiada dalam pilihan yang disediakan. Jadi, statusnya adalah 'DIGGUGUHKAN'.
Contoh 3:
Sekarang, kami mencipta kotak kombo dengan rekod Kempen sebagai pilihan. Jika kami memilih sebarang pilihan, jenis Kempen yang sepadan akan dikembalikan pada UI.
Pertama, kita perlu mencipta kelas Apex dengan kaedah getCampaign(). Kaedah ini mengembalikan senarai semua Kempen dengan id, nama, jenis dan status.
Rekod Kempen. apxcawam dengan perkongsian kelas Rekod Kempen {
@ AuraDidayakan ( boleh cache = benar )
// Dapatkan senarai Kempen
awam statik Senaraikan < Kempen > getCampaign ( ) {
kembali [ PILIH Id , Nama , taip , Status daripada Kempen ] ;
}
}
thirdExample.html
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
label = 'Pilih Nama Kempen'
pilihan = { Pilihan kempen }
nilai = { nilai }
onchange = { handleonchange }
>
< / kotak kombo kilat>
< / div >< br >
< br >
< hlm > Jenis Kempen untuk Kempen ini: < b > {value} < / b >< / hlm >
< / kad kilat>
< / templat>
thirdExample.js
- Kita perlu menentukan kaedah yang mendapat senarai Kempen di dalam kaedah connectedcallback(). Isytihar tatasusunan bernama 'kem' dan simpan hasilnya dengan label sebagai ID Kempen dan nilai sebagai Jenis Kempen. Tatasusunan ini ialah input kepada campaignNames (ini perlu dibuat dengan penghias trek).
- Dalam kaedah pengambil Campaignoptions(), kembalikan tatasusunanNamaKempen. Jadi, combobox menggunakan pilihan ini.
- Tetapkan nilai yang dipilih dalam kaedah pengendali handleonchange().
import getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
eksport lalai kelas Contoh Ketiga memanjang Elemen Kilat {
nilai = '' ;
@ jejak nama kempen = [ ] ;
dapatkan Pilihan kempen ( ) {
kembali ini . Nama kempen ;
}
// Tambahkan pilihan pada susunan kem dari Apex.
// label akan menjadi Nama Kempen
// nilai akan menjadi Jenis Kempen
disambungPanggil balik ( ) {
getCampaign ( )
. kemudian ( hasil => {
biarkan kem = [ ] ;
untuk ( adalah k = 0 ; k < hasil. panjang ; k ++ ) {
kem. menolak ( { label : hasil [ k ] . Nama , nilai : hasil [ k ] . taip } ) ;
}
ini . Nama kempen = kem ;
} )
}
// Kendalikan nilai
handleonchange ( peristiwa ) {
ini . nilai = peristiwa. terperinci . nilai ;
}
}
Pengeluaran:
Mari pilih rekod dan lihat jenisnya.
Kesimpulan
Kami belajar cara membuat kotak kombo dalam LWC dengan atribut dan contoh. Mula-mula, kami mencipta kotak kombo dengan senarai nilai dan memaparkan nilai yang dipilih. Seterusnya, kami memberikan templat HTML berdasarkan nilai yang dipilih melalui pemaparan bersyarat. Akhir sekali, kami mempelajari cara membuat pilihan untuk kotak kombo daripada rekod Salesforce sedia ada dan memaparkan medan berkaitan pada UI.