Kui soovite Salesforce LWC-s lubada kasutajal valida määratud valikute loendist suvandi, kasutatakse liitkasti. Selles juhendis käsitleme liitkasti loomist ja liitkasti toetatavaid erinevaid atribuute koos näidetega.
Kombokast
Põhimõtteliselt on liitkast kirjutuskaitstud väli, mis annab sisendi määratud valikute hulgast suvandi valimiseks. Saame selle luua välkkombinatsiooni sildi abil. Atribuudid on üksteise järel kiirus, mis on eraldatud tühikuga. Räägime mõnest liitkasti loomisel nõutavatest atribuutidest.
- silt – Seda kasutatakse liitkasti sildi (teksti) määramiseks.
- valikuid – Iga suvand võtab atribuudid 'silt' ja 'väärtus'. Komaga eraldatud loendis saame määrata mitu valikut.
- kohatäide : enne valiku valimist peab kasutaja teadma valikutega seotud teavet. Niisiis, see atribuut on täpsustatud.
- nõutud : mõnel juhul on valiku valimine kohustuslik. Selle atribuudi määramisega saame selle vajalikuks muuta.
- puudega : kasutajat saab takistada, valides märkeruudust vastava valiku. See atribuut keelab liitkasti.
Süntaks:
Vaatame, kuidas luua liitkasti mõne olulise atribuudiga.
nimi = 'nimi'
etikett='sildi_nimi'
väärtus={value_from_the_option}
placeholder='Abitekst'
options={List_of_tions}
onchange={handleChange} >
Spetsifikatsioon:
Vaatame liitkasti loomise ja sellega töötamise samme.
Looge JavaScripti failis valikute loend, millel on silt ja väärtus meetodi 'getter' sees.
Loo muutuja, mis salvestab vaikevaliku.
Kirjutage käepideme funktsioon, mis salvestab kasutaja kasutajaliidesest valitud valiku.
Looge HTML-failis liitkast ja edastage atribuudid. Samuti peame edastama onchange() sündmuste töötleja, mis käsitleb liitkasti valikuid. See võtab failis 'js' loodud funktsiooni 'Handler'.
Kõigis näidetes, mida me selles juhendis käsitleme, esitatakse loogika js-koodina. Pärast seda määrame ekraanipildi, mis sisaldab kogu 'js' koodi.
Näide 1:
Looge Javascripti failis liitkast viie teemaga (üksikasjadega). Määrake vaikeväärtus 'JAVA'. Käsitsege liitkasti HandSubjectsOnChange() meetodis. Edastage väärtus ja üksikasjad HTML-failis sildiga atribuutidele 'väärtus ja valikud' ning juurutage komponent.
firstExample.html
< div klass = 'slds-var-m-around_medium' >
silt = 'Valige oma teema:'
väärtus = { väärtus }
valikuid = { üksikasjad }
vahelduseks = { käepideme SubjectsOnChange } >< / välk-liitkast>
< br >
< lk > Teie teema: < b > {value} < / b >< / lk >
< / div >
< / välk-kaart>
< / mall>
firstExample.js
// Loo liitkasti vaikeväärtus – 'JAVA'väärtus = 'JAVA' ;
// Näita teemasid
saada üksikasjad ( ) {
// 5 ainet
tagasi [ { silt : 'Java' , väärtus : 'JAVA' } ,
{ silt : 'Python' , väärtus : 'PYTHON' } ,
{ silt : 'HTML' , väärtus : 'HTML' } ,
{ silt : 'C' , väärtus : 'C' } ,
{ silt : 'C++' , väärtus : 'C++' } ] ;
}
// Käsitsege väärtuse määramiseks loogikat
käepideme SubjectsOnChange ( sündmus ) {
see . väärtus = sündmus. detail . väärtus ;
}
}
Kogu kood:
firstComponent.js-meta.xml
versioon = '1.0' ?>< / sihtmärgid>
< / LightningComponentBundle>
Väljund:
Lisage see komponent mis tahes objekti lehele 'Salvesta'. HTML-failis kuvame väärtuse lõigu märgendis. Kui kasutaja valib mis tahes valiku, kuvatakse see paksus kirjas. Vaikimisi valitakse „JAVA” ja kuvatakse pärast komponendi renderdamist lehel.
Valime teemaks 'C'. 'C' tagastatakse liitkasti alla.
Näide 2:
Selles näites renderdame erinevad komponendid kampaaniatüübi valikuloendi väärtuste põhjal (objektist Campaign).
- Kui kampaania tüüp on „Konverents”, renderdame malli, mis tagastab teksti – Kampaania olek: PLANEERITUD
- Kui kampaania tüüp on „Veebiseminar”, renderdame malli, mis tagastab teksti – Kampaania olek: LÕPETUD
- Kui kampaania tüüp on „Partnerid”, renderdame malli, mis tagastab teksti – Kampaania olek: KÄESOLES
- Kampaania olek: ülejäänud valikute jaoks katkestatud.
secondExample.html
< div klass = 'slds-var-m-around_medium' stiilis = 'kõrgus: 20 pikslit; laius: 400 pikslit' >
valikuid = { CampaignTypeValues. andmeid .väärtused }
vahelduseks = { käepideMuuda } >
< / välk-liitkast>
< / mall>< br / >
< / div >
< br >< br >
< Keskus > Kampaania olek: < b >< i > PLAANID< / i >< / b > < / Keskus >
< / mall>
< Keskus > Kampaania olek: < b >< i > VALMIS< / i >< / b > < / Keskus >
< / mall>
< Keskus > Kampaania olek: < b >< i > KÄESOLES< / i >< / b > < / Keskus >
< / mall>
< Keskus > Kampaania olek: < b >< i > ABORTID< / i >< / b > < / Keskus >
< / mall>
< / välk-kaart>
< / mall>
secondExample.js
Impordime Kampaania objekti (Standard) kui KAMPAANIA ja Tüübi sellest tüübina TÜÜP. Lightning/uiObjectInfoApi-st impordime getPicklistValues ja getObjectInfo. Need saavad väljal Tüüp saadaolevad valikuloendi väärtused. Neid kasutatakse liitkasti valikutena. HandChange() käsitleb järgmist.
- Kui väärtus === “Conference”, määrame Conferenceval muutuja väärtuseks Tõene ja ülejäänud kahele väärtusele Väär.
- Kui väärtus === “Veebiseminar”, määrame veebiseminari muutuja väärtuseks Tõene ja ülejäänud kahele väärtusele Väär.
- Kui väärtus === “Partners”, seame partnervali muutuja väärtuseks Tõene ja ülejäänud kahe väärtuseks Väär.
- Kui väärtust antud valikutes pole, on kõik valed.
importida KAMPAANIA alates „@salesforce/schema/Campaign” ;
importida TYPE alates '@salesforce/schema/Campaign.Type' ;
importida { getPicklistValues } alates 'lightning/uiObjectInfoApi' ;
importida { hankigeObjectInfo } alates 'lightning/uiObjectInfoApi' ;
eksportida vaikimisi klass TeineNäide ulatub Välguelement {
@ raja väärtus ;
// Hangi objekt
@ traat ( hankigeObjectInfo , { objectApiName : KAMPAANIA } )
objektiinfo ;
// Hankige kampaania tüüp – valikuloend
@ traat ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TÜÜP } )
CampaignTypeValues ;
konverentsival = vale ;
veebiseminar = vale ;
partnerval = vale ;
muud = vale ;
// Käsitle loogikat
käepideMuuda ( sündmus ) {
see . väärtus = sündmus. sihtmärk . väärtus ;
kui ( see . väärtus === 'konverents' ) {
// Kuva olek PLANEERITUD
see . konverentsival = tõsi ;
see . veebiseminar = vale ;
see . partnerval = vale ;
}
muidu kui ( see . väärtus === 'Veebiseminarid' ) {
// Kuva olek LÕPPENA
see . veebiseminar = tõsi ;
see . konverentsival = vale ;
see . partnerval = vale ;
}
muidu kui ( see . väärtus === 'Partnerid' ) {
// Kuva olek KÄES
see . veebiseminar = vale ;
see . konverentsival = vale ;
see . partnerval = tõsi ;
}
muidu {
// Kuva olek KAETUD
see . veebiseminar = vale ;
see . konverentsival = vale ;
see . partnerval = vale ;
}
}
}
secondComponent.js-meta.xml
versioon = '1.0' ?>< / sihtmärgid>
< / LightningComponentBundle>
Väljund:
Tüüp - 'Konverents'. Seega on olek 'PLANEERITUD'.
Tüüp - 'Veebiseminar'. Seega on olek 'VALMIS'.
Tüüp - 'Partnerid'. Seega on olek 'KÄESOLES'.
Tüüp pole pakutavate valikute hulgas. Seega on olek 'KATKETATUD'.
Näide 3:
Nüüd loome liitkasti, mille valikuteks on kampaaniakirjed. Kui valime suvalise valiku, tagastatakse kasutajaliideses vastav kampaaniatüüp.
Esiteks peame meetodiga getCampaign() looma Apexi klassi. See meetod tagastab kõigi kampaaniate loendi koos ID, nime, tüübi ja olekuga.
CampaignRecords. apxcavalik koos jagamisega klass CampaignRecords {
@ Aura lubatud ( vahemällu salvestatav = tõsi )
// Hankige kampaaniate loend
avalik staatiline Nimekiri < Kampaania > getCampaign ( ) {
tagasi [ VALI ID , Nimi , Tüüp , Staatus kampaaniast ] ;
}
}
kolmasNäide.html
< div klass = 'slds-var-m-around_medium' stiilis = 'kõrgus: 20 pikslit; laius: 400 pikslit' >
silt = 'Vali kampaania nimi'
valikuid = { Kampaaniad }
väärtus = { väärtus }
vahelduseks = { vahetamist käsitsema }
>
< / välk-liitkast>
< / div >< br >
< br >
< lk > Selle kampaania kampaania tüüp: < b > {value} < / b >< / lk >
< / välk-kaart>
< / mall>
kolmasExample.js
- Peame määrama meetodi, mis hangib ühendatud callback() meetodis kampaaniate loendi. Deklareerige massiiv nimega 'camps' ja salvestage tulemus sildiga kampaania ID ja väärtusega kampaania tüüp. See massiiv on kampaania Names sisend (see tuleb luua rajadekoraatoriga).
- Meetodis Campaignoptions() tagastage massiiv campaignNames. Niisiis, liitkast kasutab neid valikuid.
- Määrake valitud väärtus Handonchange() töötleja meetodis.
importida GetCampaign from „@salesforce/apex/CampaignRecords.getCampaign” ;
eksportida vaikimisi klass KolmasNäide ulatub Välguelement {
väärtus = '' ;
@ kampaanianimede jälgimine = [ ] ;
saada Kampaaniad ( ) {
tagasi see . kampaanianimed ;
}
// Lisage suvandid laagrite massiivi Apexist.
// silt on kampaania nimi
// väärtus on kampaania tüüp
ühendatud tagasihelistamine ( ) {
getCampaign ( )
. siis ( tulemus => {
las laagrid = [ ] ;
jaoks ( oli k = 0 ; k < tulemus. pikkus ; k ++ ) {
laagrid. suruma ( { silt : tulemus [ k ] . Nimi , väärtus : tulemus [ k ] . Tüüp } ) ;
}
see . kampaanianimed = laagrid ;
} )
}
// Käsitsege väärtust
vahetamist käsitsema ( sündmus ) {
see . väärtus = sündmus. detail . väärtus ;
}
}
Väljund:
Valime kirje ja vaatame selle tüüpi.
Järeldus
Õppisime, kuidas luua LWC-s atribuutide ja näidetega liitkasti. Esiteks lõime liitkasti väärtuste loendiga ja kuvasime valitud väärtuse. Järgmisena renderdame HTML-malli valitud väärtuse alusel tingimusliku renderdamise kaudu. Lõpuks õppisime, kuidas olemasolevatest Salesforce'i kirjetest liitkasti valikuid luua ja kasutajaliideses seotud välju kuvada.