Ja programmā Salesforce LWC vēlaties ļaut lietotājam atlasīt opciju no norādītā opciju saraksta, tiek izmantots kombinētais lodziņš. Šajā rokasgrāmatā mēs ar piemēriem apspriedīsim, kā izveidot kombinēto lodziņu un dažādus kombinētā lodziņa atbalstītos atribūtus.
Kombinētais lodziņš
Būtībā kombinētais lodziņš ir tikai lasāms lauks, kas nodrošina ievadi, lai izvēlētos opciju no norādītajām opcijām. Mēs to varam izveidot, izmantojot zibens kombinētā lodziņa tagu. Atribūti ir ātrums viens pēc otra, kas ir atdalīts ar atstarpi. Apspriedīsim dažus atribūtus, kas ir nepieciešami, veidojot kombinēto lodziņu.
- etiķete – To izmanto, lai norādītu jūsu kombinētā lodziņa etiķeti (tekstu).
- iespējas – Katrai opcijai tiek izmantoti atribūti “label” un “value”. Mēs varam norādīt vairākas opcijas sarakstā, atdalot to ar komatu.
- vietturis : pirms opcijas izvēles lietotājam ir jāzina ar opcijām saistītā informācija. Tātad šis atribūts ir norādīts.
- nepieciešams : dažos gadījumos opcija ir jāatlasa obligāti. Mēs varam to pieprasīt, norādot šo atribūtu.
- invalīds : var būt iespējams novērst lietotāju, atlasot opciju izvēles rūtiņā. Šis atribūts atspējo kombinēto lodziņu.
Sintakse:
Apskatīsim, kā izveidot kombinēto lodziņu ar dažiem svarīgiem atribūtiem.
name = 'vārds'
etiķete = 'iezīmes_nosaukums'
vērtība={vērtība_no_iespējas}
placeholder='Palīdzības teksts'
opcijas={Opciju_saraksts}
onchange={handleChange} >
Specifikācija:
Apskatīsim darbības, lai izveidotu kombinēto lodziņu un strādātu ar to.
JavaScript failā izveidojiet opciju sarakstu ar apzīmējumu un vērtību metodē “getter”.
Izveidojiet mainīgo, kas saglabā noklusējuma opciju.
Ierakstiet roktura funkciju, kas saglabā lietotāja lietotāja interfeisā atlasīto opciju.
HTML failā izveidojiet kombinēto lodziņu un nododiet atribūtus. Tāpat mums ir jānodod onchange() notikumu apstrādātājs, kas apstrādā opcijas kombinētajā lodziņā. Tam nepieciešama funkcija 'Apdarinātājs', kas izveidota failā 'js'.
Visos piemēros, ko mēs apspriedīsim šajā rokasgrāmatā, loģika tiks sniegta kā “js” kods. Pēc tam mēs norādām ekrānuzņēmumu, kas ietver visu “js” kodu.
1. piemērs:
Javascript failā izveidojiet kombinēto lodziņu ar pieciem priekšmetiem (detaļām). Norādiet noklusējuma vērtību kā “JAVA”. Apstrādājiet kombinēto lodziņu, izmantojot metodi handleSubjectsOnChange(). Nododiet vērtību un informāciju atribūtiem 'vērtība un opcijas' HTML failā ar etiķeti un izvietojiet komponentu.
pirmaisPiemērs.html
< div klasē = 'slds-var-m-around_medium' >
etiķete = 'Izvēlieties tēmu:'
vērtību = { vērtību }
iespējas = { detaļas }
maiņa = { handSubjectsOnChange } >< / Lightning-combobox>
< br >
< lpp > Jūsu tēma: < b > {value} < / b >< / lpp >
< / div >
< / zibens karte>
< / veidne>
pirmaisPiemērs.js
// Kombinētajam lodziņam izveidojiet noklusējuma vērtību - 'JAVA'vērtību = 'JAVA' ;
// Parādiet priekšmetus
gūt detaļas ( ) {
// 5 priekšmeti
atgriezties [ { etiķete : 'Java' , vērtību : 'JAVA' } ,
{ etiķete : 'Python' , vērtību : 'PYTHON' } ,
{ etiķete : 'HTML' , vērtību : 'HTML' } ,
{ etiķete : 'C' , vērtību : 'C' } ,
{ etiķete : 'C++' , vērtību : 'C++' } ] ;
}
// Apstrādājiet loģiku, lai iestatītu vērtību
handSubjectsOnChange ( notikumu ) {
šis . vērtību = notikumu. detaļa . vērtību ;
}
}
Viss kods:
firstComponent.js-meta.xml
versija = '1.0' ?>< / mērķi>
< / LightningComponentBundle>
Izvade:
Pievienojiet šo komponentu jebkura objekta lapai “Ierakstīt”. HTML failā mēs parādām vērtību rindkopas tagā. Kad lietotājs izvēlas jebkuru opciju, tā tiks parādīta treknrakstā. Pēc noklusējuma ir atlasīts “JAVA” un tiek parādīts pēc komponenta renderēšanas lapā.
Izvēlēsimies tēmu kā “C”. “C” tiek atgriezts zem kombinētā lodziņa.
2. piemērs:
Šajā piemērā mēs atveidosim dažādus komponentus, pamatojoties uz kampaņas veida izvēles saraksta vērtībām (no objekta Kampaņas).
- Ja kampaņas veids ir “Konference”, mēs atveidosim veidni, kas atgriež tekstu – Kampaņas statuss: PLĀNOTS
- Ja kampaņas veids ir “Tīmekļseminārs”, mēs atveidosim veidni, kas atgriež tekstu – Kampaņas statuss: PABEIGTS
- Ja kampaņas veids ir “Partneri”, mēs atveidosim veidni, kas atgriež tekstu – Kampaņas statuss: NOTIEK.
- Kampaņas statuss: PĀRTRAUKTS pārējām opcijām.
secondExample.html
< div klasē = 'slds-var-m-around_medium' stils = 'augstums: 20 pikseļi; platums: 400 pikseļi' >
iespējas = { CampaignTypeValues. datus .vērtības }
maiņa = { rokturisMainīt } >
< / Lightning-combobox>
< / veidne>< br / >
< / div >
< br >< br >
< centrs > Kampaņas statuss: < b >< i > PLĀNOTS< / i >< / b > < / centrs >
< / veidne>
< centrs > Kampaņas statuss: < b >< i > PABEIGTS< / i >< / b > < / centrs >
< / veidne>
< centrs > Kampaņas statuss: < b >< i > NOTIEK< / i >< / b > < / centrs >
< / veidne>
< centrs > Kampaņas statuss: < b >< i > ABORTS< / i >< / b > < / centrs >
< / veidne>
< / zibens karte>
< / veidne>
secondExample.js
Mēs importējam Kampaņas objektu (standarta) kā CAMPAIGN un ierakstiet no tā kā VEIDU. No lightning/uiObjectInfoApi mēs importējam getPicklistValues un getObjectInfo. Tie iegūs laukā Tips pieejamās izvēles saraksta vērtības. Tās tiks izmantotas kā kombinētā lodziņa opcijas. Tālāk norādītie tiek apstrādāti, izmantojot HandChange().
- Ja vērtība === “Conference”, mēs iestatām Conferenceval mainīgo uz true, bet pārējiem diviem kā false.
- Ja vērtība === “Tīmekļseminārs”, mēs iestatām tīmekļsemināra mainīgo vērtību uz patiesu un pārējos divus kā nepatiesus.
- Ja vērtība === “Partners”, mēs iestatām mainīgo partnerval uz True un pārējos divus kā nepatiesus.
- Ja vērtība nav norādītajās opcijās, visas ir nepatiesas.
imports KAMPAŅA no '@salesforce/schema/Campaign' ;
imports TYPE no '@salesforce/schema/Campaign.Type' ;
imports { getPicklistValues } no 'lightning/uiObjectInfoApi' ;
imports { getObjectInfo } no 'lightning/uiObjectInfoApi' ;
eksportēt noklusējuma klasē OtraisPiemērs pagarina ZibensElements {
@ trases vērtība ;
// Iegūstiet objektu
@ vads ( getObjectInfo , { objectApiName : KAMPAŅA } )
objectInfo ;
// Iegūstiet kampaņas veidu — atlases saraksts
@ vads ( getPicklistValues , { RecordTypeID : '$objectInfo.data.defaultRecordTypeId' , lauksApiName : VEIDS } )
CampaignTypeValues ;
konferences val = viltus ;
tīmekļa seminārs = viltus ;
partnerval = viltus ;
cits = viltus ;
// Rokturis ar loģiku
rokturisMainīt ( notikumu ) {
šis . vērtību = notikumu. mērķis . vērtību ;
ja ( šis . vērtību === 'konference' ) {
// Parādīt statusu kā PLĀNOTS
šis . konferences val = taisnība ;
šis . tīmekļa seminārs = viltus ;
šis . partnerval = viltus ;
}
cits ja ( šis . vērtību === 'vebināri' ) {
// Rādīt statusu kā PABEIGTS
šis . tīmekļa seminārs = taisnība ;
šis . konferences val = viltus ;
šis . partnerval = viltus ;
}
cits ja ( šis . vērtību === 'Partneri' ) {
// Parādīt statusu kā NOTIEK
šis . tīmekļa seminārs = viltus ;
šis . konferences val = viltus ;
šis . partnerval = taisnība ;
}
cits {
// Parāda statusu kā IN ABOORTED
šis . tīmekļa seminārs = viltus ;
šis . konferences val = viltus ;
šis . partnerval = viltus ;
}
}
}
secondComponent.js-meta.xml
versija = '1.0' ?>< / mērķi>
< / LightningComponentBundle>
Izvade:
Veids - 'Konference'. Tātad statuss ir “PLĀNOTS”.
Veids – “Vebinārs”. Tātad statuss ir “PABEIGTS”.
Tips - 'Partneri'. Tātad statuss ir “NOPROGRESĒ”.
Veids nav iekļauts piedāvātajās opcijās. Tātad statuss ir “PĀRTRAUKTS”.
3. piemērs:
Tagad mēs izveidojam kombinēto lodziņu ar kampaņas ierakstiem kā opcijām. Ja atlasīsim kādu no opcijām, lietotāja saskarnē tiks atgriezts atbilstošais kampaņas veids.
Pirmkārt, mums ir jāizveido Apex klase ar metodi getCampaign(). Šī metode atgriež visu kampaņu sarakstu ar ID, nosaukumu, veidu un statusu.
CampaignRecords. apxcpubliski ar kopīgošanu klasē CampaignRecords {
@ Aura Enabled ( kešatmiņā = taisnība )
// Iegūstiet kampaņu sarakstu
publiski statisks Saraksts < Kampaņa > getCampaign ( ) {
atgriezties [ ATLASĪT ID , Vārds , Tips , Statuss no kampaņas ] ;
}
}
trešaisPiemērs.html
< div klasē = 'slds-var-m-around_medium' stils = 'augstums: 20 pikseļi; platums: 400 pikseļi' >
etiķete = 'Atlasīt kampaņas nosaukumu'
iespējas = { Kampaņas }
vērtību = { vērtību }
maiņa = { rīkoties pēc maiņas }
>
< / Lightning-combobox>
< / div >< br >
< br >
< lpp > Kampaņas veids šai kampaņai: < b > {value} < / b >< / lpp >
< / zibens karte>
< / veidne>
trešaisPiemērs.js
- Mums ir jānorāda metode, kas iegūst kampaņu sarakstu saistītās atzvanīšanas () metodes ietvaros. Deklarējiet masīvu ar nosaukumu “camps” un saglabājiet rezultātu ar iezīmi kā Campaign ID un vērtību kā Campaign Type. Šis masīvs ir kampaņas Names ievade (tas ir jāizveido, izmantojot celiņu dekorētāju).
- Getter metodē Campagnoptions() atgriež masīvu campaignNames. Tātad kombinētajā lodziņā tiek izmantotas šīs opcijas.
- Iestatiet atlasīto vērtību handonchange() apdarinātāja metodē.
imports getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
eksportēt noklusējuma klasē TrešaisPiemērs pagarina ZibensElements {
vērtību = '' ;
@ izsekot kampaņu nosaukumi = [ ] ;
gūt Kampaņas ( ) {
atgriezties šis . kampaņu nosaukumi ;
}
// Pievienojiet opcijas nometņu masīvam no Apex.
// etiķete būs kampaņas nosaukums
// vērtība būs kampaņas veids
savienots Atzvans ( ) {
getCampaign ( )
. tad ( rezultāts => {
lai nometnes = [ ] ;
priekš ( bija k = 0 ; k < rezultāts. garums ; k ++ ) {
nometnes. spiediet ( { etiķete : rezultāts [ k ] . Vārds , vērtību : rezultāts [ k ] . Tips } ) ;
}
šis . kampaņu nosaukumi = nometnes ;
} )
}
// Apstrādājiet vērtību
rīkoties pēc maiņas ( notikumu ) {
šis . vērtību = notikumu. detaļa . vērtību ;
}
}
Izvade:
Atlasīsim ierakstu un redzēsim veidu.
Secinājums
Mēs uzzinājām, kā LWC izveidot kombinēto lodziņu ar atribūtiem un piemēriem. Pirmkārt, mēs izveidojām kombinēto lodziņu ar vērtību sarakstu un parādījām atlasīto vērtību. Pēc tam mēs renderējam HTML veidni, pamatojoties uz atlasīto vērtību, izmantojot nosacījumu renderēšanu. Visbeidzot, mēs uzzinājām, kā izveidot kombinētā lodziņa opcijas no esošajiem Salesforce ierakstiem un parādīt saistītos laukus lietotāja saskarnē.