LWC – Combobox

I Salesforce LWC, hvis du vil tillade brugeren at vælge en indstilling fra den angivne liste over muligheder, bruges kombinationsboks. I denne guide vil vi diskutere, hvordan man opretter en combobox og de forskellige attributter, der understøttes af combobox med eksempler.

Kombinationsfelt

Grundlæggende er combobox et skrivebeskyttet felt, som giver et input til at vælge en indstilling fra de angivne muligheder. Vi kan oprette dette ved hjælp af lightning-combobox-tagget. Attributterne er hastighed efter hinanden, som er adskilt af mellemrum. Lad os diskutere nogle attributter, der kræves, mens du opretter en kombinationsboks.

etiket – Dette bruges til at angive etiketten (teksten) for din kombinationsboks.
muligheder – Hver mulighed tager attributterne 'label' og 'value'. Vi kan angive de flere muligheder i en liste adskilt med komma.

[ { label: label1, value: value1 }, ,,,];

pladsholder : Før du vælger en mulighed, skal brugeren kende de oplysninger, der er relateret til muligheder. Så denne attribut er specificeret.
påkrævet : I nogle tilfælde er det obligatorisk at vælge muligheden. Vi kan gøre det påkrævet ved at angive denne attribut.
handicappet : Det kan være muligt at forhindre brugeren ved at vælge indstillingen fra afkrydsningsfeltet. Denne egenskab deaktiverer kombinationsboksen.

Syntaks:

Lad os se, hvordan du opretter en kombinationsboks med nogle vigtige egenskaber.

label='label_name'

værdi={value_from_the_option}

placeholder='Hjælpetekst'

optioner={List_of_options}

onchange={handleChange} >

Specifikation:

Lad os se trinene til at oprette kombinationsboksen og arbejde med den.

I JavaScript-filen skal du oprette en liste over muligheder med etiket og værdi inde i 'getter'-metoden.

Opret en variabel, der gemmer standardindstillingen.

Skriv håndtag-funktionen, der gemmer den indstilling, som er valgt af brugeren fra brugergrænsefladen.

I HTML-filen skal du oprette en kombinationsboks og videregive attributterne. Vi skal også videregive hændelseshandleren onchange(), der håndterer mulighederne i kombinationsboksen. Det tager 'Handler'-funktionen oprettet i 'js'-filen.

I alle de eksempler, som vi vil diskutere i denne vejledning, vil logik blive leveret som 'js'-koden. Derefter angiver vi skærmbilledet, der inkluderer hele 'js'-koden.

Eksempel 1:

Opret en kombinationsboks med fem emner (detaljer) i Javascript-filen. Angiv standardværdien som 'JAVA'. Håndter kombinationsboksen i handleSubjectsOnChange()-metoden. Send værdien og detaljerne til attributterne 'værdi og muligheder' i HTML-filen med en etiket, og implementer komponenten.

firstExample.html

titel

= 'Emner Combobox' >

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

etiket = 'Vælg dit emne:'

værdi = { værdi }

muligheder = { detaljer }

ved ændring = { håndtereSubjectsOnChange } >< / lyn-kombiboks>

< br >

< s > Dit emne: < b > {værdi} < / b >< / s >

< / div >

< / lyn-kort>

< / skabelon>

firstExample.js

// Opret standardværdi - 'JAVA' for Combobox
værdi = 'JAVA' ;

// Vis emnerne
få detaljer ( ) {
// 5 fag
Vend tilbage [ { etiket : 'Java' , værdi : 'JAVA' } ,
{ etiket : 'Python' , værdi : 'PYTHON' } ,
{ etiket : 'HTML' , værdi : 'HTML' } ,
{ etiket : 'C' , værdi : 'C' } ,
{ etiket : 'C++' , værdi : 'C++' } ] ;
}

// Håndter logik for at indstille værdien
håndtereSubjectsOnChange ( begivenhed ) {
det her . værdi = begivenhed. detalje . værdi ;
}
}

Hele koden:

firstComponent.js-meta.xml

version = '1.0' ?>

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

57,0 < / apiVersion>

rigtigt < / er Udsat>

lyn__AppPage < / mål>

lyn__RecordPage < / mål>

< / mål>

< / LightningComponentBundle>

Produktion:

Tilføj denne komponent til 'Record'-siden for ethvert objekt. I HTML-filen viser vi værdien i afsnits-tagget. Når en bruger vælger en valgmulighed, vil den blive vist som fed. Som standard er 'JAVA' valgt og vist, efter at komponenten er gengivet på siden.

Lad os vælge emnet som 'C'. 'C' returneres under kombinationsboksen.

Eksempel 2:

I dette eksempel vil vi gengive de forskellige komponenter baseret på kampagnetype-pluklisteværdierne (fra kampagneobjektet).

Hvis kampagnetypen er 'Konference', gengiver vi skabelonen, der returnerer teksten – Kampagnestatus: PLANLAGT
Hvis kampagnetypen er 'Webinar', gengiver vi skabelonen, der returnerer teksten – Kampagnestatus: UDFØRT
Hvis kampagnetypen er 'Partners', gengiver vi skabelonen, der returnerer teksten – Kampagnestatus: I GANG
Kampagnestatus: AFBRUDT for resten af mulighederne.