LWC – Combobox

I Salesforce LWC, om du vill tillåta användaren att välja ett alternativ från den angivna listan med alternativ, används combobox. I den här guiden kommer vi att diskutera hur man skapar en combobox och de olika attribut som stöds av combobox med exempel.

Kombinationsrutan

I grund och botten är combobox ett skrivskyddat fält som ger en ingång för att välja ett alternativ från de angivna alternativen. Vi kan skapa detta med lightning-combobox-taggen. Attributen är hastighet efter varandra som är åtskilda av mellanslag. Låt oss diskutera några attribut som krävs när du skapar en kombinationsruta.

märka – Detta används för att ange etiketten (texten) för din kombinationsruta.
alternativ – Varje alternativ har attributen 'label' och 'value'. Vi kan specificera flera alternativ i en lista separerad med kommatecken.

[ { etikett: etikett1, värde: värde1 }, ,,,];

Platshållare : Innan du väljer ett alternativ måste användaren känna till informationen om alternativen. Så detta attribut är specificerat.
nödvändig : I vissa fall är det obligatoriskt att välja alternativet. Vi kan göra det obligatoriskt genom att ange detta attribut.
Inaktiverad : Det kan vara möjligt att förhindra användaren genom att markera alternativet i kryssrutan. Det här attributet inaktiverar kombinationsrutan.

Syntax:

Låt oss se hur du skapar en kombinationslåda med några viktiga attribut.

label='label_name'

värde={value_from_the_option}

placeholder='Hjälptext'

options={List_of_options}

onchange={handleChange} >

Specifikation:

Låt oss se stegen för att skapa kombinationsrutan och arbeta med den.

Skapa en lista med alternativ i JavaScript-filen med etikett och värde i 'getter'-metoden.

Skapa en variabel som lagrar standardalternativet.

Skriv handtagsfunktionen som lagrar alternativet som väljs av användaren från användargränssnittet.

Skapa en kombinationsruta i HTML-filen och skicka attributen. Dessutom måste vi skicka händelsehanteraren onchange() som hanterar alternativen i kombinationsrutan. Det tar 'Handler'-funktionen skapad i 'js'-filen.

I alla exempel som vi kommer att diskutera i den här guiden kommer logik att tillhandahållas som 'js'-koden. Efter det anger vi skärmdumpen som innehåller hela 'js'-koden.

Exempel 1:

Skapa en kombinationsruta med fem ämnen (detaljer) i Javascript-filen. Ange standardvärdet som 'JAVA'. Hantera kombinationsrutan i metoden handleSubjectsOnChange(). Skicka värdet och detaljerna till attributen 'värde och alternativ' i HTML-filen med en etikett och distribuera komponenten.

firstExample.html

titel = 'Ämneskombobox' >

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

märka = 'Välj ditt ämne:'

värde = { värde }

alternativ = { detaljer }

vid förändring = { hanteraSubjectsOnChange } >< / lightning-combobox>

< br >

< sid > Ditt ämne: < b > {värde} < / b >< / sid >

< / div >

< / blixtkort>

< / mall>

firstExample.js

// Skapa standardvärde - 'JAVA' för kombinationsrutan
värde = 'JAVA' ;

// Visa ämnena
skaffa sig detaljer ( ) {
// 5 ämnen
lämna tillbaka [ { märka : 'Java' , värde : 'JAVA' } ,
{ märka : 'Pytonorm' , värde : 'PYTONORM' } ,
{ märka : 'HTML' , värde : 'HTML' } ,
{ märka : 'C' , värde : 'C' } ,
{ märka : 'C++' , värde : 'C++' } ] ;
}

// Hantera logik för att ställa in värdet
hanteraSubjectsOnChange ( händelse ) {
detta . värde = händelse. detalj . värde ;
}
}

Hela koden:

firstComponent.js-meta.xml

version = '1.0' ?>

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

57,0 < / apiVersion>

Sann < / är Exponerad>

lightning__AppPage < / mål>

lightning__RecordPage < / mål>

< / mål>

< / LightningComponentBundle>

Produktion:

Lägg till den här komponenten på 'Record'-sidan för ett objekt. I HTML-filen visar vi värdet i paragraftaggen. När en användare väljer något alternativ visas det i fet stil. Som standard väljs 'JAVA' och visas efter att komponenten har renderats på sidan.

Låt oss välja ämnet som 'C'. 'C' returneras under kombinationsrutan.

Exempel 2:

I det här exemplet kommer vi att återge de olika komponenterna baserat på vallistan för kampanjtyp (från kampanjobjektet).

Om kampanjtypen är 'Konferens' återger vi mallen som returnerar texten – Kampanjstatus: PLANERAD
Om kampanjtypen är 'Webinar' återger vi mallen som returnerar texten – Kampanjstatus: COMPLETED
Om kampanjtypen är 'Partners' återger vi mallen som returnerar texten – Kampanjstatus: PÅGÅR
Kampanjstatus: AVBRUTEN för resten av alternativen.