V Salesforce LWC, če želite uporabniku dovoliti, da izbere možnost z podanega seznama možnosti, se uporabi kombinirano polje. V tem priročniku bomo s primeri razpravljali o tem, kako ustvariti kombinirano polje in različne atribute, ki jih podpira kombinirano polje.
Kombinirano polje
V bistvu je kombinirano polje polje samo za branje, ki omogoča vnos za izbiro možnosti med podanimi možnostmi. To lahko ustvarimo z oznako lightning-combobox. Atributi so hitrost drug za drugim, ki so ločeni s presledkom. Pogovorimo se o nekaterih atributih, ki so potrebni pri ustvarjanju kombiniranega polja.
- oznaka – To se uporablja za določitev oznake (besedila) za vaše kombinirano polje.
- opcije – Vsaka možnost ima atributa »label« in »value«. Več možnosti lahko določimo na seznamu, ločenem z vejico.
- rezervirano mesto : Pred izbiro možnosti mora uporabnik poznati informacije v zvezi z možnostmi. Torej je ta atribut določen.
- potrebno : V nekaterih primerih je obvezno izbrati možnost. Zahtevano lahko naredimo tako, da podamo ta atribut.
- onemogočeno : Uporabniku je mogoče preprečiti tako, da izberete možnost v potrditvenem polju. Ta atribut onemogoči kombinirano polje.
Sintaksa:
Oglejmo si, kako ustvariti kombinirano polje z nekaterimi pomembnimi atributi.
ime='ime'
label='ime_oznake'
vrednost={vrednost_iz_možnosti}
placeholder='besedilo pomoči'
options={Seznam_možnosti}
onchange={handleChange} >
Specifikacija:
Oglejmo si korake za ustvarjanje kombiniranega polja in delo z njim.
V datoteki JavaScript ustvarite seznam možnosti z oznako in vrednostjo znotraj metode »getter«.
Ustvarite spremenljivko, ki shrani privzeto možnost.
Napišite funkcijo ročaja, ki shrani možnost, ki jo izbere uporabnik iz uporabniškega vmesnika.
V datoteki HTML ustvarite kombinirano polje in posredujte atribute. Prav tako moramo posredovati rutino za obravnavo dogodkov onchange(), ki obravnava možnosti v kombiniranem polju. Uporabi funkcijo »Handler«, ustvarjeno v datoteki »js«.
V vseh primerih, o katerih bomo razpravljali v tem priročniku, bo logika podana kot koda »js«. Po tem določimo posnetek zaslona, ki vključuje celotno kodo »js«.
Primer 1:
Ustvarite kombinirano polje s petimi predmeti (podrobnostmi) v datoteki Javascript. Podajte privzeto vrednost kot »JAVA«. Obravnavajte kombinirano polje v metodi handleSubjectsOnChange(). Posredujte vrednost in podrobnosti atributom »vrednost in možnosti« v datoteki HTML z oznako in razmestite komponento.
firstExample.html
< div razred = 'slds-var-m-around_medium' >
oznaka = 'Izberite svoj predmet:'
vrednost = { vrednost }
opcije = { podrobnosti }
onchange = { handleSubjectsOnChange } >< / lightning-combobox>
< št >
< str > Vaša zadeva: < b > {value} < / b >< / str >
< / div >
< / strela-kartica>
< / predloga>
firstExample.js
// Ustvari privzeto vrednost - 'JAVA' za kombinirano poljevrednost = 'JAVA' ;
// Pokaži subjekte
dobiti podrobnosti ( ) {
// 5 predmetov
vrnitev [ { oznaka : 'Java' , vrednost : 'JAVA' } ,
{ oznaka : 'Python' , vrednost : 'PYTHON' } ,
{ oznaka : 'HTML' , vrednost : 'HTML' } ,
{ oznaka : 'C' , vrednost : 'C' } ,
{ oznaka : 'C++' , vrednost : 'C++' } ] ;
}
// Obravnava logike za nastavitev vrednosti
handleSubjectsOnChange ( dogodek ) {
to . vrednost = dogodek. detajl . vrednost ;
}
}
Celotna koda:
firstComponent.js-meta.xml
različica = '1,0' ?>< / cilji>
< / LightningComponentBundle>
Izhod:
Dodajte to komponento na stran »Zapis« katerega koli predmeta. V datoteki HTML prikažemo vrednost v oznaki odstavka. Ko uporabnik izbere katero koli možnost, bo prikazana krepko. Privzeto je izbrana »JAVA« in prikazana, ko je komponenta upodobljena na strani.
Izberimo predmet kot 'C'. »C« se vrne pod kombinirano polje.
Primer 2:
V tem primeru bomo upodobili različne komponente na podlagi vrednosti izbirnega seznama vrste oglaševalske akcije (iz objekta oglaševalske akcije).
- Če je vrsta akcije »Konferenca«, bomo upodobili predlogo, ki vrne besedilo – Status akcije: NAČRTOVANO
- Če je vrsta akcije »Spletni seminar«, bomo upodobili predlogo, ki vrne besedilo – Status akcije: KONČANO
- Če je vrsta akcije »Partnerji«, bomo upodobili predlogo, ki vrne besedilo – Stanje akcije: V POTEKU
- Status akcije: PREKINANA za ostale možnosti.
secondExample.html
< div razred = 'slds-var-m-around_medium' stil = 'višina:20px; širina:400px' >
=
opcije = { CampaignTypeValues. podatke .vrednote }
onchange = { handleChange } >
< / lightning-combobox>
< / predloga>< št / >
< / div >
< št >< št >
= { conferenceval } >
< center > Stanje akcije: < b >< jaz > NAČRTOVANO< / jaz >< / b > < / center >
< / predloga>
= { webinarval } >
< center > Stanje akcije: < b >< jaz > KONČANO< / jaz >< / b > < / center >
< / predloga>
= { partnerval } >
< center > Stanje akcije: < b >< jaz > V TEKU< / jaz >< / b > < / center >
< / predloga>
< center > Stanje akcije: < b >< jaz > PREKINITE< / jaz >< / b > < / center >
< / predloga>
< / strela-kartica>
< / predloga>
secondExample.js
Objekt Campaign (Standard) uvozimo kot CAMPAIGN in Type iz njega kot TYPE. Iz lightning/uiObjectInfoApi uvozimo getPicklistValues in getObjectInfo. Ti bodo dobili vrednosti izbirnega seznama, ki so na voljo v polju Vrsta. Te bodo uporabljene kot možnosti za kombinirano polje. Naslednje se obravnavajo v handleChange().
- Če je vrednost === “Conference”, nastavimo spremenljivko conferenceval na true, ostali dve pa na false.
- Če je vrednost === “Webinar”, nastavimo spremenljivko webinarval na true, ostali dve pa na false.
- Če je vrednost === »Partnerji«, spremenljivko partnerval nastavimo na true, ostali dve pa na false.
- Če vrednosti ni v danih možnostih, so vse napačne.
uvoz AKCIJA od '@salesforce/schema/Campaign' ;
uvoz VRSTA iz '@salesforce/schema/Campaign.Type' ;
uvoz { getPicklistValues } od 'lightning/uiObjectInfoApi' ;
uvoz { getObjectInfo } od 'lightning/uiObjectInfoApi' ;
izvoz privzeto razred SecondExample se razteza LightningElement {
@ vrednost sledi ;
// Pridobite predmet
@ žica ( getObjectInfo , { objectApiName : AKCIJA } )
objectInfo ;
// Pridobite vrsto oglaševalske akcije – izbirni seznam
@ žica ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : VRSTA } )
CampaignTypeValues ;
conferenceval = lažno ;
webinarval = lažno ;
partnerval = lažno ;
drugo = lažno ;
// Ravnanje z logiko
handleChange ( dogodek ) {
to . vrednost = dogodek. tarča . vrednost ;
če ( to . vrednost === 'konferenca' ) {
// Prikaži stanje kot NAČRTOVANO
to . conferenceval = prav ;
to . webinarval = lažno ;
to . partnerval = lažno ;
}
drugače če ( to . vrednost === 'Spletni seminarji' ) {
// Prikaži stanje kot DOKONČANO
to . webinarval = prav ;
to . conferenceval = lažno ;
to . partnerval = lažno ;
}
drugače če ( to . vrednost === 'Partnerji' ) {
// Prikaži stanje kot V TEKU
to . webinarval = lažno ;
to . conferenceval = lažno ;
to . partnerval = prav ;
}
drugače {
// Prikaži status kot V PREKINAN
to . webinarval = lažno ;
to . conferenceval = lažno ;
to . partnerval = lažno ;
}
}
}
secondComponent.js-meta.xml
različica = '1,0' ?>< / cilji>
< / LightningComponentBundle>
Izhod:
Vrsta - 'Konferenca'. Torej, stanje je 'NAČRTOVANO'.
Tip – “Webinar”. Torej, stanje je 'KONČANO'.
Vrsta - 'Partnerji'. Torej, status je 'V TEKU'.
Vrsta ni v ponujenih možnostih. Torej, stanje je 'PREKINITE'.
Primer 3:
Zdaj ustvarimo kombinirano polje z možnostmi Zapisi oglaševalske akcije. Če izberemo katero koli možnost, bo v uporabniškem vmesniku vrnjena ustrezna vrsta akcije.
Najprej moramo ustvariti razred Apex z metodo getCampaign(). Ta metoda vrne seznam vseh oglaševalskih akcij z ID-jem, imenom, vrsto in statusom.
CampaignRecords. apxcjavno z deljenjem razred CampaignRecords {
@ AuraOmogočeno ( predpomnilnik = prav )
// Pridobite seznam oglaševalskih akcij
javnosti statična Seznam < Kampanja > getCampaign ( ) {
vrnitev [ IZBERI ID , Ime , Vrsta , Stanje iz kampanje ] ;
}
}
thirdExample.html
< div razred = 'slds-var-m-around_medium' stil = 'višina:20px; širina:400px' >
oznaka = 'Izberite ime oglaševalske akcije'
opcije = { Možnosti oglaševalske akcije }
vrednost = { vrednost }
onchange = { handleonchange }
>
< / lightning-combobox>
< / div >< št >
< št >
< str > Vrsta akcije za to akcijo: < b > {value} < / b >< / str >
< / strela-kartica>
< / predloga>
thirdExample.js
- Določiti moramo metodo, ki pridobi seznam oglaševalskih akcij znotraj metodeconnectedcallback(). Navedite matriko z imenom »camps« in shranite rezultat z oznako kot ID akcije in vrednostjo kot Vrsta akcije. Ta matrika je vhod v CampaignNames (to je treba ustvariti z dekoratorjem sledi).
- V metodi pridobivanja Campaignoptions() vrnite matriko CampaignNames. Kombinirano polje torej uporablja te možnosti.
- Nastavite izbrano vrednost v metodi obdelovalca handleonchange().
uvoz getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
izvoz privzeto razred Tretji Primer se razteza LightningElement {
vrednost = '' ;
@ sledenje CampaignNames = [ ] ;
dobiti Možnosti oglaševalske akcije ( ) {
vrnitev to . CampaignNames ;
}
// Dodajte možnosti v matriko taborišč iz Apexa.
// oznaka bo Ime akcije
// vrednost bo vrsta oglaševalske akcije
povezan Povratni klic ( ) {
getCampaign ( )
. potem ( rezultat => {
naj taborišča = [ ] ;
za ( je bil k = 0 ; k < rezultat. dolžina ; k ++ ) {
taborišča. potiskati ( { oznaka : rezultat [ k ] . Ime , vrednost : rezultat [ k ] . Vrsta } ) ;
}
to . CampaignNames = taborišča ;
} )
}
// Obravnava vrednosti
handleonchange ( dogodek ) {
to . vrednost = dogodek. detajl . vrednost ;
}
}
Izhod:
Izberimo zapis in poglejmo vrsto.
Zaključek
Naučili smo se ustvariti kombinirano polje v LWC z atributi in primeri. Najprej smo ustvarili kombinirano polje s seznamom vrednosti in prikazali izbrano vrednost. Nato s pogojnim upodabljanjem upodobimo predlogo HTML na podlagi izbrane vrednosti. Nazadnje smo se naučili, kako ustvariti možnosti za kombinirano polje iz obstoječih zapisov Salesforce in prikazati povezana polja v uporabniškem vmesniku.