Pokud chcete v Salesforce LWC umožnit uživateli vybrat možnost ze zadaného seznamu možností, použije se combobox. V této příručce probereme, jak vytvořit combobox a různé atributy podporované comboboxem s příklady.
Combobox
Combobox je v zásadě pole pouze pro čtení, které poskytuje vstup pro výběr možnosti ze zadaných možností. Můžeme to vytvořit pomocí tagu lightning-combobox. Atributy jsou rychlost jedna za druhou, která je oddělena mezerou. Pojďme diskutovat o některých atributech, které jsou vyžadovány při vytváření comboboxu.
- označení – Slouží k určení štítku (textu) pro pole se seznamem.
- možnosti – Každá možnost má atributy „label“ a „value“. Můžeme zadat více možností v seznamu odděleném čárkou.
- zástupný symbol : Před výběrem možnosti musí uživatel znát informace týkající se možností. Tento atribut je tedy specifikován.
- Požadované : V některých případech je nutné tuto možnost vybrat. Zadáním tohoto atributu jej můžeme učinit povinným.
- zakázáno : Je možné zabránit uživateli výběrem možnosti ze zaškrtávacího políčka. Tento atribut zakáže pole se seznamem.
Syntax:
Podívejme se, jak vytvořit combobox s některými důležitými atributy.
label='název_štítku'
value={value_from_the_option}
placeholder='text nápovědy'
options={List_of_options}
onchange={handleChange} >
Specifikace:
Podívejme se na kroky k vytvoření comboboxu a práci s ním.
V souboru JavaScript vytvořte seznam možností s popiskem a hodnotou uvnitř metody „getter“.
Vytvořte proměnnou, která uloží výchozí možnost.
Napište funkci handle, která ukládá možnost, kterou uživatel vybral z uživatelského rozhraní.
V souboru HTML vytvořte pole se seznamem a předejte atributy. Také musíme předat obslužnou rutinu události onchange(), která zpracovává možnosti v poli se seznamem. Přebírá funkci „Handler“ vytvořenou v souboru „js“.
Ve všech příkladech, o kterých budeme v této příručce diskutovat, bude logika poskytnuta jako kód „js“. Poté určíme snímek obrazovky, který obsahuje celý kód „js“.
Příklad 1:
Vytvořte combobox s pěti předměty (podrobnostmi) v souboru Javascript. Zadejte výchozí hodnotu jako „JAVA“. Zpracujte pole se seznamem v metodě handleSubjectsOnChange(). Předejte hodnotu a podrobnosti atributům „value and options“ v souboru HTML se štítkem a nasaďte komponentu.
firstExample.html
<šablona>< div třída = 'slds-var-m-around_medium' >
označení = 'Vyberte svůj předmět:'
hodnota = { hodnota }
možnosti = { podrobnosti }
při změně = { handleSubjectsOnChange } < / lightning-combobox>
< br >
< p > Tvůj předmět: < b > {hodnota} < / b < / p >
< / div >
< / blesková karta>
< / šablona>
firstExample.js
// Vytvoří výchozí hodnotu - 'JAVA' pro Comboboxhodnota = 'JÁVA' ;
// Zobrazit předměty
dostat podrobnosti ( ) {
// 5 předmětů
vrátit se [ { označení : 'Jáva' , hodnota : 'JÁVA' } ,
{ označení : 'Krajta' , hodnota : 'KRAJTA' } ,
{ označení : 'HTML' , hodnota : 'HTML' } ,
{ označení : 'C' , hodnota : 'C' } ,
{ označení : 'C++' , hodnota : 'C++' } ] ;
}
// Zpracování logiky pro nastavení hodnoty
handleSubjectsOnChange ( událost ) {
tento . hodnota = událost. detail . hodnota ;
}
}
Celý kód:
firstComponent.js-meta.xml
verze = '1,0' ?>< / cíle>
< / LightningComponentBundle>
Výstup:
Přidejte tuto komponentu na stránku „Záznam“ libovolného objektu. V souboru HTML zobrazíme hodnotu ve značce odstavce. Když uživatel vybere jakoukoli možnost, zobrazí se tučně. Ve výchozím nastavení je vybrána a zobrazena po vykreslení komponenty na stránce „JAVA“.
Zvolme předmět jako „C“. „C“ se vrátí pod pole se seznamem.
Příklad 2:
V tomto příkladu vykreslíme různé komponenty na základě hodnot výběrového seznamu Typ kampaně (z objektu Kampaň).
- Pokud je typ kampaně „Konference“, vykreslíme šablonu, která vrátí text – Stav kampaně: PLANNED
- Pokud je typ kampaně „Webinář“, vykreslíme šablonu, která vrátí text – Stav kampaně: DOKONČENO
- Pokud je typ kampaně „Partneři“, vykreslíme šablonu, která vrátí text – Stav kampaně: PROBÍHÁ
- Stav kampaně: ZRUŠENO pro ostatní možnosti.
secondExample.html
<šablona>< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >
<šablona štěstí:if = { CampaignTypeValues. data } >
možnosti = { CampaignTypeValues. data .hodnoty }
při změně = { rukojeťZměnit } >
< / lightning-combobox>
< / šablona>< br / >
< / div >
< br < br >
<šablona štěstí:if = { konferenční } >
< centrum > Stav kampaně: < b < i > PLÁNOVANÉ< / i < / b > < / centrum >
< / šablona>
<šablona štěstí:elseif = { webinarval } >
< centrum > Stav kampaně: < b < i > DOKONČENO< / i < / b > < / centrum >
< / šablona>
<šablona štěstí:elseif = { partnerský } >
< centrum > Stav kampaně: < b < i > PROBÍHÁ< / i < / b > < / centrum >
< / šablona>
<šablona štěstí:else>
< centrum > Stav kampaně: < b < i > ABORTED< / i < / b > < / centrum >
< / šablona>
< / blesková karta>
< / šablona>
secondExample.js
Objekt Campaign (Standard) importujeme jako CAMPAIGN a Type z něj jako TYPE. Z lightning/uiObjectInfoApi importujeme getPicklistValues a getObjectInfo. Tím se získají hodnoty výběrového seznamu dostupné v poli Typ. Ty budou použity jako možnosti pro combobox. Následující jsou zpracovány v handleChange().
- Pokud je hodnota === “Conference”, nastavíme proměnnou konference na hodnotu true a zbývající dvě na hodnotu false.
- Pokud je hodnota === “Webinar”, nastavíme proměnnou webinarval na true a další dvě na false.
- Pokud je hodnota === “Partners”, nastavíme proměnnou partnerval na hodnotu true a zbývající dvě na hodnotu false.
- Pokud hodnota není v daných možnostech, všechny jsou nepravdivé.
import KAMPAŇ od '@salesforce/schema/Campaign' ;
import TYPE od '@salesforce/schema/Campaign.Type' ;
import { getPicklistValues } z 'lightning/uiObjectInfoApi' ;
import { getObjectInfo } z 'lightning/uiObjectInfoApi' ;
vývozní výchozí třída Druhý příklad rozšiřuje LightningElement {
@ sledovat hodnotu ;
// Získání objektu
@ drát ( getObjectInfo , { objectApiName : KAMPAŇ } )
objectInfo ;
// Získání typu kampaně – výběrový seznam
@ drát ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TYP } )
CampaignTypeValues ;
konferenční = Nepravdivé ;
webinarval = Nepravdivé ;
partnerský = Nepravdivé ;
jiný = Nepravdivé ;
// Zvládněte logiku
rukojeťZměnit ( událost ) {
tento . hodnota = událost. cílová . hodnota ;
-li ( tento . hodnota === 'Konference' ) {
// Zobrazit stav jako PLÁNOVANÝ
tento . konferenční = skutečný ;
tento . webinarval = Nepravdivé ;
tento . partnerský = Nepravdivé ;
}
jiný -li ( tento . hodnota === 'webináře' ) {
// Zobrazení stavu jako DOKONČENO
tento . webinarval = skutečný ;
tento . konferenční = Nepravdivé ;
tento . partnerský = Nepravdivé ;
}
jiný -li ( tento . hodnota === 'Partneři' ) {
// Zobrazit stav jako IN PROGRESS
tento . webinarval = Nepravdivé ;
tento . konferenční = Nepravdivé ;
tento . partnerský = skutečný ;
}
jiný {
// Zobrazit stav jako V ABORTED
tento . webinarval = Nepravdivé ;
tento . konferenční = Nepravdivé ;
tento . partnerský = Nepravdivé ;
}
}
}
secondComponent.js-meta.xml
verze = '1,0' ?>< / cíle>
< / LightningComponentBundle>
Výstup:
Typ – „Konference“. Stav je tedy „PLANNED“.
Typ – „Webinář“. Stav je tedy „DOKONČENO“.
Typ – „Partneři“. Stav je tedy „PRObíhá“.
Typ není v nabízených možnostech. Stav je tedy „ABORTED“.
Příklad 3:
Nyní vytvoříme combobox s možnostmi záznamy kampaně. Pokud vybereme libovolnou možnost, na uživatelské rozhraní se vrátí odpovídající typ kampaně.
Nejprve musíme vytvořit třídu Apex pomocí metody getCampaign(). Tato metoda vrátí seznam všech kampaní s ID, názvem, typem a stavem.
CampaignRecords. apxcveřejné se sdílením třída CampaignRecords {
@ AuraEnabled ( cacheable = skutečný )
// Získejte seznam kampaní
veřejnost statický Seznam < Kampaň > getCampaign ( ) {
vrátit se [ SELECT Id , název , Typ , Stav z kampaně ] ;
}
}
třetí příklad.html
<šablona>< div třída = 'slds-var-m-around_medium' styl = 'výška:20px; šířka:400px' >
označení = 'Vyberte název kampaně'
možnosti = { Možnosti kampaně }
hodnota = { hodnota }
při změně = { handleonchange }
>
< / lightning-combobox>
< / div < br >
< br >
< p > Typ kampaně pro tuto kampaň: < b > {hodnota} < / b < / p >
< / blesková karta>
< / šablona>
thirdExample.js
- Musíme zadat metodu, která získá seznam kampaní v rámci metody connectedcallback(). Deklarujte pole s názvem „camps“ a uložte výsledek se štítkem jako ID kampaně a hodnotou jako Typ kampaně. Toto pole je vstupem do názvů kampaní (musí být vytvořeno pomocí dekorátoru stopy).
- V metodě getter Campaignoptions() vraťte pole campaignNames. Combobox tedy používá tyto možnosti.
- Nastavte vybranou hodnotu v metodě obslužné rutiny handleonchange().
import getCampaign from '@salesforce/apex/CampaignRecords.getCampaign' ;
vývozní výchozí třída Třetí příklad rozšiřuje LightningElement {
hodnota = '' ;
@ sledovat názvy kampaní = [ ] ;
dostat Možnosti kampaně ( ) {
vrátit se tento . názvy kampaní ;
}
// Přidejte možnosti do pole camps z Apexu.
// štítek bude Název kampaně
// hodnota bude Typ kampaně
připojeno zpětné volání ( ) {
getCampaign ( )
. pak ( výsledek => {
nechat tábory = [ ] ;
pro ( byl k = 0 ; k < výsledek. délka ; k ++ ) {
tábory. TAM ( { označení : výsledek [ k ] . název , hodnota : výsledek [ k ] . Typ } ) ;
}
tento . názvy kampaní = tábory ;
} )
}
// Zpracování hodnoty
handleonchange ( událost ) {
tento . hodnota = událost. detail . hodnota ;
}
}
Výstup:
Vybereme záznam a uvidíme typ.
Závěr
Naučili jsme se, jak vytvořit combobox v LWC s atributy a příklady. Nejprve jsme vytvořili combobox se seznamem hodnot a zobrazili vybranou hodnotu. Dále vykreslíme šablonu HTML na základě vybrané hodnoty prostřednictvím podmíněného vykreslení. Nakonec jsme se naučili, jak vytvořit možnosti pro combobox ze stávajících záznamů Salesforce a zobrazit související pole v uživatelském rozhraní.