В Salesforce LWC, ако искате да позволите на потребителя да избере опция от указания списък с опции, се използва комбинирано поле. В това ръководство ще обсъдим как да създадете комбиниран списък и различните атрибути, поддържани от комбинирания списък с примери.
Комбобокс
По принцип комбинираното поле е поле само за четене, което предоставя вход за избор на опция от посочените опции. Можем да създадем това с помощта на маркера lightning-combobox. Атрибутите са скорост един след друг, които са разделени с интервал. Нека обсъдим някои атрибути, които са необходими при създаването на комбинирано поле.
- етикет – Това се използва за указване на етикета (текста) за вашия комбиниран списък.
- настроики – Всяка опция приема атрибутите „етикет“ и „стойност“. Можем да посочим множеството опции в списък, разделен със запетая.
- контейнер : Преди да избере опция, потребителят трябва да знае информацията, свързана с опциите. И така, този атрибут е посочен.
- изисква се : В някои случаи е задължително да изберете опцията. Можем да го направим задължителен, като посочим този атрибут.
- хора с увреждания : Възможно е да предотвратите потребителя, като изберете опцията от квадратчето за отметка. Този атрибут деактивира падащия списък.
Синтаксис:
Нека да видим как да създадете комбиниран списък с някои важни атрибути.
<светкавица-combobox
име='име'
label='име_на_етикет'
стойност={стойност_от_опцията}
placeholder='Помощен текст'
options={Списък_с_опции}
onchange={handleChange} >
Спецификация:
Нека видим стъпките за създаване на комбинирания списък и работа с него.
В JavaScript файла създайте списък с опции с етикет и стойност в метода „getter“.
Създайте променлива, която съхранява опцията по подразбиране.
Напишете функцията за обработка, която съхранява опцията, избрана от потребителя от потребителския интерфейс.
В HTML файла създайте поле със списък и предайте атрибутите. Освен това трябва да предадем манипулатора на събитието onchange(), който обработва опциите в падащия списък. Взема функцията „Handler“, създадена във файла „js“.
Във всички примери, които ще обсъдим в това ръководство, логиката ще бъде предоставена като код „js“. След това посочваме екранната снимка, която включва целия код „js“.
Пример 1:
Създайте комбинирано поле с пет теми (подробности) във файла на Javascript. Посочете стойността по подразбиране като „JAVA“. Обработете комбинирания списък в метода handleSubjectsOnChange(). Предайте стойността и подробностите към атрибутите „стойност и опции“ в HTML файла с етикет и разположете компонента.
firstExample.html
<шаблон><светкавична карта заглавие = „Списък на предмети“ >
< див клас = 'slds-var-m-around_medium' >
<светкавица-combobox
етикет = „Изберете своя предмет:“
стойност = { стойност }
настроики = { подробности }
onchange = { handleSubjectsOnChange } >< / светкавица-combobox>
< бр >
< стр > Вашата тема: < b > {стойност} < / b >< / стр >
< / див >
< / светкавична карта>
< / шаблон>
firstExample.js
// Създайте стойност по подразбиране - 'JAVA' за Comboboxстойност = „JAVA“ ;
// Показване на темите
получавам подробности ( ) {
// 5 теми
връщане [ { етикет : 'Java' , стойност : „JAVA“ } ,
{ етикет : 'Python' , стойност : 'PYTHON' } ,
{ етикет : „HTML“ , стойност : „HTML“ } ,
{ етикет : '° С' , стойност : '° С' } ,
{ етикет : 'C++' , стойност : 'C++' } ] ;
}
// Обработка на логика за задаване на стойността
handleSubjectsOnChange ( събитие ) {
това . стойност = събитие. детайл . стойност ;
}
}
Целият код:
firstComponent.js-meta.xml
версия = '1,0' ?><изложено> вярно < / isExposed>
<цели>
<цел> светкавица__AppPage < / цел>
<цел> lightning__RecordPage < / цел>
< / цели>
< / LightningComponentBundle>
Изход:
Добавете този компонент към страницата „Запис“ на всеки обект. В HTML файла показваме стойността в тага на параграфа. Когато потребителят избере която и да е опция, тя ще бъде показана с удебелен шрифт. По подразбиране е избрано „JAVA“ и се показва, след като компонентът бъде изобразен на страницата.
Нека изберем темата като „C“. „C“ се връща под падащия списък.
Пример 2:
В този пример ще визуализираме различните компоненти въз основа на стойностите на списъка за избор на тип кампания (от обекта Campaign).
- Ако типът на кампанията е „Конференция“, ще визуализираме шаблона, който връща текста – Състояние на кампанията: ПЛАНИРАНА
- Ако типът на кампанията е „Уебинар“, ще визуализираме шаблона, който връща текста – Статус на кампанията: ЗАВЪРШЕНА
- Ако типът на кампанията е „Партньори“, ще визуализираме шаблона, който връща текста – Статус на кампанията: В ПРОЦЕС
- Състояние на кампанията: ПРЕКРАТЕНА за останалите опции.
secondExample.html
<шаблон><светкавична карта заглавие = „ТИП КАМПАНИЯ“ икона- име = 'стандарт:кампания' >
< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >
<шаблон късмет: ако = { CampaignTypeValues. данни } >
<светкавица-combobox стойност = { стойност }
настроики = { CampaignTypeValues. данни .стойности }
onchange = { handleChange } >
< / светкавица-combobox>
< / шаблон>< бр / >
< / див >
< бр >< бр >
<шаблон късмет: ако = { конференциявал } >
< център > Статус на кампанията: < b >< аз > ПЛАНИРАН< / аз >< / b > < / център >
< / шаблон>
<шаблон късмет:elseif = { уеб семинар } >
< център > Статус на кампанията: < b >< аз > ЗАВЪРШЕНО< / аз >< / b > < / център >
< / шаблон>
<шаблон късмет:elseif = { партньорвал } >
< център > Статус на кампанията: < b >< аз > В ПРОЦЕС< / аз >< / b > < / център >
< / шаблон>
< център > Статус на кампанията: < b >< аз > ПРЕКРАТЕНО< / аз >< / b > < / център >
< / шаблон>
< / светкавична карта>
< / шаблон>
secondExample.js
Импортираме обекта Campaign (Standard) като CAMPAIGN и Type от него като TYPE. От lightning/uiObjectInfoApi ние импортираме getPicklistValues и getObjectInfo. Те ще получат наличните стойности на списъка за избор в полето Тип. Те ще бъдат използвани като опции за комбинирания списък. Следните се обработват в handleChange().
- Ако стойността е === „Конференция“, задаваме променливата conferenceval на true, а другите две на false.
- Ако стойността е === „Webinar“, задаваме променливата webinarval на true, а другите две на false.
- Ако стойността === „Партньори“, задаваме променливата partnerval на true, а другите две на false.
- Ако стойността не е в дадените опции, всички са неверни.
импортиране КАМПАНИЯ от „@salesforce/schema/Campaign“ ;
импортиране ТИП от „@salesforce/schema/Campaign.Type“ ;
импортиране { getPicklistValues } от 'lightning/uiObjectInfoApi' ;
импортиране { getObjectInfo } от 'lightning/uiObjectInfoApi' ;
износ по подразбиране клас SecondExample се простира LightningElement {
@ проследяване на стойността ;
// Вземете обекта
@ тел ( getObjectInfo , { objectApiName : КАМПАНИЯ } )
objectInfo ;
// Вземете тип кампания - списък за избор
@ тел ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : ТИП } )
CampaignTypeValues ;
конференциявал = невярно ;
уеб семинар = невярно ;
партньорвал = невярно ;
друго = невярно ;
// Обработване на логиката
handleChange ( събитие ) {
това . стойност = събитие. мишена . стойност ;
ако ( това . стойност === 'конференция' ) {
// Показване на състоянието като ПЛАНИРАНО
това . конференциявал = вярно ;
това . уеб семинар = невярно ;
това . партньорвал = невярно ;
}
друго ако ( това . стойност === „Уебинар“ ) {
// Показване на състоянието като ЗАВЪРШЕНО
това . уеб семинар = вярно ;
това . конференциявал = невярно ;
това . партньорвал = невярно ;
}
друго ако ( това . стойност === „Партньори“ ) {
// Показване на състоянието като В ПРОЦЕС
това . уеб семинар = невярно ;
това . конференциявал = невярно ;
това . партньорвал = вярно ;
}
друго {
// Показване на състоянието като IN ABORTED
това . уеб семинар = невярно ;
това . конференциявал = невярно ;
това . партньорвал = невярно ;
}
}
}
secondComponent.js-meta.xml
версия = '1,0' ?><изложено> вярно < / isExposed>
<цели>
<цел> светкавица__AppPage < / цел>
<цел> lightning__RecordPage < / цел>
< / цели>
< / LightningComponentBundle>
Изход:
Тип – “Конференция”. И така, статусът е „ПЛАНИРАН“.
Тип – „Уебинар“. И така, статусът е „ЗАВЪРШЕН“.
Тип – „Партньори“. И така, състоянието е „В ПРОЦЕС“.
Типът не е в предоставените опции. И така, състоянието е „ПРЕКРАТЕНО“.
Пример 3:
Сега създаваме падащ списък със записите на кампанията като опции. Ако изберем която и да е опция, съответният тип кампания ще бъде върнат в потребителския интерфейс.
Първо, трябва да създадем клас Apex с метода getCampaign(). Този метод връща списък на всички кампании с идентификатор, име, тип и статус.
CampaignRecords. apxcпублично със споделяне клас CampaignRecords {
@ Аура е активирана ( кешируем = вярно )
// Вземете списъка с кампании
публичен статичен списък < Кампания > getCampaign ( ) {
връщане [ ИЗБЕРЕТЕ Ид , Име , Тип , Статус от кампанията ] ;
}
}
thirdExample.html
<шаблон><светкавична карта заглавие = „ТИП КАМПАНИЯ“ икона- име = 'стандарт:кампания' >
< див клас = 'slds-var-m-around_medium' стил = 'височина:20px; ширина:400px' >
<светкавица-combobox име = 'Кампания'
етикет = „Изберете име на кампания“
настроики = { Опции за кампанията }
стойност = { стойност }
onchange = { handleonchange }
>
< / светкавица-combobox>
< / див >< бр >
< бр >
< стр > Тип на кампанията за тази кампания: < b > {стойност} < / b >< / стр >
< / светкавична карта>
< / шаблон>
thirdExample.js
- Трябва да посочим метода, който получава списък с кампании в методаconnectedcallback(). Декларирайте масив с име „camps“ и запазете резултата с етикета като ID на кампанията и стойността като Тип на кампанията. Този масив е вход за имената на кампанията (това трябва да бъде създадено с декоратора на песни).
- В метода за получаване на Campaignoptions() върнете масива CampaignNames. И така, combobox използва тези опции.
- Задайте избраната стойност в метода на манипулатора handleonchange().
импортиране getCampaign от „@salesforce/apex/CampaignRecords.getCampaign“ ;
износ по подразбиране клас Трети Пример се простира LightningElement {
стойност = '' ;
@ проследяване на имена на кампании = [ ] ;
получавам Опции за кампанията ( ) {
връщане това . CampaignNames ;
}
// Добавете опциите към масива на лагерите от Apex.
// етикетът ще бъде името на кампанията
// стойността ще бъде типът на кампанията
свързан Обратно повикване ( ) {
getCampaign ( )
. тогава ( резултат => {
нека лагери = [ ] ;
за ( беше к = 0 ; к < резултат. дължина ; к ++ ) {
лагери. тласък ( { етикет : резултат [ к ] . Име , стойност : резултат [ к ] . Тип } ) ;
}
това . CampaignNames = лагери ;
} )
}
// Обработка на стойността
handleonchange ( събитие ) {
това . стойност = събитие. детайл . стойност ;
}
}
Изход:
Нека изберем записа и да видим типа.
Заключение
Научихме как да създадем комбиниран списък в LWC с атрибути и примери. Първо създадохме разгъващ се списък със списък със стойности и показахме избраната стойност. След това изобразяваме HTML шаблона въз основа на избраната стойност чрез условното изобразяване. И накрая, научихме как да създадем опциите за комбинирания списък от съществуващите записи на Salesforce и да покажем свързаните полета в потребителския интерфейс.