In Salesforce LWC, se si desidera consentire all'utente di selezionare un'opzione dall'elenco di opzioni specificato, viene utilizzata la casella combinata. In questa guida discuteremo come creare una casella combinata e i diversi attributi supportati dalla casella combinata con esempi.
Casella combinata
Fondamentalmente, la casella combinata è un campo di sola lettura che fornisce un input per scegliere un'opzione tra le opzioni specificate. Possiamo crearlo utilizzando il tag lightning-combobox. Gli attributi sono la velocità, una dopo l'altra, separata dallo spazio. Parliamo di alcuni attributi richiesti durante la creazione di una casella combinata.
- etichetta – Viene utilizzato per specificare l'etichetta (testo) per la tua casella combinata.
- opzioni – Ciascuna opzione accetta gli attributi “etichetta” e “valore”. Possiamo specificare le molteplici opzioni in un elenco separato da virgola.
- segnaposto : Prima di selezionare un'opzione, l'utente deve conoscere le informazioni relative alle opzioni. Quindi, questo attributo è specificato.
- necessario : In alcuni casi è obbligatorio selezionare l'opzione. Possiamo renderlo obbligatorio specificando questo attributo.
- Disabilitato : È possibile impedire all'utente selezionando l'opzione dalla casella di controllo. Questo attributo disabilita la casella combinata.
Sintassi:
Vediamo come creare una combobox con alcuni attributi importanti.
nome='nome'
etichetta='nome_etichetta'
valore={valore_da_l_opzione}
segnaposto='Testo di aiuto'
opzioni={Lista_di_opzioni}
onchange={handleChange} >
Specifica:
Vediamo i passaggi per creare la casella combinata e lavorare con essa.
Nel file JavaScript, crea un elenco di opzioni con etichetta e valore all'interno del metodo 'getter'.
Crea una variabile che memorizza l'opzione predefinita.
Scrivere la funzione handle che memorizza l'opzione selezionata dall'utente dall'interfaccia utente.
Nel file HTML, crea una casella combinata e passa gli attributi. Inoltre, dobbiamo passare il gestore di eventi onchange() che gestisce le opzioni nella casella combinata. Prende la funzione 'Handler' creata nel file 'js'.
In tutti gli esempi che tratteremo in questa guida, la logica verrà fornita come codice “js”. Successivamente, specifichiamo lo screenshot che include l'intero codice 'js'.
Esempio 1:
Crea una casella combinata con cinque oggetti (dettagli) nel file Javascript. Specificare il valore predefinito come 'JAVA'. Gestisci la casella combinata nel metodo handleSubjectsOnChange(). Passa il valore e i dettagli agli attributi 'valore e opzioni' nel file HTML con un'etichetta e distribuisci il componente.
primoEsempio.html
< div classe = 'slds-var-m-around_medium' >
etichetta = 'Seleziona il tuo oggetto:'
valore = { valore }
opzioni = { dettagli }
onchange = { handleSubjectsOnChange } >< / combobox-fulmine>
< fratello >
< P > Il tuo argomento: < B > {valore} < / B >< / P >
< / div >
< / carta-fulmine>
< / modello>
primoEsempio.js
// Crea un valore predefinito: 'JAVA' per la casella combinatavalore = 'GIAVA' ;
// Mostra i soggetti
Ottenere dettagli ( ) {
// 5 soggetti
ritorno [ { etichetta : 'Giava' , valore : 'GIAVA' } ,
{ etichetta : 'Pitone' , valore : 'PITONE' } ,
{ etichetta : 'HTML' , valore : 'HTML' } ,
{ etichetta : 'C' , valore : 'C' } ,
{ etichetta : 'C++' , valore : 'C++' } ] ;
}
// Gestisce la logica per impostare il valore
handleSubjectsOnChange ( evento ) {
Questo . valore = evento. dettaglio . valore ;
}
}
Intero codice:
primoComponent.js-meta.xml
versione = '1.0' ?><è esposto> VERO < / èesposto>
< / obiettivi>
< / Pacchetto di componenti Lightning>
Produzione:
Aggiungi questo componente alla pagina 'Registra' di qualsiasi oggetto. Nel file HTML, visualizziamo il valore nel tag del paragrafo. Quando un utente sceglie un'opzione, questa verrà visualizzata in grassetto. Per impostazione predefinita, 'JAVA' è selezionato e visualizzato dopo il rendering del componente sulla pagina.
Scegliamo l'argomento come 'C'. 'C' viene restituito sotto la casella combinata.
Esempio 2:
In questo esempio, eseguiremo il rendering dei diversi componenti in base ai valori dell'elenco di selezione Tipo di campagna (dall'oggetto Campagna).
- Se il tipo di campagna è 'Conferenza', visualizzeremo il modello che restituisce il testo: Stato della campagna: PIANIFICATO
- Se il tipo di campagna è 'Webinar', visualizzeremo il modello che restituisce il testo: Stato della campagna: COMPLETATO
- Se il tipo di campagna è 'Partner', visualizzeremo il modello che restituisce il testo: Stato della campagna: IN CORSO
- Stato della campagna: INTERROTTO per il resto delle opzioni.
secondoEsempio.html
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
=
opzioni = { CampaignTypeValues. dati .valori }
onchange = { handleCambia } >
< / combobox-fulmine>
< / modello>< fratello / >
< / div >
< fratello >< fratello >
= { congressuale } >
< centro > Stato della campagna: < B >< io >PIANIFICATO< / io >< / B > < / centro >
< / modello>
= { webinarval } >
< centro > Stato della campagna: < B >< io > COMPLETATO < / io >< / B > < / centro >
< / modello>
= { partnership } >
< centro > Stato della campagna: < B >< io >IN CORSO< / io >< / B > < / centro >
< / modello>
< centro > Stato della campagna: < B >< io >INTERROTTO< / io >< / B > < / centro >
< / modello>
< / carta-fulmine>
< / modello>
secondo Esempio.js
Importiamo l'oggetto Campaign (Standard) come CAMPAIGN e Type da esso come TYPE. Da Lightning/uiObjectInfoApi importiamo getPicklistValues e getObjectInfo. Questi otterranno i valori dell'elenco di selezione disponibili nel campo Tipo. Questi verranno utilizzati come opzioni per la casella combinata. Quanto segue viene gestito in handleChange().
- Se il valore === “Conference”, impostiamo la variabile conferenceval su true e le altre due su false.
- Se il valore === “Webinar”, impostiamo la variabile webinarval su true e le altre due su false.
- Se il valore === “Partner”, impostiamo la variabile partnerval su true e le altre due su false.
- Se il valore non è presente nelle opzioni indicate, sono tutte false.
importare CAMPAGNA da '@salesforce/schema/Campagna' ;
importare TIPO da '@salesforce/schema/Campaign.Type' ;
importare { getPicklistValues } da 'fulmine/uiObjectInfoApi' ;
importare { getInfoOggetto } da 'fulmine/uiObjectInfoApi' ;
esportare predefinito classe Secondo esempio si estende Elemento Fulmine {
@ tenere traccia del valore ;
// Ottieni l'oggetto
@ filo ( getInfoOggetto , { oggettoApiName : CAMPAGNA } )
oggettoInfo ;
// Ottieni il tipo di campagna: elenco di selezione
@ filo ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TIPO } )
CampaignTypeValues ;
congressuale = falso ;
webinarval = falso ;
partnership = falso ;
altro = falso ;
// Gestisce la logica
handleCambia ( evento ) {
Questo . valore = evento. bersaglio . valore ;
Se ( Questo . valore === 'Conferenza' ) {
// Visualizza lo stato come PIANIFICATO
Questo . congressuale = VERO ;
Questo . webinarval = falso ;
Questo . partnership = falso ;
}
altro Se ( Questo . valore === 'Webinar' ) {
// Visualizza lo stato come COMPLETATO
Questo . webinarval = VERO ;
Questo . congressuale = falso ;
Questo . partnership = falso ;
}
altro Se ( Questo . valore === 'Partner' ) {
// Visualizza lo stato come IN CORSO
Questo . webinarval = falso ;
Questo . congressuale = falso ;
Questo . partnership = VERO ;
}
altro {
// Visualizza lo stato come IN ABORTED
Questo . webinarval = falso ;
Questo . congressuale = falso ;
Questo . partnership = falso ;
}
}
}
secondoComponent.js-meta.xml
versione = '1.0' ?><è esposto> VERO < / èesposto>
< / obiettivi>
< / Pacchetto di componenti Lightning>
Produzione:
Tipo – “Conferenza”. Quindi lo stato è “PIANIFICATO”.
Tipo: 'Webinar'. Quindi lo stato è “COMPLETO”.
Tipo – “Partner”. Quindi lo stato è “IN CORSO”.
Il tipo non è presente nelle opzioni fornite. Quindi lo stato è “ABORTED”.
Esempio 3:
Ora creiamo una casella combinata con i record della campagna come opzioni. Se selezioniamo qualsiasi opzione, il tipo di campagna corrispondente verrà restituito nell'interfaccia utente.
Per prima cosa dobbiamo creare una classe Apex con il metodo getCampaign(). Questo metodo restituisce un elenco di tutte le campagne con ID, nome, tipo e stato.
Record di campagna. apxcpubblico con condivisione classe Record di campagna {
@ AuraAbilitato ( memorizzabile nella cache = VERO )
// Ottiene l'elenco delle campagne
pubblico statico Elenco < Campagna > getCampaign ( ) {
ritorno [ SELEZIONA Id , Nome , Tipo , Stato dalla campagna ] ;
}
}
terzoEsempio.html
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
etichetta = 'Seleziona nome campagna'
opzioni = { Opzioni della campagna }
valore = { valore }
onchange = { handleonchange }
>
< / combobox-fulmine>
< / div >< fratello >
< fratello >
< P > Tipo di campagna per questa campagna: < B > {valore} < / B >< / P >
< / carta-fulmine>
< / modello>
terzoEsempio.js
- Dobbiamo specificare il metodo che ottiene un elenco di campagne all'interno del metodo connectcallback(). Dichiara un array denominato 'camps' e memorizza il risultato con l'etichetta come ID campagna e il valore come Tipo di campagna. Questo array è l'input per campaignNames (deve essere creato con il decoratore di tracce).
- Nel metodo getter Campaignoptions(), restituisce l'array campaignNames. Quindi, combobox utilizza queste opzioni.
- Imposta il valore selezionato nel metodo del gestore handleonchange().
importare getCampaign da '@salesforce/apex/CampaignRecords.getCampaign' ;
esportare predefinito classe Terzo esempio si estende Elemento Fulmine {
valore = '' ;
@ tenere traccia dei nomi delle campagne = [ ] ;
Ottenere Opzioni della campagna ( ) {
ritorno Questo . nomicampagne ;
}
// Aggiunge le opzioni all'array camps da Apex.
// l'etichetta sarà il nome della campagna
// il valore sarà il tipo di campagna
connessoRichiamata ( ) {
getCampaign ( )
. Poi ( risultato => {
lasciare i campi = [ ] ;
per ( era K = 0 ; K < risultato. lunghezza ; K ++ ) {
campi. spingere ( { etichetta : risultato [ K ] . Nome , valore : risultato [ K ] . Tipo } ) ;
}
Questo . nomicampagna = campi ;
} )
}
// Gestisce il valore
handleonchange ( evento ) {
Questo . valore = evento. dettaglio . valore ;
}
}
Produzione:
Selezioniamo il record e vediamo la tipologia.
Conclusione
Abbiamo imparato come creare una casella combinata in LWC con attributi ed esempi. Innanzitutto, abbiamo creato una casella combinata con un elenco di valori e visualizzato il valore selezionato. Successivamente, eseguiamo il rendering del modello HTML in base al valore selezionato tramite il rendering condizionale. Infine, abbiamo imparato come creare le opzioni per la casella combinata dai record Salesforce esistenti e visualizzare i campi correlati nell'interfaccia utente.