W Salesforce LWC, jeśli chcesz pozwolić użytkownikowi wybrać opcję z określonej listy opcji, używany jest combobox. W tym przewodniku omówimy, wraz z przykładami, jak utworzyć combobox i różne atrybuty obsługiwane przez combobox.
Combobox
Zasadniczo combobox jest polem tylko do odczytu, które dostarcza danych wejściowych umożliwiających wybranie opcji spośród określonych opcji. Możemy to utworzyć za pomocą tagu Lightning-combobox. Atrybuty to prędkość jedna po drugiej, oddzielona spacją. Omówmy niektóre atrybuty wymagane podczas tworzenia comboboxa.
- etykieta – Służy do określenia etykiety (tekstu) dla twojego comboboxa.
- opcje – Każda opcja przyjmuje atrybuty „etykieta” i „wartość”. Możemy określić wiele opcji na liście oddzielonych przecinkami.
- symbol zastępczy : Przed wybraniem opcji użytkownik musi zapoznać się z informacjami dotyczącymi opcji. Zatem ten atrybut jest określony.
- wymagany : W niektórych przypadkach wybranie tej opcji jest obowiązkowe. Możemy uczynić to wymaganym, określając ten atrybut.
- wyłączony : Możliwe jest zablokowanie użytkownika poprzez wybranie opcji z pola wyboru. Ten atrybut wyłącza combobox.
Składnia:
Zobaczmy, jak utworzyć combobox z kilkoma ważnymi atrybutami.
nazwa='nazwa'
etykieta='nazwa_etykiety'
wartość={wartość_z_opcji}
placeholder='Tekst pomocy'
opcje={Lista_opcji}
onchange={handleChange} >
Specyfikacja:
Zobaczmy, jak utworzyć combobox i pracować z nim.
W pliku JavaScript utwórz listę opcji z etykietą i wartością wewnątrz metody „getter”.
Utwórz zmienną przechowującą opcję domyślną.
Napisz funkcję uchwytu przechowującą opcję wybraną przez użytkownika z interfejsu użytkownika.
W pliku HTML utwórz combobox i przekaż atrybuty. Musimy także przekazać procedurę obsługi zdarzeń onchange(), która obsługuje opcje w comboboxie. Pobiera funkcję „Handler” utworzoną w pliku „js”.
We wszystkich przykładach, które omówimy w tym przewodniku, logika będzie dostarczana w postaci kodu „js”. Następnie podajemy zrzut ekranu zawierający cały kod „js”.
Przykład 1:
Utwórz combobox z pięcioma tematami (szczegółami) w pliku JavaScript. Określ wartość domyślną jako „JAVA”. Obsługuj combobox w metodzie handleSubjectsOnChange(). Przekaż wartość i szczegóły do atrybutów „wartość i opcje” w pliku HTML z etykietą i wdróż komponent.
pierwszyPrzykład.html
< div klasa = „slds-var-m-around_medium” >
etykieta = „Wybierz temat:”
wartość = { wartość }
opcje = { Detale }
na zmianę = { handleSubjectsOnChange } >< / błyskawica-combobox>
< br >
< P > Twój temat: < B > {wartość} < / B >< / P >
< / div >
< / karta-błyskawica>
< / szablon>
pierwszyPrzykład.js
// Utwórz wartość domyślną - „JAVA” dla Comboboxawartość = 'JAWA' ;
// Pokaż tematy
Dostawać Detale ( ) {
// 5 przedmiotów
powrót [ { etykieta : 'Jawa' , wartość : 'JAWA' } ,
{ etykieta : 'Pyton' , wartość : 'PYTON' } ,
{ etykieta : „HTML” , wartość : „HTML” } ,
{ etykieta : 'C' , wartość : 'C' } ,
{ etykieta : „C++” , wartość : „C++” } ] ;
}
// Obsługuj logikę, aby ustawić wartość
handleSubjectsOnChange ( wydarzenie ) {
Ten . wartość = wydarzenie. Szczegół . wartość ;
}
}
Cały kod:
pierwszyKomponent.js-meta.xml
wersja = „1,0” ?>< / cele>
< / Pakiet LightningComponent>
Wyjście:
Dodaj ten komponent do strony „Rekord” dowolnego obiektu. W pliku HTML wyświetlamy wartość w znaczniku akapitu. Gdy użytkownik wybierze dowolną opcję, zostanie ona wyświetlona pogrubioną czcionką. Domyślnie wybrana jest opcja „JAVA” i wyświetlana po wyrenderowaniu komponentu na stronie.
Wybierzmy temat jako „C”. „C” jest zwracane pod comboboxem.
Przykład 2:
W tym przykładzie wyrenderujemy różne komponenty w oparciu o wartości listy wyboru typu kampanii (z obiektu Kampania).
- Jeśli typ kampanii to „Konferencja”, wyrenderujemy szablon, który zwróci tekst – Status kampanii: PLANOWANE
- Jeśli typ kampanii to „Webinarium”, wyrenderujemy szablon, który zwróci tekst – Status kampanii: ZAKOŃCZONO
- Jeśli typ kampanii to „Partnerzy”, wyrenderujemy szablon, który zwróci tekst – Status kampanii: W TOKU
- Stan kampanii: PRZERWA dla pozostałych opcji.
drugiPrzykład.html
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
opcje = { Wartości typu kampanii. dane .wartości }
na zmianę = { uchwytZmień } >
< / błyskawica-combobox>
< / szablon>< br / >
< / div >
< br >< br >
< Centrum > Stan kampanii: < B >< I > PLANOWANE< / I >< / B > < / Centrum >
< / szablon>
< Centrum > Stan kampanii: < B >< I > UKOŃCZONO< / I >< / B > < / Centrum >
< / szablon>
< Centrum > Stan kampanii: < B >< I > W TRAKCIE< / I >< / B > < / Centrum >
< / szablon>
< Centrum > Stan kampanii: < B >< I > PRZERWANE< / I >< / B > < / Centrum >
< / szablon>
< / karta-błyskawica>
< / szablon>
drugiPrzykład.js
Importujemy obiekt Kampanii (Standard) jako CAMPAIGN i Type z niego jako TYPE. Z Lightning/uiObjectInfoApi importujemy getPicklistValues i getObjectInfo. Otrzymają one wartości listy wyboru dostępne w polu Typ. Zostaną one wykorzystane jako opcje dla comboboxa. Poniższe elementy są obsługiwane w handleChange().
- Jeśli wartość === „Konferencja”, ustawiamy zmienną Conferenceval na true, a pozostałe dwie na false.
- Jeżeli wartość === „Webinar”, ustawiamy zmienną webinarval na true, a pozostałe dwie na false.
- Jeśli wartość === „Partnerzy”, ustawiamy zmienną partnersval na true, a pozostałe dwie na false.
- Jeśli wartości nie ma w podanych opcjach, wszystkie mają wartość false.
import KAMPANIA od „@salesforce/schemat/kampania” ;
import TYP od „@salesforce/schema/typ kampanii” ;
import { pobierzPicklistValues } z „błyskawica/uiObjectInfoApi” ;
import { pobierzInformacje o obiekcie } z „błyskawica/uiObjectInfoApi” ;
eksport domyślny klasa Drugi przykład rozciąga się Element Błyskawicy {
@ wartość śledzenia ;
// Zdobądź obiekt
@ drut ( pobierzInformacje o obiekcie , { nazwaApi obiektu : KAMPANIA } )
Informacje o obiekcie ;
// Pobierz typ kampanii – Lista wyboru
@ drut ( pobierzPicklistValues , { identyfikator typu rekordu : „$objectInfo.data.defaultRecordTypeId” , poleNazwaApi : TYP } )
Wartości typu kampanii ;
konferencja = FAŁSZ ;
webinarium = FAŁSZ ;
partnerstwo = FAŁSZ ;
Inny = FAŁSZ ;
// Obsługa logiki
uchwytZmień ( wydarzenie ) {
Ten . wartość = wydarzenie. cel . wartość ;
Jeśli ( Ten . wartość === 'Konferencja' ) {
// Wyświetl status jako PLANOWANY
Ten . konferencja = PRAWDA ;
Ten . webinarium = FAŁSZ ;
Ten . partnerstwo = FAŁSZ ;
}
w przeciwnym razie Jeśli ( Ten . wartość === „Webinaria” ) {
// Wyświetl status jako UKOŃCZONY
Ten . webinarium = PRAWDA ;
Ten . konferencja = FAŁSZ ;
Ten . partnerstwo = FAŁSZ ;
}
w przeciwnym razie Jeśli ( Ten . wartość === 'Wzmacniacz' ) {
// Wyświetl status jako W TOKU
Ten . webinarium = FAŁSZ ;
Ten . konferencja = FAŁSZ ;
Ten . partnerstwo = PRAWDA ;
}
w przeciwnym razie {
// Wyświetl status jako IN ABORTED
Ten . webinarium = FAŁSZ ;
Ten . konferencja = FAŁSZ ;
Ten . partnerstwo = FAŁSZ ;
}
}
}
drugiKomponent.js-meta.xml
wersja = „1,0” ?>< / cele>
< / Pakiet LightningComponent>
Wyjście:
Typ – „Konferencja”. Zatem status to „PLANOWANE”.
Typ – „Webinarium”. Zatem status to „ZAKOŃCZONO”.
Typ – „Partnerzy”. Zatem status to „W TOKU”.
Typ nie znajduje się w podanych opcjach. Zatem status to „APOROWANY”.
Przykład 3:
Teraz tworzymy combobox z rekordami kampanii jako opcjami. Jeśli wybierzemy dowolną opcję, w interfejsie użytkownika zostanie zwrócony odpowiedni typ kampanii.
Najpierw musimy utworzyć klasę Apex za pomocą metody getCampaign(). Ta metoda zwraca listę wszystkich kampanii z identyfikatorem, nazwą, typem i stanem.
Rekordy kampanii. okpubliczne z udostępnianiem klasa Rekordy kampanii {
@ Aura włączona ( buforowane = PRAWDA )
// Pobierz listę kampanii
publiczny statyczny Lista < Kampania > pobierz kampanię ( ) {
powrót [ WYBIERZ identyfikator , Nazwa , Typ , Stan z kampanii ] ;
}
}
trzeciPrzykład.html
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
etykieta = „Wybierz nazwę kampanii”
opcje = { Opcje kampanii }
wartość = { wartość }
na zmianę = { zmiana uchwytu }
>
< / błyskawica-combobox>
< / div >< br >
< br >
< P > Typ kampanii dla tej kampanii: < B > {wartość} < / B >< / P >
< / karta-błyskawica>
< / szablon>
trzeciPrzykład.js
- Musimy określić metodę, która pobiera listę kampanii w metodzie connectcallback(). Zadeklaruj tablicę o nazwie „camps” i zapisz wynik z etykietą jako Identyfikator kampanii i wartością jako Typ kampanii. Ta tablica stanowi dane wejściowe do CampaignNames (należy ją utworzyć za pomocą dekoratora ścieżek).
- W metodzie pobierającej Campaignoptions() zwróć tablicę CampaignNames. Zatem combobox używa tych opcji.
- Ustaw wybraną wartość w metodzie obsługi handleonchange().
import pobierz kampanię z „@salesforce/apex/CampaignRecords.getCampaign” ;
eksport domyślny klasa Trzeci przykład rozciąga się Element Błyskawicy {
wartość = '' ;
@ śledź nazwy kampanii = [ ] ;
Dostawać Opcje kampanii ( ) {
powrót Ten . nazwy kampanii ;
}
// Dodaj opcje do tablicy camps z Apex.
// etykieta będzie nazwą kampanii
// wartość będzie typem kampanii
podłączonyOddzwonienie ( ) {
pobierz kampanię ( )
. Następnie ( wynik => {
niech obozy = [ ] ;
Do ( był k = 0 ; k < wynik. długość ; k ++ ) {
obozy. naciskać ( { etykieta : wynik [ k ] . Nazwa , wartość : wynik [ k ] . Typ } ) ;
}
Ten . nazwy kampanii = obozy ;
} )
}
// Obsługuj wartość
zmiana uchwytu ( wydarzenie ) {
Ten . wartość = wydarzenie. Szczegół . wartość ;
}
}
Wyjście:
Wybierzmy rekord i zobaczmy typ.
Wniosek
Dowiedzieliśmy się, jak utworzyć combobox w LWC z atrybutami i przykładami. Najpierw utworzyliśmy combobox z listą wartości i wyświetliliśmy wybraną wartość. Następnie renderujemy szablon HTML na podstawie wybranej wartości poprzez renderowanie warunkowe. Na koniec dowiedzieliśmy się, jak utworzyć opcje comboboxu na podstawie istniejących rekordów Salesforce i wyświetlić powiązane pola w interfejsie użytkownika.