Als u in Salesforce LWC de gebruiker wilt toestaan een optie uit de opgegeven lijst met opties te selecteren, wordt combobox gebruikt. In deze handleiding bespreken we met voorbeelden hoe u een combobox maakt en de verschillende attributen die door combobox worden ondersteund.
Combobox
Kortom, combobox is een alleen-lezen veld dat invoer biedt om een optie uit de opgegeven opties te kiezen. We kunnen dit maken met behulp van de bliksem-combobox-tag. De attributen zijn snelheid achter elkaar, gescheiden door spatie. Laten we enkele attributen bespreken die vereist zijn bij het maken van een combobox.
- etiket – Dit wordt gebruikt om het label (tekst) voor uw combobox op te geven.
- opties – Elke optie heeft de kenmerken ‘label’ en ‘waarde’. We kunnen de meerdere opties specificeren in een lijst, gescheiden door komma's.
- tijdelijke aanduiding : Voordat een optie wordt geselecteerd, moet de gebruiker de informatie met betrekking tot opties kennen. Dit attribuut is dus gespecificeerd.
- vereist : In sommige gevallen is het verplicht om de optie te selecteren. We kunnen dit verplicht maken door dit attribuut op te geven.
- gehandicapt : Het kan mogelijk zijn om de gebruiker te voorkomen door de optie in het selectievakje te selecteren. Dit attribuut schakelt de combobox uit.
Syntaxis:
Laten we eens kijken hoe we een combobox kunnen maken met enkele belangrijke attributen.
naam = 'naam'
label='label_naam'
waarde={waarde_van_de_optie}
placeholder='Helptekst'
opties={Lijst_van_opties}
onchange={handleChange} >
Specificatie:
Laten we de stappen bekijken om de combobox te maken en ermee te werken.
Maak in het JavaScript-bestand een lijst met opties met label en waarde binnen de “getter” -methode.
Maak een variabele waarin de standaardoptie wordt opgeslagen.
Schrijf de handle-functie die de optie opslaat die door de gebruiker in de gebruikersinterface is geselecteerd.
Maak in het HTML-bestand een combobox en geef de attributen door. We moeten ook de gebeurtenishandler onchange() doorgeven die de opties in de combobox afhandelt. Er is de functie 'Handler' voor nodig die is gemaakt in het bestand 'js'.
In alle voorbeelden die we in deze handleiding gaan bespreken, wordt logica gegeven als de “js”-code. Daarna specificeren we de schermafbeelding die de volledige “js” -code bevat.
Voorbeeld 1:
Maak een combobox met vijf onderwerpen (details) in het Javascript-bestand. Geef de standaardwaarde op als “JAVA”. Behandel de combobox in de handleSubjectsOnChange() methode. Geef de waarde en details door aan de attributen 'waarde en opties' in het HTML-bestand met een label en implementeer de component.
eersteVoorbeeld.html
< div klas = 'slds-var-m-rond_medium' >
etiket = 'Selecteer uw onderwerp:'
waarde = { waarde }
opties = { details }
op verandering = { handleSubjectsOnChange } >< / bliksem-combobox>
< br >
< P > Jouw onderwerp: < B > {waarde} < / B >< / P >
< / div >
< / bliksem-kaart>
< / sjabloon>
eersteVoorbeeld.js
// Maak standaardwaarde - 'JAVA' voor de Comboboxwaarde = 'JAVA' ;
// Laat de onderwerpen zien
krijgen details ( ) {
// 5 onderwerpen
opbrengst [ { etiket : 'Java' , waarde : 'JAVA' } ,
{ etiket : 'Python' , waarde : 'PYTHON' } ,
{ etiket : 'HTML' , waarde : 'HTML' } ,
{ etiket : 'C' , waarde : 'C' } ,
{ etiket : 'C++' , waarde : 'C++' } ] ;
}
// Behandel logica om de waarde in te stellen
handleSubjectsOnChange ( evenement ) {
dit . waarde = evenement. detail . waarde ;
}
}
Volledige code:
firstComponent.js-meta.xml
versie = '1,0' ?>< / doelen>
< / LightningComponentBundel>
Uitgang:
Voeg deze component toe aan de “Record”-pagina van een willekeurig object. In het HTML-bestand geven we de waarde weer in de paragraaftag. Wanneer een gebruiker een optie kiest, wordt deze vetgedrukt weergegeven. Standaard wordt “JAVA” geselecteerd en weergegeven nadat de component op de pagina is weergegeven.
Laten we het onderwerp “C” kiezen. “C” wordt weergegeven onder de combobox.
Voorbeeld 2:
In dit voorbeeld geven we de verschillende componenten weer op basis van de waarden in de keuzelijst Campagnetype (uit het Campaign-object).
- Als het campagnetype 'Conferentie' is, geven we de sjabloon weer die de tekst 'Campagnestatus: GEPLAND' retourneert
- Als het campagnetype 'Webinar' is, geven we de sjabloon weer die de tekst retourneert: Campagnestatus: VOLTOOID
- Als het campagnetype 'Partners' is, geven we de sjabloon weer die de tekst retourneert: Campagnestatus: IN UITVOERING
- Campagnestatus: AFGEBRACHT voor de rest van de opties.
tweedeVoorbeeld.html
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
opties = { CampaignTypeWaarden. gegevens .waarden }
op verandering = { handvatVeranderen } >
< / bliksem-combobox>
< / sjabloon>< br / >
< / div >
< br >< br >
< centrum > Campagnestatus: < B >< i > GEPLAND< / i >< / B > < / centrum >
< / sjabloon>
< centrum > Campagnestatus: < B >< i > VOLTOOID< / i >< / B > < / centrum >
< / sjabloon>
< centrum > Campagnestatus: < B >< i > IN UITVOERING< / i >< / B > < / centrum >
< / sjabloon>
< centrum > Campagnestatus: < B >< i > AFGEBROKEN< / i >< / B > < / centrum >
< / sjabloon>
< / bliksem-kaart>
< / sjabloon>
tweedeVoorbeeld.js
We importeren het Campaign-object (Standaard) als CAMPAIGN en Type daaruit als TYPE. Vanuit de lightning/uiObjectInfoApi importeren we de getPicklistValues en getObjectInfo. Deze krijgen de keuzelijstwaarden die beschikbaar zijn in het veld Type. Deze zullen worden gebruikt als opties voor de combobox. Het volgende wordt afgehandeld in handleChange().
- Als de waarde === “Conference”, stellen we de conferenceval-variabele in op true en de andere twee op false.
- Als de waarde === “Webinar”, stellen we de webinarval-variabele in op true en de andere twee op false.
- Als de waarde === “Partners”, stellen we de partnerval-variabele in op true en de andere twee op false.
- Als de waarde niet tussen de gegeven opties staat, zijn ze allemaal onwaar.
importeren CAMPAGNE van '@salesforce/schema/campagne' ;
importeren TYPE vanaf '@salesforce/schema/Campaign.Type' ;
importeren { getPicklistValues } van 'bliksem/uiObjectInfoApi' ;
importeren { getObjectInfo } van 'bliksem/uiObjectInfoApi' ;
exporteren standaard klas Tweede voorbeeld strekt zich uit BliksemElement {
@ koerswaarde ;
// Haal het object op
@ draad ( getObjectInfo , { objectApiNaam : CAMPAGNE } )
objectInfo ;
// Haal het campagnetype op: keuzelijst
@ draad ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , veldApiNaam : TYPE } )
CampaignTypeWaarden ;
conferentieval = vals ;
webinarval = vals ;
partnerval = vals ;
ander = vals ;
// Behandel logica
handvatVeranderen ( evenement ) {
dit . waarde = evenement. doel . waarde ;
als ( dit . waarde === 'Conferentie' ) {
// Status weergeven zoals GEPLAND
dit . conferentieval = WAAR ;
dit . webinarval = vals ;
dit . partnerval = vals ;
}
anders als ( dit . waarde === 'Webinars' ) {
// Geef de status weer als VOLTOOID
dit . webinarval = WAAR ;
dit . conferentieval = vals ;
dit . partnerval = vals ;
}
anders als ( dit . waarde === 'Partners' ) {
// Status weergeven als IN PROGRESS
dit . webinarval = vals ;
dit . conferentieval = vals ;
dit . partnerval = WAAR ;
}
anders {
// Status weergeven als IN AFGEBROKEN
dit . webinarval = vals ;
dit . conferentieval = vals ;
dit . partnerval = vals ;
}
}
}
secondComponent.js-meta.xml
versie = '1,0' ?>< / doelen>
< / LightningComponentBundel>
Uitgang:
Type – “Conferentie”. De status is dus 'GEPLAND'.
Typ – “Webinar”. De status is dus 'VOLTOOID'.
Typ – “Partners”. De status is dus “IN PROGRESS”.
Het type staat niet in de aangeboden opties. De status is dus “AFGEBRACHT”.
Voorbeeld 3:
Nu maken we een combobox met de campagnerecords als opties. Als we een optie selecteren, wordt het bijbehorende campagnetype weergegeven in de gebruikersinterface.
Eerst moeten we een Apex-klasse maken met de getCampaign()-methode. Deze methode retourneert een lijst met alle campagnes met de id, naam, type en status.
Campagnerecords. apxcopenbaar met delen klas Campagnerecords {
@ AuraIngeschakeld ( cachebaar = WAAR )
// Haal de lijst met campagnes op
openbaar statisch Lijst < Campagne > krijg Campagne ( ) {
opbrengst [ SELECT-ID , Naam , Type , Status van campagne ] ;
}
}
derdeVoorbeeld.html
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
etiket = 'Selecteer campagnenaam'
opties = { Campagneopties }
waarde = { waarde }
op verandering = { omgaan met verandering }
>
< / bliksem-combobox>
< / div >< br >
< br >
< P > Campagnetype voor deze campagne: < B > {waarde} < / B >< / P >
< / bliksem-kaart>
< / sjabloon>
derdeVoorbeeld.js
- We moeten de methode specificeren die een lijst met campagnes ophaalt binnen de connectedcallback() -methode. Declareer een array met de naam “camps” en sla het resultaat op met het label als Campagne-ID en de waarde als Campagnetype. Deze array is de invoer voor de campaignNames (deze moet worden aangemaakt met de trackdecorateur).
- Retourneer in de Campaignoptions() getter-methode de campaignNames-array. Combobox gebruikt deze opties dus.
- Stel de geselecteerde waarde in de handleonchange() handlermethode in.
importeren haal Campagne uit '@salesforce/apex/CampaignRecords.getCampaign' ;
exporteren standaard klas Derdevoorbeeld strekt zich uit BliksemElement {
waarde = '' ;
@ volg campagnenamen = [ ] ;
krijgen Campagneopties ( ) {
opbrengst dit . campagneNamen ;
}
// Voeg de opties toe aan de kamparray van de Apex.
// label zal de campagnenaam zijn
// waarde is het campagnetype
verbondenTerugbellen ( ) {
krijg Campagne ( )
. Dan ( resultaat => {
laat kampen = [ ] ;
voor ( was k = 0 ; k < resultaat. lengte ; k ++ ) {
kampen. duw ( { etiket : resultaat [ k ] . Naam , waarde : resultaat [ k ] . Type } ) ;
}
dit . campagneNamen = kampen ;
} )
}
// Behandel de waarde
omgaan met verandering ( evenement ) {
dit . waarde = evenement. detail . waarde ;
}
}
Uitgang:
Laten we de record selecteren en het type bekijken.
Conclusie
We hebben geleerd hoe je in LWC een combobox kunt maken met attributen en voorbeelden. Eerst hebben we een combobox gemaakt met een lijst met waarden en de geselecteerde waarde weergegeven. Vervolgens renderen we de HTML-sjabloon op basis van de geselecteerde waarde via de voorwaardelijke weergave. Ten slotte hebben we geleerd hoe we de opties voor de combobox kunnen maken op basis van de bestaande Salesforce-records en hoe we de gerelateerde velden in de gebruikersinterface kunnen weergeven.