A Salesforce LWC, si voleu permetre que l'usuari seleccioni una opció de la llista d'opcions especificada, s'utilitza el quadre combinat. En aquesta guia, parlarem de com crear una caixa combinada i dels diferents atributs que admet combobox amb exemples.
Quadre combinat
Bàsicament, el quadre combinat és un camp de només lectura que proporciona una entrada per triar una opció de les opcions especificades. Ho podem crear amb l'etiqueta lightning-combobox. Els atributs són la velocitat un darrere l'altre que està separat per l'espai. Parlem d'alguns atributs que es requereixen per crear un quadre combinat.
- etiqueta – S'utilitza per especificar l'etiqueta (text) per al vostre quadre combinat.
- opcions – Cada opció pren els atributs “etiqueta” i “valor”. Podem especificar les múltiples opcions en una llista separades per comes.
- posseïdor del lloc : Abans de seleccionar una opció, l'usuari ha de conèixer la informació relacionada amb les opcions. Per tant, s'especifica aquest atribut.
- requerit : En alguns casos, és obligatori seleccionar l'opció. Podem fer que sigui necessari especificant aquest atribut.
- discapacitat : Pot ser possible impedir l'usuari seleccionant l'opció de la casella de selecció. Aquest atribut desactiva el quadre combinat.
Sintaxi:
Vegem com crear un quadre combinat amb alguns atributs importants.
nom='nom'
label='nom_etiqueta'
value={value_from_the_option}
placeholder='Text d'ajuda'
opcions={Llista_d'opcions}
onchange={handleChange} >
Especificació:
Vegem els passos per crear el quadre combinat i treballar-hi.
Al fitxer JavaScript, creeu una llista d'opcions amb etiqueta i valor dins del mètode 'getter'.
Creeu una variable que emmagatzemi l'opció predeterminada.
Escriu la funció de maneig que emmagatzema l'opció seleccionada per l'usuari des de la interfície d'usuari.
Al fitxer HTML, creeu un quadre combinat i passeu els atributs. A més, hem de passar el controlador d'esdeveniments onchange() que gestiona les opcions del quadre combinat. Pren la funció 'Handler' creada al fitxer 'js'.
En tots els exemples que parlarem en aquesta guia, la lògica es proporcionarà com a codi 'js'. Després d'això, especifiquem la captura de pantalla que inclou tot el codi 'js'.
Exemple 1:
Creeu un quadre combinat amb cinc temes (detalls) al fitxer Javascript. Especifiqueu el valor predeterminat com a 'JAVA'. Gestioneu el quadre combinat amb el mètode handleSubjectsOnChange(). Passeu el valor i els detalls als atributs 'valor i opcions' del fitxer HTML amb una etiqueta i implementeu el component.
firstExample.html
< div classe = 'slds-var-m-around_medium' >
etiqueta = 'Seleccioneu el vostre tema:'
valor = { valor }
opcions = { detalls }
al canvi = { handleSubjectsOnChange } >< / llamp-combobox>
< br >
< pàg > El teu tema: < b > {valor} < / b >< / pàg >
< / div >
< / targeta-llamp>
< / plantilla>
firstExample.js
// Crea un valor predeterminat - 'JAVA' per al Comboboxvalor = 'JAVA' ;
// Mostra els temes
aconseguir detalls ( ) {
// 5 assignatures
tornar [ { etiqueta : 'Java' , valor : 'JAVA' } ,
{ etiqueta : 'Python' , valor : 'PITON' } ,
{ etiqueta : 'HTML' , valor : 'HTML' } ,
{ etiqueta : 'C' , valor : 'C' } ,
{ etiqueta : 'C++' , valor : 'C++' } ] ;
}
// Gestiona la lògica per establir el valor
handleSubjectsOnChange ( esdeveniment ) {
això . valor = esdeveniment. detall . valor ;
}
}
Codi sencer:
firstComponent.js-meta.xml
versió = '1.0' ?><és exposat> veritat < / està exposat>
< / objectius>
< / LightningComponentBundle>
Sortida:
Afegiu aquest component a la pàgina 'Registre' de qualsevol objecte. Al fitxer HTML, mostrem el valor a l'etiqueta de paràgraf. Quan un usuari tria qualsevol opció, es mostrarà en negreta. Per defecte, 'JAVA' està seleccionat i es mostra després que el component s'hagi representat a la pàgina.
Escollim el tema com a 'C'. 'C' es torna a sota del quadre combinat.
Exemple 2:
En aquest exemple, representarem els diferents components en funció dels valors de la llista de selecció de tipus de campanya (de l'objecte Campaign).
- Si el tipus de campanya és 'Conferència', representarem la plantilla que retorna el text - Estat de la campanya: PLANIFICAT
- Si el tipus de campanya és 'Webinar', representarem la plantilla que retorna el text – Estat de la campanya: COMPLET
- Si el tipus de campanya és 'Socis', representarem la plantilla que retorna el text – Estat de la campanya: EN CUR
- Estat de la campanya: ABORTADA per a la resta d'opcions.
segonExample.html
< div classe = 'slds-var-m-around_medium' estil = 'alçada: 20 px; amplada: 400 px' >
=
opcions = { CampaignTypeValues. dades .valors }
al canvi = { handleChange } >
< / llamp-combobox>
< / plantilla>< br / >
< / div >
< br >< br >
= { conferència } >
< centre > Estat de la campanya: < b >< i > PLANIFICAT< / i >< / b > < / centre >
< / plantilla>
= { webinarval } >
< centre > Estat de la campanya: < b >< i > COMPLET < / i >< / b > < / centre >
< / plantilla>
= { sociologia } >
< centre > Estat de la campanya: < b >< i > EN CURSO< / i >< / b > < / centre >
< / plantilla>
< centre > Estat de la campanya: < b >< i > ABORTAT< / i >< / b > < / centre >
< / plantilla>
< / targeta-llamp>
< / plantilla>
secondExample.js
Importem l'objecte Campaign (estàndard) com a CAMPAIGN i Type des d'ell com a TYPE. Des del lightning/uiObjectInfoApi, importem els getPicklistValues i getObjectInfo. Aquests obtindran els valors de la llista de selecció disponibles al camp Tipus. Aquestes s'utilitzaran com a opcions per al quadre combinat. Els següents es gestionen a handleChange().
- Si el valor === 'Conferència', establim la variable conferenceval com a true i les altres dues com a fals.
- Si el valor === 'Webinar', establim la variable webinarval com a true i les altres dues com a fals.
- Si el valor === 'Partners', establim la variable partnerval com a true i les altres dues com a fals.
- Si el valor no es troba a les opcions donades, totes són falses.
importar CAMPANYA des de '@salesforce/schema/Campaign' ;
importar ESCRIU des de '@salesforce/schema/Campaign.Type' ;
importar { getPicklistValues } des de 'lightning/uiObjectInfoApi' ;
importar { getObjectInfo } des de 'lightning/uiObjectInfoApi' ;
exportar per defecte classe Segon exemple s'estén Element Lightning {
@ valor de la pista ;
// Obteniu l'objecte
@ filferro ( getObjectInfo , { objectApiName : CAMPANYA } )
objectInfo ;
// Obteniu el tipus de campanya - Llista de selecció
@ filferro ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TIPUS } )
CampaignTypeValues ;
conferència = fals ;
webinarval = fals ;
sociologia = fals ;
altres = fals ;
// Gestionar la lògica
handleChange ( esdeveniment ) {
això . valor = esdeveniment. objectiu . valor ;
si ( això . valor === 'Conferència' ) {
// Mostra l'estat com a PLANIFICAT
això . conferència = veritat ;
això . webinarval = fals ;
això . sociologia = fals ;
}
altra cosa si ( això . valor === 'Webinars' ) {
// Mostra l'estat com a COMPLET
això . webinarval = veritat ;
això . conferència = fals ;
això . sociologia = fals ;
}
altra cosa si ( això . valor === 'Socis' ) {
// Mostra l'estat com a EN CÀRREC
això . webinarval = fals ;
això . conferència = fals ;
això . sociologia = veritat ;
}
altra cosa {
// Mostra l'estat com IN ABORTED
això . webinarval = fals ;
això . conferència = fals ;
això . sociologia = fals ;
}
}
}
secondComponent.js-meta.xml
versió = '1.0' ?><és exposat> veritat < / està exposat>
< / objectius>
< / LightningComponentBundle>
Sortida:
Tipus: 'Conferència'. Per tant, l'estat és 'PLANIFICAT'.
Tipus: 'Webinar'. Per tant, l'estat és 'COMPLET'.
Tipus: 'Socis'. Per tant, l'estat és 'EN CÀROLL'.
El tipus no es troba a les opcions proporcionades. Per tant, l'estat és 'ABORTAT'.
Exemple 3:
Ara, creem un quadre combinat amb els registres de la campanya com a opcions. Si seleccionem qualsevol opció, es retornarà el tipus de campanya corresponent a la IU.
Primer, hem de crear una classe Apex amb el mètode getCampaign(). Aquest mètode retorna una llista de totes les campanyes amb l'identificador, el nom, el tipus i l'estat.
CampaignRecords. apxcpúblic amb compartir classe CampaignRecords {
@ Aura habilitada ( cacheable = veritat )
// Obteniu la llista de campanyes
públic estàtica Llista < Campanya > getCampaign ( ) {
tornar [ SELECCIONA Id , Nom , Tipus , Estat de la campanya ] ;
}
}
tercerExemple.html
< div classe = 'slds-var-m-around_medium' estil = 'alçada: 20 px; amplada: 400 px' >
etiqueta = 'Seleccioneu el nom de la campanya'
opcions = { Opcions de campanya }
valor = { valor }
al canvi = { manejar el canvi }
>
< / llamp-combobox>
< / div >< br >
< br >
< pàg > Tipus de campanya per a aquesta campanya: < b > {valor} < / b >< / pàg >
< / targeta-llamp>
< / plantilla>
tercerExample.js
- Hem d'especificar el mètode que obté una llista de campanyes dins del mètode connectatcallback(). Declara una matriu anomenada 'camps' i emmagatzema el resultat amb l'etiqueta com a ID de campanya i el valor com a Tipus de campanya. Aquesta matriu és l'entrada a campanyNames (això s'ha de crear amb el decorador de pistes).
- Al mètode d'obtenció Campaignoptions(), retorneu la matriu de noms de campanya. Per tant, combobox utilitza aquestes opcions.
- Establiu el valor seleccionat al mètode del controlador handleonchange().
importar getCampaign de '@salesforce/apex/CampaignRecords.getCampaign' ;
exportar per defecte classe Tercer exemple s'estén Element Lightning {
valor = '' ;
@ seguiment de noms de campanya = [ ] ;
aconseguir Opcions de campanya ( ) {
tornar això . campanyes ;
}
// Afegiu les opcions a la matriu de camps des de l'Apex.
// l'etiqueta serà el nom de la campanya
// el valor serà el tipus de campanya
Devolució de trucada connectada ( ) {
getCampaign ( )
. aleshores ( resultat => {
deixar campaments = [ ] ;
per ( era k = 0 ; k < resultat. llargada ; k ++ ) {
campaments. empènyer ( { etiqueta : resultat [ k ] . Nom , valor : resultat [ k ] . Tipus } ) ;
}
això . campanyes = campaments ;
} )
}
// Gestiona el valor
manejar el canvi ( esdeveniment ) {
això . valor = esdeveniment. detall . valor ;
}
}
Sortida:
Seleccionem el registre i veurem el tipus.
Conclusió
Hem après a crear un quadre combinat a LWC amb atributs i exemples. Primer, vam crear un quadre combinat amb una llista de valors i vam mostrar el valor seleccionat. A continuació, renderitzem la plantilla HTML en funció del valor seleccionat mitjançant la representació condicional. Finalment, vam aprendre a crear les opcions per al quadre combinat a partir dels registres de Salesforce existents i a mostrar els camps relacionats a la interfície d'usuari.