LWC – Combobox

Lwc Combobox



I Salesforce LWC, hvis du vil la brukeren velge et alternativ fra den angitte listen over alternativer, brukes kombinasjonsboksen. I denne veiledningen vil vi diskutere hvordan du lager en kombinasjonsboks og de forskjellige attributtene som støttes av kombinasjonsboksen med eksempler.

Combobox

I utgangspunktet er combobox et skrivebeskyttet felt som gir en inngang for å velge et alternativ fra de angitte alternativene. Vi kan lage dette ved å bruke lightning-combobox-taggen. Attributtene er hastighet etter hverandre som er atskilt med mellomrom. La oss diskutere noen attributter som kreves når du oppretter en kombinasjonsboks.





  1. merkelapp – Dette brukes til å spesifisere etiketten (teksten) for kombinasjonsboksen.
  2. alternativer – Hvert alternativ tar attributtene 'label' og 'value'. Vi kan spesifisere flere alternativer i en liste atskilt med komma.
[ { label: label1, value: value1 }, ,,,];
  1. plassholder : Før du velger et alternativ, må brukeren vite informasjonen knyttet til alternativene. Så dette attributtet er spesifisert.
  2. nødvendig : I noen tilfeller er det obligatorisk å velge alternativet. Vi kan gjøre det nødvendig ved å spesifisere dette attributtet.
  3. funksjonshemmet : Det kan være mulig å forhindre brukeren ved å velge alternativet fra avkrysningsboksen. Dette attributtet deaktiverer kombinasjonsboksen.

Syntaks:

La oss se hvordan du lager en kombinasjonsboks med noen viktige attributter.






label='label_name'

verdi={value_from_the_option}

placeholder='Hjelpetekst'

options={List_of_options}

onchange={handleChange} >

Spesifikasjon:

La oss se trinnene for å lage kombinasjonsboksen og jobbe med den.



I JavaScript-filen oppretter du en liste over alternativer med etikett og verdi inne i 'getter'-metoden.



Lag en variabel som lagrer standardalternativet.



Skriv håndtaksfunksjonen som lagrer alternativet som er valgt av brukeren fra brukergrensesnittet.

I HTML-filen oppretter du en kombinasjonsboks og sender attributtene. Vi må også sende hendelsesbehandleren onchange() som håndterer alternativene i kombinasjonsboksen. Den tar 'Handler'-funksjonen opprettet i 'js'-filen.

I alle eksemplene som vi skal diskutere i denne veiledningen, vil logikk bli gitt som 'js'-koden. Etter det spesifiserer vi skjermbildet som inkluderer hele 'js'-koden.

Eksempel 1:

Lag en kombinasjonsboks med fem emner (detaljer) i Javascript-filen. Angi standardverdien som 'JAVA'. Håndter kombinasjonsboksen i handleSubjectsOnChange()-metoden. Send verdien og detaljene til 'verdi og alternativer'-attributtene i HTML-filen med en etikett og distribuer komponenten.

firstExample.html



tittel = 'Combobox for emner' >

< div klasse = 'slds-var-m-around_medium' >



merkelapp = 'Velg ditt emne:'

verdi = { verdi }

alternativer = { detaljer }

ved endring = { handleSubjectsOnChange } >< / lyn-kombiboks>

< br >

< s > Ditt emne: < b > {verdi} < / b >< / s >

< / div >

< / lyn-kort>

< / mal>

firstExample.js

// Opprett standardverdi - 'JAVA' for kombinasjonsboksen
verdi = 'JAVA' ;


// Vis fagene
få detaljer ( ) {
// 5 fag
komme tilbake [ { merkelapp : 'Java' , verdi : 'JAVA' } ,
{ merkelapp : 'Python' , verdi : 'PYTHON' } ,
{ merkelapp : 'HTML' , verdi : 'HTML' } ,
{ merkelapp : 'C' , verdi : 'C' } ,
{ merkelapp : 'C++' , verdi : 'C++' } ] ;
}

// Håndter logikk for å angi verdien
handleSubjectsOnChange ( begivenhet ) {
dette . verdi = begivenhet. detalj . verdi ;
}
}

Hele koden:

firstComponent.js-meta.xml

versjon = '1.0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57,0 < / apiVersjon>

ekte < / erExposed>



lyn__AppPage < / mål>

lyn__RecordPage < / mål>

< / mål>

< / LightningComponentBundle>

Produksjon:

Legg til denne komponenten på 'Record'-siden til ethvert objekt. I HTML-filen viser vi verdien i avsnittskoden. Når en bruker velger et alternativ, vil det vises i fet skrift. Som standard er 'JAVA' valgt og vist etter at komponenten er gjengitt på siden.

La oss velge emnet som 'C'. 'C' returneres under kombinasjonsboksen.

Eksempel 2:

I dette eksemplet vil vi gjengi de forskjellige komponentene basert på valglisteverdiene for kampanjetype (fra kampanjeobjektet).

  1. Hvis kampanjetypen er 'Konferanse', vil vi gjengi malen som returnerer teksten – Kampanjestatus:   PLANNET
  2. Hvis kampanjetypen er «Nettseminar», vil vi gjengi malen som returnerer teksten – Kampanjestatus:   FERDIG
  3. Hvis kampanjetypen er «Partners», gjengir vi malen som returnerer teksten – Kampanjestatus:   PÅGÅR
  4. Kampanjestatus:  AVBRUTT for resten av alternativene.

secondExample.html



tittel = 'KAMPANJETYPE' ikon- Navn = 'standard:kampanje' >

< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >

= { CampaignTypeValues. data } >

verdi = { verdi }

alternativer = { CampaignTypeValues. data .verdier }

ved endring = { handleEndre } >

< / lyn-kombiboks>

< / mal>< br / >

< / div >

< br >< br >

= { konferanseval } >

< senter > Kampanjestatus:   < b >< Jeg > PLANLAGT< / Jeg >< / b > < / senter >

< / mal>