Ak chcete v Salesforce LWC umožniť používateľovi vybrať možnosť zo zadaného zoznamu možností, použije sa combobox. V tejto príručke budeme diskutovať o tom, ako vytvoriť combobox a rôzne atribúty podporované comboboxom s príkladmi.
Combobox
V zásade je combobox pole len na čítanie, ktoré poskytuje vstup na výber možnosti zo špecifikovaných možností. Môžeme to vytvoriť pomocou značky lightning-combobox. Atribúty sú rýchlosť jeden po druhom, ktoré sú oddelené medzerou. Poďme diskutovať o niektorých atribútoch, ktoré sú potrebné pri vytváraní comboboxu.
- štítok – Používa sa na určenie štítka (textu) pre vaše pole so zoznamom.
- možnosti – Každá možnosť má atribúty „label“ a „value“. Viaceré možnosti môžeme špecifikovať v zozname oddelenom čiarkou.
- zástupný symbol : Pred výberom možnosti musí používateľ poznať informácie týkajúce sa možností. Tento atribút je teda špecifikovaný.
- požadovaný : V niektorých prípadoch je výber možnosti povinný. Zadaním tohto atribútu ho môžeme urobiť povinným.
- zdravotne postihnutých : Je možné zabrániť používateľovi výberom možnosti zo začiarkavacieho políčka. Tento atribút zakáže combobox.
Syntax:
Pozrime sa, ako vytvoriť combobox s niektorými dôležitými atribútmi.
meno='meno'
label='label_name'
value={value_from_the_option}
placeholder='Pomocný text'
options={List_of_options}
onchange={handleChange} >
špecifikácia:
Pozrime sa na kroky na vytvorenie comboboxu a prácu s ním.
V súbore JavaScript vytvorte zoznam možností s označením a hodnotou v metóde „getter“.
Vytvorte premennú, ktorá uloží predvolenú možnosť.
Napíšte funkciu rukoväte, ktorá uloží voľbu, ktorú vyberie používateľ z používateľského rozhrania.
V súbore HTML vytvorte pole so zoznamom a zadajte atribúty. Tiež musíme odovzdať obslužnú rutinu udalosti onchange(), ktorá spracováva možnosti v comboboxe. Vyžaduje funkciu „Handler“ vytvorenú v súbore „js“.
Vo všetkých príkladoch, o ktorých budeme diskutovať v tejto príručke, bude logika poskytnutá ako kód „js“. Potom zadáme snímku obrazovky, ktorá obsahuje celý kód „js“.
Príklad 1:
Vytvorte combobox s piatimi predmetmi (podrobnosťami) v súbore Javascript. Zadajte predvolenú hodnotu ako „JAVA“. Spracujte pole so zoznamom v metóde handleSubjectsOnChange(). Odovzdajte hodnotu a podrobnosti do atribútov „value and options“ v súbore HTML s označením a nasaďte komponent.
firstExample.html
<šablóna>< div trieda = 'slds-var-m-around_medium' >
štítok = 'Vyberte svoj predmet:'
hodnotu = { hodnotu }
možnosti = { podrobnosti }
pri zmene = { handleSubjectsOnChange } < / lightning-combobox>
< br >
< p > Váš predmet: < b > {value} < / b < / p >
< / div >
< / blesková karta>
< / šablóna>
firstExample.js
// Vytvorenie predvolenej hodnoty - 'JAVA' pre Comboboxhodnotu = 'JAVA' ;
// Zobraziť predmety
dostať podrobnosti ( ) {
// 5 predmetov
vrátiť [ { štítok : 'Java' , hodnotu : 'JAVA' } ,
{ štítok : 'Python' , hodnotu : „PYTHON“ } ,
{ štítok : 'HTML' , hodnotu : 'HTML' } ,
{ štítok : 'C' , hodnotu : 'C' } ,
{ štítok : 'C++' , hodnotu : 'C++' } ] ;
}
// Spracovanie logiky na nastavenie hodnoty
handleSubjectsOnChange ( udalosť ) {
toto . hodnotu = udalosť. detail . hodnotu ;
}
}
Celý kód:
firstComponent.js-meta.xml
verzia = '1,0' ?>< / ciele>
< / LightningComponentBundle>
Výkon:
Pridajte tento komponent na stránku „Záznam“ akéhokoľvek objektu. V súbore HTML zobrazujeme hodnotu v značke odseku. Keď si používateľ vyberie akúkoľvek možnosť, zobrazí sa tučným písmom. V predvolenom nastavení sa po vykreslení komponentu na stránke vyberie a zobrazí „JAVA“.
Vyberme predmet ako „C“. „C“ sa vráti pod pole so zoznamom.
Príklad 2:
V tomto príklade vykreslíme rôzne komponenty na základe hodnôt výberového zoznamu Typ kampane (z objektu Kampaň).
- Ak je typ kampane „Konferencia“, vykreslíme šablónu, ktorá vráti text – Stav kampane: PLANNED
- Ak je typ kampane „Webinár“, vykreslíme šablónu, ktorá vráti text – Stav kampane: DOKONČENÉ
- Ak je typ kampane „Partneri“, vykreslíme šablónu, ktorá vráti text – Stav kampane: PREBIEHA
- Stav kampane: ZRUŠENÁ pre ostatné možnosti.
secondExample.html
<šablóna>< div trieda = 'slds-var-m-around_medium' štýl = 'výška:20px; šírka:400px' >
<šablóna šťastie:ak = { CampaignTypeValues. údajov } >
možnosti = { CampaignTypeValues. údajov .hodnoty }
pri zmene = { rukoväťZmeniť } >
< / lightning-combobox>
< / šablóna>< br / >
< / div >
< br < br >
<šablóna šťastie:ak = { konferenčný } >
< stred > Stav kampane: < b < i > PLÁNOVANÉ< / i < / b > < / stred >
< / šablóna>
<šablóna šťastie:elseif = { webinarval } >
< stred > Stav kampane: < b < i > DOKONČENÉ< / i < / b > < / stred >
< / šablóna>
<šablóna šťastie:elseif = { partnerský } >
< stred > Stav kampane: < b < i > PREBIEHA< / i < / b > < / stred >
< / šablóna>
<šablóna šťastie:else>
< stred > Stav kampane: < b < i > ABORTED< / i < / b > < / stred >
< / šablóna>
< / blesková karta>
< / šablóna>
secondExample.js
Objekt Campaign (Standard) importujeme ako CAMPAIGN a Type z neho ako TYPE. Z lightning/uiObjectInfoApi importujeme getPicklistValues a getObjectInfo. Tým sa získajú hodnoty výberového zoznamu dostupné v poli Typ. Tieto budú použité ako možnosti pre combobox. Nasledujúce sú spracované v handleChange().
- Ak je hodnota === “Conference”, premennú conferenceval nastavíme na hodnotu true a ostatné dve na hodnotu false.
- Ak je hodnota === “Webinar”, premennú webinarval nastavíme na hodnotu true a ďalšie dve na hodnotu false.
- Ak je hodnota === „Partners“, premennú partnerval nastavíme na hodnotu true a ďalšie dve na hodnotu false.
- Ak hodnota nie je v daných možnostiach, všetky sú nepravdivé.
importovať KAMPAŇ od '@salesforce/schema/Campaign' ;
importovať TYPE od '@salesforce/schema/Campaign.Type' ;
importovať { getPicklistValues } od 'lightning/uiObjectInfoApi' ;
importovať { getObjectInfo } od 'lightning/uiObjectInfoApi' ;
export predvolená trieda Druhý Príklad predlžuje LightningElement {
@ sledovať hodnotu ;
// Získajte objekt
@ drôt ( getObjectInfo , { objectApiName : KAMPAŇ } )
objectInfo ;
// Získanie typu kampane – výberový zoznam
@ drôt ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TYP } )
CampaignTypeValues ;
konferenčný = falošný ;
webinarval = falošný ;
partnerský = falošný ;
iné = falošný ;
// Ovládanie logiky
rukoväťZmeniť ( udalosť ) {
toto . hodnotu = udalosť. cieľ . hodnotu ;
ak ( toto . hodnotu === 'konferencia' ) {
// Zobraziť stav ako PLÁNOVANÝ
toto . konferenčný = pravda ;
toto . webinarval = falošný ;
toto . partnerský = falošný ;
}
inak ak ( toto . hodnotu === „webináre“ ) {
// Zobrazenie stavu ako DOKONČENÉ
toto . webinarval = pravda ;
toto . konferenčný = falošný ;
toto . partnerský = falošný ;
}
inak ak ( toto . hodnotu === 'Partneri' ) {
// Zobraziť stav ako PREBIEHA
toto . webinarval = falošný ;
toto . konferenčný = falošný ;
toto . partnerský = pravda ;
}
inak {
// Zobraziť stav ako IN ABORTED
toto . webinarval = falošný ;
toto . konferenčný = falošný ;
toto . partnerský = falošný ;
}
}
}
secondComponent.js-meta.xml
verzia = '1,0' ?>< / ciele>
< / LightningComponentBundle>
Výkon:
Typ – „Konferencia“. Stav je teda „PLÁNOVANÉ“.
Typ – „Webinár“. Stav je teda „DOKONČENÉ“.
Typ – „Partneri“. Stav je teda „PREKONÁVA“.
Typ nie je v ponúkaných možnostiach. Stav je teda „ABORTED“.
Príklad 3:
Teraz vytvoríme combobox so záznamami kampane ako možnosťami. Ak vyberieme akúkoľvek možnosť, v používateľskom rozhraní sa vráti zodpovedajúci typ kampane.
Najprv musíme vytvoriť triedu Apex pomocou metódy getCampaign(). Táto metóda vráti zoznam všetkých kampaní s ID, názvom, typom a stavom.
CampaignRecords. apxcverejné so zdieľaním trieda CampaignRecords {
@ AuraEnabled ( cacheovateľné = pravda )
// Získajte zoznam kampaní
verejnosti statické Zoznam < kampaň > getCampaign ( ) {
vrátiť [ SELECT Id , názov , Typ , Stav z kampane ] ;
}
}
thirdExample.html
<šablóna>< div trieda = 'slds-var-m-around_medium' štýl = 'výška:20px; šírka:400px' >
štítok = 'Vybrať názov kampane'
možnosti = { Možnosti kampane }
hodnotu = { hodnotu }
pri zmene = { handleonchange }
>
< / lightning-combobox>
< / div < br >
< br >
< p > Typ kampane pre túto kampaň: < b > {value} < / b < / p >
< / blesková karta>
< / šablóna>
thirdExample.js
- Musíme špecifikovať metódu, ktorá získa zoznam kampaní v rámci metódy connectedcallback(). Deklarujte pole s názvom „camps“ a uložte výsledok s označením ako ID kampane a hodnotou ako Typ kampane. Toto pole je vstupom do názvov kampaní (musí sa vytvoriť dekorátorom stôp).
- V metóde získavania Campaignoptions() vráťte pole campaignNames. Takže combobox používa tieto možnosti.
- Nastavte vybratú hodnotu v metóde handleonchange().
importovať getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
export predvolená trieda Tretí príklad predlžuje LightningElement {
hodnotu = '' ;
@ sledovať názvy kampaní = [ ] ;
dostať Možnosti kampane ( ) {
vrátiť toto . názvy kampaní ;
}
// Pridajte možnosti do poľa camps z Apexu.
// štítok bude Názov kampane
// hodnota bude typ kampane
pripojené spätné volanie ( ) {
getCampaign ( )
. potom ( výsledok => {
nechať tábory = [ ] ;
pre ( bol k = 0 ; k < výsledok. dĺžka ; k ++ ) {
táborov. TAM ( { štítok : výsledok [ k ] . názov , hodnotu : výsledok [ k ] . Typ } ) ;
}
toto . názvy kampaní = táborov ;
} )
}
// Spracovanie hodnoty
handleonchange ( udalosť ) {
toto . hodnotu = udalosť. detail . hodnotu ;
}
}
Výkon:
Vyberieme záznam a uvidíme typ.
Záver
Naučili sme sa, ako vytvoriť combobox v LWC s atribútmi a príkladmi. Najprv sme vytvorili combobox so zoznamom hodnôt a zobrazili vybranú hodnotu. Ďalej vykreslíme šablónu HTML na základe vybranej hodnoty prostredníctvom podmieneného vykreslenia. Nakoniec sme sa naučili, ako vytvoriť možnosti pre combobox z existujúcich záznamov Salesforce a zobraziť súvisiace polia v používateľskom rozhraní.