Sa Salesforce LWC, kung gusto mong payagan ang user na pumili ng opsyon mula sa tinukoy na listahan ng mga opsyon, combobox ang ginagamit. Sa gabay na ito, tatalakayin natin kung paano gumawa ng combobox at ang iba't ibang attribute na sinusuportahan ng combobox na may mga halimbawa.
Combobox
Karaniwan, ang combobox ay isang read-only na field na nagbibigay ng input upang pumili ng opsyon mula sa mga tinukoy na opsyon. Magagawa natin ito gamit ang tag ng lightning-combobox. Ang mga katangian ay sunud-sunod na bilis na pinaghihiwalay ng espasyo. Talakayin natin ang ilang attribute na kinakailangan habang gumagawa ng combobox.
- label – Ito ay ginagamit upang tukuyin ang label (teksto) para sa iyong combobox.
- mga pagpipilian – Ang bawat opsyon ay tumatagal ng 'label' at 'halaga' na mga katangian. Maaari naming tukuyin ang maramihang mga opsyon sa isang listahan na pinaghihiwalay ng kuwit.
- placeholder : Bago pumili ng opsyon, kailangang malaman ng user ang impormasyong nauugnay sa mga opsyon. Kaya, tinukoy ang katangiang ito.
- kailangan : Sa ilang kaso, ipinag-uutos na piliin ang opsyon. Magagawa natin itong kinakailangan sa pamamagitan ng pagtukoy sa katangiang ito.
- may kapansanan : Posibleng pigilan ang user sa pamamagitan ng pagpili sa opsyon mula sa checkbox. Hindi pinapagana ng attribute na ito ang combobox.
Syntax:
Tingnan natin kung paano gumawa ng combobox na may ilang mahahalagang katangian.
label='label_name'
value={value_from_the_option}
placeholder='Teksto ng Tulong'
options={List_of_options}
onchange={handleChange} >
Pagtutukoy:
Tingnan natin ang mga hakbang para gawin ang combobox at gawin ito.
Sa JavaScript file, gumawa ng listahan ng mga opsyon na may label at value sa loob ng 'getter' na paraan.
Gumawa ng variable na nag-iimbak ng default na opsyon.
Isulat ang handle function na nag-iimbak ng opsyon na pinili ng user mula sa UI.
Sa HTML file, lumikha ng combobox at ipasa ang mga katangian. Gayundin, kailangan nating ipasa ang onchange() event handler na humahawak sa mga opsyon sa combobox. Kinakailangan ang function na 'Handler' na nilikha sa 'js' na file.
Sa lahat ng mga halimbawa na tatalakayin natin sa gabay na ito, ibibigay ang lohika bilang 'js' code. Pagkatapos nito, tinukoy namin ang screenshot na kinabibilangan ng buong 'js' code.
Halimbawa 1:
Gumawa ng combobox na may limang paksa (mga detalye) sa Javascript file. Tukuyin ang default na halaga bilang 'JAVA'. Pangasiwaan ang combobox sa paraan ng handleSubjectsOnChange(). Ipasa ang value at mga detalye sa mga attribute na 'value and options' sa HTML file na may label at i-deploy ang component.
firstExample.html
< div klase = 'slds-var-m-around_medium' >
label = 'Piliin ang iyong Paksa:'
halaga = { halaga }
mga pagpipilian = { mga detalye }
onchange = { handleSubjectsOnChange } >< / kidlat-combobox>
< br >
< p > Iyong asignatura: < b > {value} < / b >< / p >
< / div >
< / lightning-card>
< / template>
firstExample.js
// Lumikha ng default na halaga - 'JAVA' para sa Comboboxhalaga = 'JAVA' ;
// Ipakita ang mga paksa
makuha mga detalye ( ) {
// 5 paksa
bumalik [ { label : 'Java' , halaga : 'JAVA' } ,
{ label : 'Python' , halaga : 'PYTHON' } ,
{ label : 'HTML' , halaga : 'HTML' } ,
{ label : 'C' , halaga : 'C' } ,
{ label : 'C++' , halaga : 'C++' } ] ;
}
// Pangasiwaan ang lohika upang itakda ang halaga
handleSubjectsOnChange ( kaganapan ) {
ito . halaga = kaganapan. detalye . halaga ;
}
}
Buong Code:
firstComponent.js-meta.xml
bersyon = '1.0' ?>< / mga target>
< / LightningComponentBundle>
Output:
Idagdag ang bahaging ito sa pahina ng 'Record' ng anumang bagay. Sa HTML file, ipinapakita namin ang halaga sa tag ng talata. Kapag pumili ang isang user ng anumang opsyon, ipapakita ito bilang naka-bold. Bilang default, ang 'JAVA' ay pinili at ipinapakita pagkatapos na mai-render ang bahagi sa pahina.
Piliin natin ang paksa bilang 'C'. Ang 'C' ay ibinalik sa ibaba ng combobox.
Halimbawa 2:
Sa halimbawang ito, ire-render namin ang iba't ibang bahagi batay sa mga halaga ng picklist na Uri ng Kampanya (mula sa object ng Campaign).
- Kung “Conference” ang uri ng Campaign, ire-render namin ang template na nagbabalik ng text – Status ng Campaign: PLANNED
- Kung “Webinar” ang uri ng Campaign, ire-render namin ang template na nagbabalik ng text – Status ng Campaign: COMPLETED
- Kung ang uri ng Campaign ay “Partners”, ire-render namin ang template na nagbabalik ng text – Status ng Campaign: IN PROGRESS
- Katayuan ng Kampanya: INABORTE para sa iba pang mga opsyon.
secondExample.html
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
=
mga pagpipilian = { CampaignTypeValues. datos .mga halaga }
onchange = { hawakanPagbabago } >
< / kidlat-combobox>
< / template>< br / >
< / div >
< br >< br >
= { conferenceval } >
< gitna > Katayuan ng Kampanya: < b >< i > PINLANO< / i >< / b > < / gitna >
< / template>
= { webinarval } >
< gitna > Katayuan ng Kampanya: < b >< i > KUMPLETO< / i >< / b > < / gitna >
< / template>
= { partnerval } >
< gitna > Katayuan ng Kampanya: < b >< i > NAG-UNLAD< / i >< / b > < / gitna >
< / template>
< gitna > Katayuan ng Kampanya: < b >< i > Aborted< / i >< / b > < / gitna >
< / template>
< / lightning-card>
< / template>
secondExample.js
Ini-import namin ang object ng Campaign (Standard) bilang CAMPAIGN at Type mula dito bilang TYPE. Mula sa kidlat/uiObjectInfoApi, ini-import namin ang getPicklistValues at getObjectInfo. Makukuha nito ang mga value ng picklist na available sa field na Uri. Gagamitin ang mga ito bilang mga opsyon para sa combobox. Ang mga sumusunod ay hinahawakan sa handleChange().
- Kung ang value na === 'Conference', itinakda namin ang conferenceval variable sa true at ang dalawa pa bilang false.
- Kung ang value na === 'Webinar', itinakda namin ang variable ng webinarval sa true at ang dalawa pa bilang false.
- Kung ang value na === “Partners”, itinakda namin ang partnerval variable sa true at ang dalawa pa bilang false.
- Kung ang halaga ay wala sa mga ibinigay na opsyon, lahat ay mali.
angkat CAMPAIGN mula sa '@salesforce/schema/Campaign' ;
angkat TYPE mula sa '@salesforce/schema/Campaign.Type' ;
angkat { getPicklistValues } mula sa 'kidlat/uiObjectInfoApi' ;
angkat { getObjectInfo } mula sa 'kidlat/uiObjectInfoApi' ;
i-export default klase PangalawangHalimbawa umaabot LightningElement {
@ halaga ng track ;
// Kunin ang Bagay
@ alambre ( getObjectInfo , { objectApiName : KAMPANYA } )
objectInfo ;
// Kunin ang Uri ng Campaign - Picklist
@ alambre ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : URI } )
CampaignTypeValues ;
conferenceval = mali ;
webinarval = mali ;
partnerval = mali ;
iba pa = mali ;
// Pangasiwaan ang lohika
hawakanPagbabago ( kaganapan ) {
ito . halaga = kaganapan. target . halaga ;
kung ( ito . halaga === 'Pagpupulong' ) {
// Ipakita ang Katayuan bilang PINLANO
ito . conferenceval = totoo ;
ito . webinarval = mali ;
ito . partnerval = mali ;
}
iba pa kung ( ito . halaga === 'Mga Webinar' ) {
// Ipakita ang Katayuan bilang KUMPLETO
ito . webinarval = totoo ;
ito . conferenceval = mali ;
ito . partnerval = mali ;
}
iba pa kung ( ito . halaga === 'Mga kasosyo' ) {
// Ipakita ang Katayuan bilang IN PROGRESS
ito . webinarval = mali ;
ito . conferenceval = mali ;
ito . partnerval = totoo ;
}
iba pa {
// Ipakita ang Katayuan bilang IN Aborted
ito . webinarval = mali ;
ito . conferenceval = mali ;
ito . partnerval = mali ;
}
}
}
secondComponent.js-meta.xml
bersyon = '1.0' ?>< / mga target>
< / LightningComponentBundle>
Output:
Uri - 'Kumperensya'. So, “PLANNED” ang status.
Uri - 'Webinar'. So, “COMPLETED” na ang status.
Uri - 'Mga Kasosyo'. So, “IN PROGRESS” ang status.
Ang uri ay wala sa ibinigay na mga opsyon. So, “ABORTED” ang status.
Halimbawa 3:
Ngayon, gumawa kami ng combobox na may mga rekord ng Campaign bilang mga opsyon. Kung pipili kami ng anumang opsyon, ang kaukulang uri ng Campaign ay ibabalik sa UI.
Una, kailangan nating gumawa ng Apex class na may getCampaign()method. Ang pamamaraang ito ay nagbabalik ng isang listahan ng lahat ng Mga Kampanya na may id, pangalan, uri, at katayuan.
CampaignRecords. apxcpubliko sa pagbabahagi klase CampaignRecords {
@ AuraEnabled ( na-cache = totoo )
// Kunin ang listahan ng Mga Campaign
pampubliko static Listahan < Kampanya > getCampaign ( ) {
bumalik [ PUMILI Id , Pangalan , Uri , Katayuan mula sa Kampanya ] ;
}
}
thirdExample.html
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
label = 'Piliin ang Pangalan ng Kampanya'
mga pagpipilian = { Mga opsyon sa kampanya }
halaga = { halaga }
onchange = { handleonchange }
>
< / kidlat-combobox>
< / div >< br >
< br >
< p > Uri ng Kampanya para sa Kampanya na ito: < b > {value} < / b >< / p >
< / lightning-card>
< / template>
thirdExample.js
- Kailangan naming tukuyin ang paraan na nakakakuha ng listahan ng Mga Kampanya sa loob ng connectedcallback() na pamamaraan. Magdeklara ng array na pinangalanang 'mga kampo' at iimbak ang resulta na may label bilang Campaign ID at ang halaga bilang Uri ng Campaign. Ang array na ito ay ang input sa campaignNames (kailangan itong gawin gamit ang track decorator).
- Sa Campaignoptions() getter method, ibalik ang campaignNames array. Kaya, ginagamit ng combobox ang mga opsyong ito.
- Itakda ang napiling halaga sa paraan ng handler ng handleonchange().
angkat getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
i-export default klase ThirdExample umaabot LightningElement {
halaga = '' ;
@ subaybayan ang mga Pangalan ng kampanya = [ ] ;
makuha Mga opsyon sa kampanya ( ) {
bumalik ito . Pangalan ng kampanya ;
}
// Idagdag ang mga opsyon sa hanay ng mga kampo mula sa Apex.
// ang label ay ang Pangalan ng Kampanya
// ang halaga ay ang Uri ng Kampanya
konektadoCallback ( ) {
getCampaign ( )
. pagkatapos ( resulta => {
hayaan ang mga kampo = [ ] ;
para sa ( ay k = 0 ; k < resulta. haba ; k ++ ) {
mga kampo. itulak ( { label : resulta [ k ] . Pangalan , halaga : resulta [ k ] . Uri } ) ;
}
ito . Pangalan ng kampanya = mga kampo ;
} )
}
// Pangasiwaan ang halaga
handleonchange ( kaganapan ) {
ito . halaga = kaganapan. detalye . halaga ;
}
}
Output:
Piliin natin ang record at tingnan ang uri.
Konklusyon
Natutunan namin kung paano gumawa ng combobox sa LWC na may mga katangian at halimbawa. Una, gumawa kami ng combobox na may listahan ng mga value at ipinakita ang napiling value. Susunod, i-render namin ang template ng HTML batay sa napiling value sa pamamagitan ng conditional rendering. Panghuli, natutunan namin kung paano gumawa ng mga opsyon para sa combobox mula sa mga kasalukuyang talaan ng Salesforce at ipakita ang mga nauugnay na field sa UI.