Jei „Salesforce LWC“ norite leisti vartotojui pasirinkti parinktį iš nurodyto parinkčių sąrašo, naudojamas kombinuotasis laukelis. Šiame vadove su pavyzdžiais aptarsime, kaip sukurti kombinuotąjį laukelį ir įvairius atributus, kuriuos palaiko kombinuotasis laukelis.
Combobox
Iš esmės kombinuotasis laukelis yra tik skaitomas laukas, kuriame pateikiama įvestis, leidžianti pasirinkti parinktį iš nurodytų parinkčių. Tai galime sukurti naudodami „lightning-combobox“ žymą. Atributai yra greitis vienas po kito, kurį skiria erdvė. Aptarkime kai kuriuos atributus, kurių reikia kuriant kombinuotąjį laukelį.
- etiketė – Tai naudojama jūsų kombinuotojo laukelio etiketei (tekstui) nurodyti.
- galimybės – Kiekviena parinktis turi atributus „etiketė“ ir „vertė“. Galime nurodyti kelias parinktis sąraše, atskirtame kableliais.
- vietos rezervuaras : Prieš pasirinkdamas parinktį, vartotojas turi žinoti su parinktimis susijusią informaciją. Taigi, šis atributas yra nurodytas.
- reikalaujama : kai kuriais atvejais privaloma pasirinkti parinktį. Nurodydami šį atributą galime tai padaryti reikalingu.
- neįgalus : gali būti įmanoma užkirsti kelią vartotojui pasirinkus parinktį žymimajame laukelyje. Šis atributas išjungia kombinuotąjį laukelį.
Sintaksė:
Pažiūrėkime, kaip sukurti kombinuotąjį laukelį su kai kuriais svarbiais atributais.
<žaibo derinys
vardas = 'vardas'
etiketė='etiketės_pavadinimas'
value={value_from_the_option}
placeholder='Pagalbos tekstas'
options={Parinkčių_sąrašas}
onchange={handleChange} >
Specifikacija:
Pažiūrėkime, kaip sukurti kombinuotąjį laukelį ir dirbti su juo.
„JavaScript“ faile sukurkite parinkčių sąrašą su etikete ir verte metodo „getter“ viduje.
Sukurkite kintamąjį, kuriame saugoma numatytoji parinktis.
Parašykite rankenos funkciją, kurioje saugoma parinktis, kurią vartotojas pasirinko iš vartotojo sąsajos.
HTML faile sukurkite jungtinį laukelį ir perduokite atributus. Be to, turime perduoti onchange() įvykių tvarkyklę, kuri tvarko kombinuotojo laukelio parinktis. Tam reikia funkcijos „Handler“, sukurtos „js“ faile.
Visuose pavyzdžiuose, kuriuos aptarsime šiame vadove, logika bus pateikta kaip „js“ kodas. Po to nurodome ekrano kopiją, kurioje yra visas „js“ kodas.
1 pavyzdys:
Sukurkite kombinuotąjį laukelį su penkiomis temomis (išsamiais duomenimis) „Javascript“ faile. Nurodykite numatytąją reikšmę kaip „JAVA“. Tvarkykite kombinuotąjį langelį HandSubjectsOnChange() metodu. Perduokite vertę ir išsamią informaciją HTML failo su etikete atributams „vertė ir parinktys“ ir įdiekite komponentą.
pirmasisPavyzdys.html
<šablonas><žaibo korta titulą = „Temų kombinuotasis langelis“ >
< div klasė = „slds-var-m-around_medium“ >
<žaibo derinys
etiketė = 'Pasirinkite temą:'
vertė = { vertė }
galimybės = { detales }
pakeitimas = { rankenaSubjectsOnChange } >< / žaibo kombinuotas dėžė>
< br >
< p > Jūsų tema: < b > {value} < / b >< / p >
< / div >
< / žaibo korta>
< / šablonas>
firstExample.js
// Sukurkite numatytąją reikšmę – „JAVA“ Comboboxvertė = 'JAVA' ;
// Parodykite dalykus
gauti detales ( ) {
// 5 dalykai
grąžinti [ { etiketė : 'Java' , vertė : 'JAVA' } ,
{ etiketė : 'Python' , vertė : 'PYTHON' } ,
{ etiketė : 'HTML' , vertė : 'HTML' } ,
{ etiketė : 'C' , vertė : 'C' } ,
{ etiketė : 'C++' , vertė : 'C++' } ] ;
}
// Naudokite logiką, kad nustatytumėte reikšmę
rankenaSubjectsOnChange ( įvykis ) {
tai . vertė = renginys. detalė . vertė ;
}
}
Visas kodas:
firstComponent.js-meta.xml
versija = '1.0' ?>< / taikiniai>
< / LightningComponentBundle>
Išvestis:
Pridėkite šį komponentą į bet kurio objekto puslapį „Įrašyti“. HTML faile reikšmę rodome pastraipos žymoje. Kai vartotojas pasirenka bet kurią parinktį, ji bus rodoma paryškinta. Pagal numatytuosius nustatymus „JAVA“ pasirenkama ir rodoma, kai komponentas pateikiamas puslapyje.
Pasirinkime temą kaip „C“. „C“ grąžinamas po kombinuotu laukeliu.
2 pavyzdys:
Šiame pavyzdyje pateiksime skirtingus komponentus pagal kampanijos tipo pasirinkimo sąrašo reikšmes (iš objekto Kampanija).
- Jei kampanijos tipas yra „Konferencija“, pateiksime šabloną, kuris grąžins tekstą – Kampanijos būsena: PLANUOTA
- Jei kampanijos tipas yra „Webinar“, pateiksime šabloną, kuris grąžins tekstą – Kampanijos būsena: UŽBAIGTA
- Jei kampanijos tipas yra „Partneriai“, pateiksime šabloną, kuris grąžins tekstą – Kampanijos būsena: VYKSTA
- Kampanijos būsena: ATŠAUKTI likusioms parinktims.
secondExample.html
<šablonas><žaibo korta titulą = 'KAMPANIJOS TIPAS' piktograma - vardas = 'standartas:kampanija' >
< div klasė = „slds-var-m-around_medium“ stilius = 'aukštis: 20 piks.; plotis: 400 piks.' >
<šablonas sėkmės:if = { CampaignTypeValues. duomenis } >
<žaibo derinys vertė = { vertė }
galimybės = { CampaignTypeValues. duomenis .vertybes }
pakeitimas = { rankenaKeisti } >
< / žaibo kombinuotas dėžė>
< / šablonas>< br / >
< / div >
< br >< br >
<šablonas sėkmės:if = { konferencijos } >
< centras > Kampanijos būsena: < b >< i > PLANUOTA< / i >< / b > < / centras >
< / šablonas>
<šablonas sėkmės:elseif = { internetinis seminaras } >
< centras > Kampanijos būsena: < b >< i > UŽBAIGTA< / i >< / b > < / centras >
< / šablonas>
<šablonas sėkmės:elseif = { partnerval } >
< centras > Kampanijos būsena: < b >< i > VYKSTA< / i >< / b > < / centras >
< / šablonas>
<šablonas sėkmės:else>
< centras > Kampanijos būsena: < b >< i > NUTRAUKTA< / i >< / b > < / centras >
< / šablonas>
< / žaibo korta>
< / šablonas>
secondExample.js
Kampanijos objektą (standartinį) importuojame kaip CAMPAIGN ir tipą iš jo kaip TIPAS. Iš lightning/uiObjectInfoApi importuojame getPicklistValues ir getObjectInfo. Jie gaus pasirinkimo sąrašo reikšmes, kurias galima rasti lauke Tipas. Jie bus naudojami kaip kombinuotojo dėžutės parinktys. RankenaChange().
- Jei reikšmė === „Conference“, konferencijos kintamąjį nustatome į „true“, o kitus du – kaip „false“.
- Jei reikšmė === 'Webinar', mes nustatome webinarval kintamąjį į 'true', o kitus du - kaip 'false'.
- Jei reikšmė === „Partners“, partnerio kintamąjį nustatome į „true“, o kitus du – kaip „false“.
- Jei reikšmės pateiktose parinktyse nėra, visos yra klaidingos.
importuoti KAMPANIJA nuo „@salesforce/schema/Campaign“ ;
importuoti TYPE nuo „@salesforce/schema/Campaign.Type“ ;
importuoti { getPicklistValues } iš „lightning/uiObjectInfoApi“ ;
importuoti { gautiObjectInfo } iš „lightning/uiObjectInfoApi“ ;
eksportuoti numatytas klasė AntrasPavyzdys tęsiasi Žaibo elementas {
@ takelio vertė ;
// Gaukite objektą
@ viela ( gautiObjectInfo , { objectApiName : KAMPANIJA } )
Objekto informacija ;
// Gaukite kampanijos tipą – pasirinkimų sąrašą
@ viela ( getPicklistValues , { RecordTypeId : „$objectInfo.data.defaultRecordTypeId“ , fieldApiName : TIPAS } )
CampaignTypeValues ;
konferencijos = klaidinga ;
internetinis seminaras = klaidinga ;
partnerval = klaidinga ;
kitas = klaidinga ;
// Tvarkyti logiką
rankenaKeisti ( įvykis ) {
tai . vertė = įvykis. taikinys . vertė ;
jeigu ( tai . vertė === 'konferencija' ) {
// Rodyti būseną kaip PLANUOTA
tai . konferencijos = tiesa ;
tai . internetinis seminaras = klaidinga ;
tai . partnerval = klaidinga ;
}
Kitas jeigu ( tai . vertė === 'Webinars' ) {
// Rodyti būseną kaip UŽBAIGTA
tai . internetinis seminaras = tiesa ;
tai . konferencijos = klaidinga ;
tai . partnerval = klaidinga ;
}
Kitas jeigu ( tai . vertė === 'Partneriai' ) {
// Rodyti būseną kaip VYKSTA
tai . internetinis seminaras = klaidinga ;
tai . konferencijos = klaidinga ;
tai . partnerval = tiesa ;
}
Kitas {
// Rodyti būseną kaip NUTRAUKTA
tai . internetinis seminaras = klaidinga ;
tai . konferencijos = klaidinga ;
tai . partnerval = klaidinga ;
}
}
}
secondComponent.js-meta.xml
versija = '1.0' ?>< / taikiniai>
< / LightningComponentBundle>
Išvestis:
Tipas – „Konferencija“. Taigi, būsena yra „PLANUOTA“.
Tipas – „Webinar“. Taigi, būsena yra „BAIGTA“.
Tipas – „Partneriai“. Taigi, būsena yra „VYKSTA“.
Tipo nėra pateiktose parinktyse. Taigi, būsena yra „NUTRAUKTA“.
3 pavyzdys:
Dabar sukuriame jungtinį laukelį su kampanijos įrašais kaip parinktimis. Jei pasirinksime bet kurią parinktį, NS bus grąžintas atitinkamas kampanijos tipas.
Pirmiausia turime sukurti Apex klasę naudodami getCampaign() metodą. Šis metodas grąžina visų kampanijų sąrašą su ID, pavadinimu, tipu ir būsena.
Kampanijos įrašai. apxcviešas su dalijimusi klasė Kampanijos įrašai {
@ Aura įjungta ( talpykloje = tiesa )
// Gaukite kampanijų sąrašą
viešas statinis Sąrašas < Kampanija > getCampaign ( ) {
grąžinti [ PASIRINKTI ID , vardas , Tipas , Būsena iš kampanijos ] ;
}
}
trečiasPavyzdys.html
<šablonas><žaibo korta titulą = 'KAMPANIJOS TIPAS' piktograma - vardas = 'standartas:kampanija' >
< div klasė = „slds-var-m-around_medium“ stilius = 'aukštis: 20 piks.; plotis: 400 piks.' >
<žaibo derinys vardas = 'Kampanija'
etiketė = 'Pasirinkite kampanijos pavadinimą'
galimybės = { Kampanijos }
vertė = { vertė }
pakeitimas = { tvarkyti pakeitimą }
>
< / žaibo kombinuotas dėžė>
< / div >< br >
< br >
< p > Šios reklamos kampanijos tipas: < b > {value} < / b >< / p >
< / žaibo korta>
< / šablonas>
trečiasPavyzdys.js
- Turime nurodyti metodą, kuris gautų kampanijų sąrašą, esantį prisijungus atgal () metodu. Paskelbkite masyvą pavadinimu „camps“ ir išsaugokite rezultatą su etikete kaip kampanijos ID ir verte kaip kampanijos tipą. Šis masyvas yra kampanijosNames įvestis (tai turi būti sukurta naudojant takelio dekoratorių).
- Naudodami Campagnoptions() getter metodą, grąžinkite kampanijosNames masyvą. Taigi, kombinuotasis laukelis naudoja šias parinktis.
- Nustatykite pasirinktą reikšmę handonchange() tvarkyklės metodu.
importuoti gautiKampaniją iš „@salesforce/apex/CampaignRecords.getCampaign“ ;
eksportuoti numatytas klasė TrečiasPavyzdys tęsiasi Žaibo elementas {
vertė = '' ;
@ stebėti kampanijų pavadinimus = [ ] ;
gauti Kampanijos ( ) {
grąžinti tai . kampanijos pavadinimai ;
}
// Pridėkite parinktis prie stovyklų masyvo iš Apex.
// etiketė bus kampanijos pavadinimas
// reikšmė bus kampanijos tipas
prijungtas atgalinis skambutis ( ) {
getCampaign ( )
. tada ( rezultatas => {
tegu stovyklos = [ ] ;
dėl ( buvo k = 0 ; k < rezultatas. ilgio ; k ++ ) {
stovyklos. stumti ( { etiketė : rezultatas [ k ] . vardas , vertė : rezultatas [ k ] . Tipas } ) ;
}
tai . kampanijos pavadinimai = stovyklos ;
} )
}
// Tvarkykite vertę
tvarkyti pakeitimą ( įvykis ) {
tai . vertė = įvykis. detalė . vertė ;
}
}
Išvestis:
Pasirinkime įrašą ir pamatykime tipą.
Išvada
Sužinojome, kaip LWC sukurti kombinuotąjį laukelį su atributais ir pavyzdžiais. Pirmiausia sukūrėme kombinuotąjį laukelį su reikšmių sąrašu ir parodėme pasirinktą reikšmę. Toliau pateikiame HTML šabloną pagal pasirinktą reikšmę, taikant sąlyginį atvaizdavimą. Galiausiai sužinojome, kaip iš esamų „Salesforce“ įrašų sukurti kombinuotojo laukelio parinktis ir pateikti susijusius laukus vartotojo sąsajoje.