Jos Salesforce LWC:ssä haluat antaa käyttäjän valita vaihtoehdon määritetystä asetusluettelosta, käytetään yhdistelmälaatikkoa. Tässä oppaassa käsittelemme esimerkkien avulla yhdistelmälaatikon luomista ja yhdistelmälaatikon tukemia erilaisia attribuutteja.
Yhdistelmälaatikko
Pohjimmiltaan yhdistelmälaatikko on vain luku -kenttä, joka tarjoaa syötteen valitaksesi vaihtoehdon määritetyistä vaihtoehdoista. Voimme luoda tämän käyttämällä lightning-combobox-tunnistetta. Attribuutit ovat nopeus peräkkäin, jotka erotetaan välilyönnillä. Keskustellaan joistakin attribuuteista, joita vaaditaan yhdistelmälaatikkoa luotaessa.
- etiketti – Tätä käytetään yhdistelmälaatikon tunnisteen (tekstin) määrittämiseen.
- vaihtoehtoja – Jokainen vaihtoehto ottaa 'label'- ja 'value'-attribuutit. Voimme määrittää useita vaihtoehtoja pilkulla erotettuun luetteloon.
- paikanpitäjä : Ennen vaihtoehdon valitsemista käyttäjän on tiedettävä vaihtoehtoihin liittyvät tiedot. Tämä attribuutti on siis määritetty.
- edellytetään : Joissakin tapauksissa on pakollista valita vaihtoehto. Voimme tehdä sen vaadittavaksi määrittämällä tämä attribuutti.
- liikuntarajoitteinen : Käyttäjä voi olla mahdollista estää valitsemalla vaihtoehdon valintaruudusta. Tämä määrite poistaa yhdistelmäruudun käytöstä.
Syntaksi:
Katsotaanpa kuinka luodaan yhdistelmälaatikko, jossa on tärkeitä ominaisuuksia.
nimi='nimi'
label='label_name'
arvo={arvo_vaihtoehdosta}
placeholder='Ohjeteksti'
option={List_of_option}
onchange={handleChange} >
Tekniset tiedot:
Katsotaanpa vaiheet yhdistelmälaatikon luomiseksi ja sen kanssa työskentelemiseksi.
Luo JavaScript-tiedostoon luettelo vaihtoehdoista, joiden tunniste ja arvo ovat getter-menetelmän sisällä.
Luo muuttuja, joka tallentaa oletusvaihtoehdon.
Kirjoita kahvatoiminto, joka tallentaa käyttäjän käyttöliittymästä valitseman vaihtoehdon.
Luo HTML-tiedostoon yhdistelmälaatikko ja välitä attribuutit. Lisäksi meidän on välitettävä onchange()-tapahtumakäsittelijä, joka käsittelee yhdistelmälaatikon valinnat. Se ottaa 'js'-tiedostoon luodun 'Handler'-toiminnon.
Kaikissa esimerkeissä, joista aiomme keskustella tässä oppaassa, logiikka tarjotaan 'js'-koodina. Tämän jälkeen määritämme kuvakaappauksen, joka sisältää koko 'js'-koodin.
Esimerkki 1:
Luo Javascript-tiedostoon yhdistelmälaatikko, jossa on viisi aihetta (yksityiskohtaa). Määritä oletusarvoksi 'JAVA'. Käsittele yhdistelmäruutua handleSubjectsOnChange()-metodissa. Välitä arvo ja tiedot 'arvo ja asetukset' -attribuuteille HTML-tiedostossa tunnisteella ja ota komponentti käyttöön.
firstExample.html
< div luokkaa = 'slds-var-m-around_medium' >
etiketti = 'Valitse aihe:'
arvo = { arvo }
vaihtoehtoja = { yksityiskohdat }
vaihdossa = { handleSubjectsOnChange } >< / salama-yhdistelmälaatikko>
< br >
< s > Sinun aiheesi: < b > {arvo} < / b >< / s >
< / div >
< / salamakortti>
< / malli>
firstExample.js
// Luo oletusarvo - 'JAVA' Comboboxillearvo = 'JAVA' ;
// Näytä aiheet
saada yksityiskohdat ( ) {
// 5 aihetta
palata [ { etiketti : 'Java' , arvo : 'JAVA' } ,
{ etiketti : 'Python' , arvo : 'PYTHON' } ,
{ etiketti : 'HTML' , arvo : 'HTML' } ,
{ etiketti : 'C' , arvo : 'C' } ,
{ etiketti : 'C++' , arvo : 'C++' } ] ;
}
// Käsittele logiikkaa asettaaksesi arvon
handleSubjectsOnChange ( tapahtuma ) {
Tämä . arvo = tapahtuma. yksityiskohta . arvo ;
}
}
Koko koodi:
firstComponent.js-meta.xml
versio = '1.0' ?>< / tavoitteet>
< / LightningComponentBundle>
Lähtö:
Lisää tämä komponentti minkä tahansa objektin 'Record'-sivulle. HTML-tiedostossa näytämme arvon kappaletunnisteessa. Kun käyttäjä valitsee minkä tahansa vaihtoehdon, se näytetään lihavoituna. Oletusarvoisesti 'JAVA' on valittuna ja näytetään sen jälkeen, kun komponentti on renderöity sivulla.
Valitaan aiheeksi 'C'. 'C' palautetaan yhdistelmäruudun alle.
Esimerkki 2:
Tässä esimerkissä hahmonnamme eri komponentit Campaign Type -valintaluettelon arvojen perusteella (Kampanja-objektista).
- Jos kampanjatyyppi on 'Konferenssi', hahmonnamme tekstin palauttavan mallin – Kampanjan tila: SUUNNITELTU
- Jos kampanjatyyppi on 'Webinaari', hahmonnamme tekstin palauttavan mallin – Kampanjan tila: VALMIS
- Jos kampanjan tyyppi on 'Kumppanit', hahmonnamme mallin, joka palauttaa tekstin – Kampanjan tila: KÄYNNISSÄ
- Kampanjan tila: KESKEYTETTY muiden vaihtoehtojen osalta.
toinenEsimerkki.html
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
vaihtoehtoja = { CampaignTypeValues. tiedot .arvot }
vaihdossa = { kahvaVaihda } >
< / salama-yhdistelmälaatikko>
< / malli> br / >
< / div >
< br >< br >
< keskusta > Kampanjan tila: < b >< i > SUUNNITTELUA< / i >< / b > < / keskusta >
< / malli>
< keskusta > Kampanjan tila: < b >< i > VALMIS< / i >< / b > < / keskusta >
< / malli>
< keskusta > Kampanjan tila: < b >< i > KÄYNNISSÄ< / i >< / b > < / keskusta >
< / malli>
< keskusta > Kampanjan tila: < b >< i > KESKEYTETTY< / i >< / b > < / keskusta >
< / malli>
< / salamakortti>
< / malli>
secondExample.js
Tuomme Kampanja-objektin (Standard) muodossa KAMPANJA ja tyypin siitä TYYPPInä. Lightning/uiObjectInfoApista tuomme getPicklistValues ja getObjectInfo. Nämä saavat Tyyppi-kentässä olevat valintaluetteloarvot. Näitä käytetään yhdistelmälaatikon vaihtoehtoina. Seuraavat asiat käsitellään handleChange().
- Jos arvo === “Conference”, asetamme Conferenceval-muuttujan arvoksi tosi ja kahdeksi muuksi epätosi.
- Jos arvo === “Webinar”, asetamme webinarval-muuttujan arvoksi tosi ja kahdeksi muuksi epätosi.
- Jos arvo === “Partners”, asetamme partnerval-muuttujan arvoksi tosi ja kahdeksi muuksi epätosi.
- Jos arvo ei ole annetuissa vaihtoehdoissa, kaikki ovat vääriä.
tuonti KAMPANJA alkaen '@salesforce/schema/Campaign' ;
tuonti TYPE alkaen '@salesforce/schema/Campaign.Type' ;
tuonti { getPicklistValues } alkaen 'lightning/uiObjectInfoApi' ;
tuonti { getObjectInfo } alkaen 'lightning/uiObjectInfoApi' ;
viedä oletuksena luokkaa Toinen Esimerkki ulottuu Salamaelementti {
@ raidan arvo ;
// Hanki objekti
@ lanka ( getObjectInfo , { objectApiName : KAMPANJA } )
objectInfo ;
// Hae kampanjatyyppi - valintalista
@ lanka ( getPicklistValues , { RecordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TYYPPI } )
CampaignTypeValues ;
konferenssitila = väärä ;
webinaari = väärä ;
partnerval = väärä ;
muu = väärä ;
// Käsittele logiikkaa
kahvaVaihda ( tapahtuma ) {
Tämä . arvo = tapahtuma. kohde . arvo ;
jos ( Tämä . arvo === 'Konferenssi' ) {
// Näytä tila SUUNNITELTUNA
Tämä . konferenssitila = totta ;
Tämä . webinaari = väärä ;
Tämä . partnerval = väärä ;
}
muu jos ( Tämä . arvo === 'Webinaarit' ) {
// Näytä tila VALMIS
Tämä . webinaari = totta ;
Tämä . konferenssitila = väärä ;
Tämä . partnerval = väärä ;
}
muu jos ( Tämä . arvo === 'Kumppanit' ) {
// Näytä tila KÄYNNISSÄ
Tämä . webinaari = väärä ;
Tämä . konferenssitila = väärä ;
Tämä . partnerval = totta ;
}
muu {
// Näytä tila IN KESKEYTETTY
Tämä . webinaari = väärä ;
Tämä . konferenssitila = väärä ;
Tämä . partnerval = väärä ;
}
}
}
secondComponent.js-meta.xml
versio = '1.0' ?>< / tavoitteet>
< / LightningComponentBundle>
Lähtö:
Tyyppi - 'Conference'. Tila on siis 'SUUNNITELTU'.
Tyyppi - 'Webinaari'. Tila on siis 'VALMIS'.
Tyyppi - 'Kumppanit'. Tila on siis 'KÄYNNISSÄ'.
Tyyppi ei ole tarjotuissa vaihtoehdoissa. Tila on siis 'KESKETTY'.
Esimerkki 3:
Nyt luomme yhdistelmälaatikon, jossa on kampanjatietueet vaihtoehtoina. Jos valitsemme minkä tahansa vaihtoehdon, vastaava kampanjatyyppi palautetaan käyttöliittymään.
Ensin meidän on luotava Apex-luokka getCampaign()-menetelmällä. Tämä menetelmä palauttaa luettelon kaikista kampanjoista, joissa on tunnus, nimi, tyyppi ja tila.
CampaignRecords. apxcjulkista jakamalla luokkaa CampaignRecords {
@ Aura käytössä ( välimuistiin tallennettavissa = totta )
// Hae kampanjaluettelo
julkinen staattinen Lista < Kampanja > getCampaign ( ) {
palata [ SELECT Id , Nimi , Tyyppi , Tila kampanjasta ] ;
}
}
kolmasEsimerkki.html
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
etiketti = 'Valitse kampanjan nimi'
vaihtoehtoja = { Kampanjat }
arvo = { arvo }
vaihdossa = { käsittele vaihtoa }
>
< / salama-yhdistelmälaatikko>
< / div >< br >
< br >
< s > Tämän kampanjan kampanjatyyppi: < b > {arvo} < / b >< / s >
< / salamakortti>
< / malli>
kolmasEsimerkki.js
- Meidän on määritettävä menetelmä, joka saa luettelon Kampanjoista Connectcallback()-menetelmän sisällä. Ilmoita 'camps'-niminen matriisi ja tallenna tulos otsikolla Kampanjatunnus ja arvolla Campaign Type. Tämä matriisi on syöte kampanjaan Names (tämä on luotava kappaleiden koristeluohjelmalla).
- Palauta Campagnoptions() getter -menetelmässä campaignNames-taulukko. Joten combobox käyttää näitä vaihtoehtoja.
- Aseta valittu arvo handonchange()-käsittelijämenetelmässä.
tuonti getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
viedä oletuksena luokkaa Kolmas Esimerkki ulottuu Salamaelementti {
arvo = '' ;
@ seurata kampanjoiden nimet = [ ] ;
saada Kampanjat ( ) {
palata Tämä . Kampanjan nimet ;
}
// Lisää valinnat leiritaulukkoon Apexista.
//-tunniste on kampanjan nimi
// arvo on kampanjatyyppi
yhdistetty takaisinsoitto ( ) {
getCampaign ( )
. sitten ( tulos => {
anna leirit = [ ] ;
varten ( oli k = 0 ; k < tulos. pituus ; k ++ ) {
leirit. työntää ( { etiketti : tulos [ k ] . Nimi , arvo : tulos [ k ] . Tyyppi } ) ;
}
Tämä . Kampanjan nimet = leirit ;
} )
}
// Käsittele arvoa
käsittele vaihtoa ( tapahtuma ) {
Tämä . arvo = tapahtuma. yksityiskohta . arvo ;
}
}
Lähtö:
Valitaan tietue ja katsotaan tyyppi.
Johtopäätös
Opimme luomaan yhdistelmälaatikon LWC:ssä attribuuttien ja esimerkkien avulla. Ensin loimme yhdistelmälaatikon, jossa oli arvoluettelo, ja näytimme valitun arvon. Seuraavaksi renderöimme HTML-mallin valitun arvon perusteella ehdollisen renderöinnillä. Lopuksi opimme luomaan yhdistelmäruudun asetukset olemassa olevista Salesforce-tietueista ja näyttämään niihin liittyvät kentät käyttöliittymässä.