În Salesforce LWC, dacă doriți să permiteți utilizatorului să selecteze o opțiune din lista de opțiuni specificată, se utilizează caseta combinată. În acest ghid, vom discuta despre cum să creați o casetă combinată și despre diferitele atribute acceptate de caseta combinată cu exemple.
Combobox
Practic, combobox este un câmp numai pentru citire care oferă o intrare pentru a alege o opțiune dintre opțiunile specificate. Putem crea acest lucru folosind eticheta lightning-combobox. Atributele sunt viteza una după alta, care este separată de spațiu. Să discutăm câteva atribute care sunt necesare în timpul creării unei casete combinate.
- eticheta – Acesta este folosit pentru a specifica eticheta (textul) pentru caseta dvs. combo.
- Opțiuni – Fiecare opțiune are atributele „etichetă” și „valoare”. Putem specifica opțiunile multiple într-o listă separată prin virgulă.
- substituent : Înainte de a selecta o opțiune, utilizatorul trebuie să cunoască informațiile legate de opțiuni. Deci, acest atribut este specificat.
- necesar : În unele cazuri, este obligatoriu să selectați opțiunea. O putem face necesară specificând acest atribut.
- dezactivat : Este posibil să împiedicați utilizatorul selectând opțiunea din caseta de selectare. Acest atribut dezactivează caseta combinată.
Sintaxă:
Să vedem cum să creăm o casetă combinată cu câteva atribute importante.
nume='nume'
label='nume_etichetă'
valoare={value_from_the_option}
placeholder='Text de ajutor'
options={Lista_de_opțiuni}
onchange={handleChange} >
Specificație:
Să vedem pașii pentru a crea caseta combinată și a lucra cu ea.
În fișierul JavaScript, creați o listă de opțiuni cu etichetă și valoare în cadrul metodei „getter”.
Creați o variabilă care stochează opțiunea implicită.
Scrieți funcția de mâner care stochează opțiunea care este selectată de utilizator din UI.
În fișierul HTML, creați o casetă combinată și transmiteți atributele. De asemenea, trebuie să transmitem handlerul de evenimente onchange() care se ocupă de opțiunile din caseta combinată. Este nevoie de funcția „Handler” creată în fișierul „js”.
În toate exemplele pe care le vom discuta în acest ghid, logica va fi furnizată ca cod „js”. După aceea, specificăm captura de ecran care include întregul cod „js”.
Exemplul 1:
Creați o casetă combinată cu cinci subiecte (detalii) în fișierul Javascript. Specificați valoarea implicită ca „JAVA”. Gestionați caseta combinată în metoda handleSubjectsOnChange(). Transmiteți valoarea și detaliile atributelor „valoare și opțiuni” din fișierul HTML cu o etichetă și implementați componenta.
firstExample.html
<șablon>< div clasă = „slds-var-m-around_medium” >
eticheta = „Selectați subiectul:”
valoare = { valoare }
Opțiuni = { Detalii }
cu privire la schimbările = { handleSubjectsOnChange } >< / fulger-combobox>
< br >
< p > Subiectul tău: < b > {valoare} < / b >< / p >
< / div >
< / carte-fulger>
< / șablon>
firstExample.js
// Creați valoarea implicită - „JAVA” pentru Comboboxvaloare = „JAVA” ;
// Arată subiectele
obține Detalii ( ) {
// 5 subiecte
întoarcere [ { eticheta : „Java” , valoare : „JAVA” } ,
{ eticheta : 'Piton' , valoare : 'PITON' } ,
{ eticheta : „HTML” , valoare : „HTML” } ,
{ eticheta : „C” , valoare : „C” } ,
{ eticheta : „C++” , valoare : „C++” } ] ;
}
// Gestionează logica pentru a seta valoarea
handleSubjectsOnChange ( eveniment ) {
acest . valoare = eveniment. detaliu . valoare ;
}
}
Întregul cod:
firstComponent.js-meta.xml
versiune = „1.0” ?><ținte>
<țintă> lightning__AppPage < / tinta>
<țintă> fulger__RecordPage < / tinta>
< / tinte>
< / LightningComponentBundle>
Ieșire:
Adăugați această componentă la pagina „Înregistrare” a oricărui obiect. În fișierul HTML, afișăm valoarea din eticheta paragraf. Când un utilizator alege orice opțiune, aceasta va fi afișată cu caractere aldine. În mod implicit, „JAVA” este selectat și afișat după ce componenta este redată pe pagină.
Să alegem subiectul ca „C”. „C” este returnat sub caseta combinată.
Exemplul 2:
În acest exemplu, vom reda diferitele componente pe baza valorilor listei de selectare Campaign Type (din obiectul Campaign).
- Dacă tipul de campanie este „Conferință”, vom reda șablonul care returnează textul – Stare campanie: PLANIFICAT
- Dacă tipul de campanie este „Webinar”, vom reda șablonul care returnează textul – Stare campanie: TERMINAT
- Dacă tipul de campanie este „Parteneri”, vom reda șablonul care returnează textul – Stare campanie: ÎN PROGRES
- Starea campaniei: ABORTAT pentru restul opțiunilor.
secondExample.html
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
=
Opțiuni = { CampaignTypeValues. date .valori }
cu privire la schimbările = { handleChange } >
< / fulger-combobox>
< / șablon>< br / >
< / div >
< br >< br >
= { conferinta } >
< centru > Starea campaniei: < b >< i > PLANIFICAT< / i >< / b > < / centru >
< / șablon>
= { webinarval } >
< centru > Starea campaniei: < b >< i > TERMINAT< / i >< / b > < / centru >
< / șablon>
= { parteneriatul } >
< centru > Starea campaniei: < b >< i > ÎN CARE< / i >< / b > < / centru >
< / șablon>
< centru > Starea campaniei: < b >< i > ABORTAT< / i >< / b > < / centru >
< / șablon>
< / carte-fulger>
< / șablon>
secondExample.js
Importăm obiectul Campaign (Standard) ca CAMPAIGN și Type din el ca TYPE. Din lightning/uiObjectInfoApi, importăm getPicklistValues și getObjectInfo. Acestea vor primi valorile listei de selectare disponibile în câmpul Tip. Acestea vor fi utilizate ca opțiuni pentru caseta combinată. Următoarele sunt gestionate în handleChange().
- Dacă valoarea === „Conferință”, setăm variabila conferință la adevărat și celelalte două ca false.
- Dacă valoarea === „Webinar”, setăm variabila webinarval la adevărat și celelalte două la false.
- Dacă valoarea === „Parteneri”, setăm variabila partener la adevărat și celelalte două la false.
- Dacă valoarea nu este în opțiunile date, toate sunt false.
import CAMPANIA de la „@salesforce/schema/Campaign” ;
import TYPE de la „@salesforce/schema/Campaign.Type” ;
import { getPicklistValues } din „fulger/uiObjectInfoApi” ;
import { getObjectInfo } din „fulger/uiObjectInfoApi” ;
export Mod implicit clasă Al doilea exemplu se extinde LightningElement {
@ valoarea pistei ;
// Obțineți obiectul
@ sârmă ( getObjectInfo , { objectApiName : CAMPANIE } )
obiectInfo ;
// Obțineți tipul de campanie - Lista de alegere
@ sârmă ( getPicklistValues , { recordTypeId : „$objectInfo.data.defaultRecordTypeId” , fieldApiName : TIP } )
CampaignTypeValues ;
conferinta = fals ;
webinarval = fals ;
parteneriatul = fals ;
alte = fals ;
// Gestionează logica
handleChange ( eveniment ) {
acest . valoare = eveniment. ţintă . valoare ;
dacă ( acest . valoare === 'Conferinţă' ) {
// Afișează starea ca PLANIFICAT
acest . conferinta = Adevărat ;
acest . webinarval = fals ;
acest . parteneriatul = fals ;
}
altfel dacă ( acest . valoare === „Webinarii” ) {
// Afișează starea ca TERMINATĂ
acest . webinarval = Adevărat ;
acest . conferinta = fals ;
acest . parteneriatul = fals ;
}
altfel dacă ( acest . valoare === „Parteneri” ) {
// Afișează starea ca ÎN CARE
acest . webinarval = fals ;
acest . conferinta = fals ;
acest . parteneriatul = Adevărat ;
}
altfel {
// Afișează starea ca IN ABORTED
acest . webinarval = fals ;
acest . conferinta = fals ;
acest . parteneriatul = fals ;
}
}
}
secondComponent.js-meta.xml
versiune = „1.0” ?><ținte>
<țintă> lightning__AppPage < / tinta>
<țintă> lightning__RecordPage < / tinta>
< / tinte>
< / LightningComponentBundle>
Ieșire:
Tip – „Conferință”. Deci, starea este „PLANIFICAT”.
Tip – „Webinar”. Deci, starea este „COMPLETED”.
Tip – „Parteneri”. Deci, starea este „ÎN CARE”.
Tipul nu se află în opțiunile furnizate. Deci, starea este „ABORTAT”.
Exemplul 3:
Acum, creăm o casetă combinată cu înregistrările campaniei ca opțiuni. Dacă selectăm orice opțiune, tipul de campanie corespunzător va fi returnat în interfața de utilizare.
În primul rând, trebuie să creăm o clasă Apex cu metoda getCampaign(). Această metodă returnează o listă cu toate campaniile cu id-ul, numele, tipul și starea.
CampaignRecords. apxcpublic cu partajare clasă CampaignRecords {
@ Aura Activată ( stocabil în cache = Adevărat )
// Obțineți lista de campanii
public static Listă < Campanie > getCampaign ( ) {
întoarcere [ SELECT ID , Nume , Tip , Starea din campanie ] ;
}
}
al treileaExample.html
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
eticheta = „Selectați numele campaniei”
Opțiuni = { Opțiuni de campanie }
valoare = { valoare }
cu privire la schimbările = { gestionează schimbarea }
>
< / fulger-combobox>
< / div >< br >
< br >
< p > Tip de campanie pentru această campanie: < b > {valoare} < / b >< / p >
< / carte-fulger>
< / șablon>
thirdExample.js
- Trebuie să specificăm metoda care primește o listă de campanii în cadrul metodei connectedcallback(). Declarați o matrice numită „tabere” și stocați rezultatul cu eticheta ca ID campanie și valoarea ca Tip campanie. Această matrice este intrarea în campaniaNume (aceasta trebuie creată cu decoratorul piesei).
- În metoda de obținere Campaignoptions(), returnați matricea campaignNames. Deci, combobox folosește aceste opțiuni.
- Setați valoarea selectată în metoda handleonchange().
import getCampaign de la „@salesforce/apex/CampaignRecords.getCampaign” ;
export Mod implicit clasă Al treilea exemplu se extinde LightningElement {
valoare = '' ;
@ urmăriți numele campaniilor = [ ] ;
obține Opțiuni de campanie ( ) {
întoarcere acest . campanii ;
}
// Adăugați opțiunile la matricea taberelor din Apex.
// eticheta va fi Numele campaniei
// valoarea va fi Tipul de campanie
conectatCallback ( ) {
getCampaign ( )
. apoi ( rezultat => {
lasa tabere = [ ] ;
pentru ( a fost k = 0 ; k < rezultat. lungime ; k ++ ) {
tabere. Apăsaţi ( { eticheta : rezultat [ k ] . Nume , valoare : rezultat [ k ] . Tip } ) ;
}
acest . campanii = tabere ;
} )
}
// Gestionează valoarea
gestionează schimbarea ( eveniment ) {
acest . valoare = eveniment. detaliu . valoare ;
}
}
Ieșire:
Să selectăm înregistrarea și să vedem tipul.
Concluzie
Am învățat cum să creăm o casetă combinată în LWC cu atribute și exemple. Mai întâi, am creat o casetă combinată cu o listă de valori și am afișat valoarea selectată. Apoi, redăm șablonul HTML pe baza valorii selectate prin randarea condiționată. În cele din urmă, am învățat cum să creăm opțiunile pentru caseta combinată din înregistrările Salesforce existente și să afișam câmpurile aferente în interfața de utilizare.