В Salesforce LWC, если вы хотите разрешить пользователю выбирать параметр из указанного списка параметров, используется поле со списком. В этом руководстве мы обсудим, как создать поле со списком и различные атрибуты, поддерживаемые полем со списком, с примерами.
Поле со списком
По сути, поле со списком — это поле, доступное только для чтения, которое предоставляет входные данные для выбора варианта из указанных вариантов. Мы можем создать это, используя тег Lightning-ComboBox. Атрибуты представляют собой скорость один за другим, разделенные пробелом. Давайте обсудим некоторые атрибуты, которые необходимы при создании поля со списком.
- этикетка – Используется для указания метки (текста) для вашего поля со списком.
- параметры – Каждая опция принимает атрибуты «метка» и «значение». Мы можем указать несколько параметров в списке, разделенных запятой.
- заполнитель : Прежде чем выбрать опцию, пользователю необходимо знать информацию, связанную с опциями. Итак, этот атрибут указан.
- необходимый : В некоторых случаях выбор опции обязателен. Мы можем сделать его обязательным, указав этот атрибут.
- неполноценный : можно запретить пользователю, выбрав соответствующий параметр в флажке. Этот атрибут отключает поле со списком.
Синтаксис:
Давайте посмотрим, как создать поле со списком с некоторыми важными атрибутами.
<выпадающий список молнии
имя='имя'
метка='имя_метки'
значение = {value_from_the_option}
Placeholder='Текст справки'
options={List_of_options}
onchange={handleChange} >
Спецификация:
Давайте посмотрим, как создать поле со списком и работать с ним.
В файле JavaScript создайте список параметров с меткой и значением внутри метода «getter».
Создайте переменную, в которой будет храниться опция по умолчанию.
Напишите функцию-дескриптор, которая сохранит параметр, выбранный пользователем в пользовательском интерфейсе.
В HTML-файле создайте поле со списком и передайте атрибуты. Кроме того, нам нужно передать обработчик событий onchange(), который обрабатывает параметры в поле со списком. Он принимает функцию «Handler», созданную в файле «js».
Во всех примерах, которые мы собираемся обсудить в этом руководстве, логика будет представлена в виде кода «js». После этого указываем скриншот, включающий весь «js» код.
Пример 1:
Создайте поле со списком с пятью темами (подробностями) в файле Javascript. Укажите значение по умолчанию как «JAVA». Обработайте поле со списком в методе handleSubjectsOnChange(). Передайте значение и сведения в атрибуты «значение и параметры» в HTML-файле с меткой и разверните компонент.
firstExample.html
<шаблон><карта-молния заголовок '=' «Комбобокс по темам» >
< div сорт '=' 'slds-var-m-around_medium' >
<выпадающий список молнии
этикетка '=' «Выберите тему:»
ценить '=' { ценить }
параметры '=' { подробности }
по изменению '=' { handleSubjectsOnChange } >< / молния-выпадающий список>
< бр >
< п > Ваш предмет: < б > {ценить} < / б >< / п >
< / div >
< / молния-карта>
< / шаблон>
firstExample.js
// Создаём значение по умолчанию — «JAVA» для Comboboxценить '=' 'ДЖАВА' ;
// Показ предметов
получать подробности ( ) {
// 5 предметов
возвращаться [ { этикетка : 'Джава' , ценить : 'ДЖАВА' } ,
{ этикетка : «Питон» , ценить : 'ПИТОН' } ,
{ этикетка : 'HTML' , ценить : 'HTML' } ,
{ этикетка : 'С' , ценить : 'С' } ,
{ этикетка : 'С++' , ценить : 'С++' } ] ;
}
// Обработка логики для установки значения
handleSubjectsOnChange ( событие ) {
этот . ценить '=' событие. деталь . ценить ;
}
}
Весь код:
firstComponent.js-meta.xml
версия '=' '1,0' ?><цели>
<цель> молния__AppPage < / цель>
<цель> молния__RecordPage < / цель>
< / цели>
< / Пакет LightningComponentBundle>
Выход:
Добавьте этот компонент на страницу «Запись» любого объекта. В HTML-файле мы отображаем значение в теге абзаца. Когда пользователь выбирает какой-либо вариант, он будет выделен жирным шрифтом. По умолчанию выбран вариант «JAVA», который отображается после отображения компонента на странице.
Давайте выберем тему «С». «C» возвращается под полем со списком.
Пример 2:
В этом примере мы будем визуализировать различные компоненты на основе значений раскрывающегося списка «Тип кампании» (из объекта «Кампания»).
- Если тип кампании — «Конференция», мы отобразим шаблон, который возвращает текст — Статус кампании: ПЛАНИРУЕТСЯ.
- Если тип кампании — «Вебинар», мы отобразим шаблон, который возвращает текст — Статус кампании: ЗАВЕРШЕНО.
- Если тип кампании — «Партнеры», мы отобразим шаблон, который возвращает текст: Статус кампании: В РАБОТЕ.
- Статус кампании: ПРЕРВАНО для остальных вариантов.
второйExample.html
<шаблон><карта-молния заголовок '=' «ТИП КАМПАНИЯ» икона- имя '=' 'стандарт:кампания' >
< div сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
<шаблон удачи:если '=' { Значения типа кампании. данные } >
<выпадающий список молнии ценить '=' { ценить }
параметры '=' { Значения типа кампании. данные .ценности }
по изменению '=' { handleChange } >
< / молния-выпадающий список>
< / шаблон>< бр / >
< / div >
< бр >< бр >
<шаблон удачи:если '=' { конференц-вал } >
< центр > Статус кампании: < б >< я > ПЛАНИРУЕТСЯ< / я >< / б > < / центр >
< / шаблон>
<шаблон удачи:elseif '=' { вебинарвал } >
< центр > Статус кампании: < б >< я > ЗАВЕРШЕНО< / я >< / б > < / центр >
< / шаблон>
<шаблон удачи:elseif '=' { партнерваль } >
< центр > Статус кампании: < б >< я > В ПРОГРЕССЕ< / я >< / б > < / центр >
< / шаблон>
<шаблон удачи:иначе>
< центр > Статус кампании: < б >< я > ПРЕРВИРОВАНО< / я >< / б > < / центр >
< / шаблон>
< / молния-карта>
< / шаблон>
второйExample.js
Мы импортируем объект Campaign (Standard) как CAMPAIGN и Type из него как TYPE. Из Lightning/uiObjectInfoApi мы импортируем getPicklistValues и getObjectInfo. Они получат значения раскрывающегося списка, доступные в поле «Тип». Они будут использоваться в качестве опций для поля со списком. Следующие действия обрабатываются в handleChange().
- Если значение === «Конференция», мы устанавливаем для переменной Conferenceval значение true, а двум другим — значение false.
- Если значение === «Вебинар», мы устанавливаем для переменной webinarval значение true, а двум другим — значение false.
- Если значение === «Партнеры», мы устанавливаем для переменной Partnerval значение true, а двум другим — значение false.
- Если значение отсутствует в указанных параметрах, все они являются ложными.
Импортировать КАМПАНИЯ от '@salesforce/schema/Кампания' ;
Импортировать ТИП из '@salesforce/schema/Campaign.Type' ;
Импортировать { getPicklistValues } от 'молния/uiObjectInfoApi' ;
Импортировать { ПолучитьОбъектИнфо } от 'молния/uiObjectInfoApi' ;
экспорт по умолчанию сорт ВторойПример простирается МолнияЭлемент {
@ отслеживать стоимость ;
// Получаем объект
@ проволока ( ПолучитьОбъектИнфо , { имя_объектаApiName : КАМПАНИЯ } )
объектИнформация ;
// Получаем тип кампании — список выбора
@ проволока ( getPicklistValues , { идентификатор типа записи : '$objectInfo.data.defaultRecordTypeId' , полеApiName : ТИП } )
Тип кампанииЗначения ;
конференц-вал '=' ЛОЖЬ ;
вебинарвал '=' ЛОЖЬ ;
партнерваль '=' ЛОЖЬ ;
другой '=' ЛОЖЬ ;
// Обработка логики
handleChange ( событие ) {
этот . ценить '=' событие. цель . ценить ;
если ( этот . ценить === 'Конференция' ) {
// Отображение статуса как ЗАПЛАНИРОВАНО
этот . конференц-вал '=' истинный ;
этот . вебинарвал '=' ЛОЖЬ ;
этот . партнерваль '=' ЛОЖЬ ;
}
еще если ( этот . ценить === «Вебинары» ) {
// Отображение статуса ЗАВЕРШЕНО
этот . вебинарвал '=' истинный ;
этот . конференц-вал '=' ЛОЖЬ ;
этот . партнерваль '=' ЛОЖЬ ;
}
еще если ( этот . ценить === «Партнеры» ) {
// Отображение статуса как В ПРОГРЕССЕ
этот . вебинарвал '=' ЛОЖЬ ;
этот . конференц-вал '=' ЛОЖЬ ;
этот . партнерваль '=' истинный ;
}
еще {
// Отображение статуса как IN ABORTED
этот . вебинарвал '=' ЛОЖЬ ;
этот . конференц-вал '=' ЛОЖЬ ;
этот . партнерваль '=' ЛОЖЬ ;
}
}
}
SecondComponent.js-meta.xml
версия '=' '1,0' ?><цели>
<цель> молния__AppPage < / цель>
<цель> молния__RecordPage < / цель>
< / цели>
< / Пакет LightningComponentBundle>
Выход:
Тип – «Конференция». Итак, статус «ПЛАНИРУЕТСЯ».
Тип – «Вебинар». Итак, статус «ЗАВЕРШЕН».
Тип – «Партнеры». Итак, статус «В ПРОГРЕССЕ».
Типа нет в предоставленных опциях. Итак, статус «ПРЕРВАН».
Пример 3:
Теперь мы создаем поле со списком с записями кампании в качестве опций. Если мы выберем какой-либо вариант, соответствующий тип кампании будет возвращен в пользовательском интерфейсе.
Во-первых, нам нужно создать класс Apex с помощью метода getCampaign(). Этот метод возвращает список всех кампаний с идентификатором, названием, типом и статусом.
Отчеты кампании. апхсобщедоступный с возможностью поделиться сорт Записи кампании {
@ АураВключена ( кэшируемый '=' истинный )
// Получаем список кампаний
общественный статический Список < Кампания > getCampaign ( ) {
возвращаться [ ВЫБРАТЬ идентификатор , Имя , Тип , Статус из кампании ] ;
}
}
третийExample.html
<шаблон><карта-молния заголовок '=' «ТИП КАМПАНИЯ» икона- имя '=' 'стандарт:кампания' >
< делитель сорт '=' 'slds-var-m-around_medium' стиль '=' «высота: 20 пикселей; ширина: 400 пикселей» >
<выпадающий список молнии имя '=' 'Кампания'
этикетка '=' «Выберите название кампании»
параметры '=' { Параметры кампании }
ценить '=' { ценить }
по изменению '=' { обработка при изменении }
>
< / молния-выпадающий список>
< / делитель >< бр >
< бр >
< п > Тип кампании для этой кампании: < б > {ценить} < / б >< / п >
< / молния-карта>
< / шаблон>
третийExample.js
- Нам нужно указать метод, который получает список кампаний внутри метода linkedcallback(). Объявите массив с именем «camps» и сохраните результат с меткой как «Идентификатор кампании» и значением как «Тип кампании». Этот массив является входными данными для CampampNames (он должен быть создан с помощью декоратора трека).
- В методе получения Campaignoptions() верните массив CampaignNames. Итак, комбобокс использует эти параметры.
- Установите выбранное значение в методе-обработчике handleonchange().
Импортировать getCampaign от '@salesforce/apex/CampaignRecords.getCampaign' ;
экспорт по умолчанию сорт ТретийПример простирается МолнияЭлемент {
ценить '=' '' ;
@ отслеживать названия кампаний '=' [ ] ;
получать Параметры кампании ( ) {
возвращаться этот . Названия кампаний ;
}
// Добавляем параметры в массив лагерей из Apex.
// метка будет названием кампании
// значение будет типом кампании
подключенОбратный вызов ( ) {
getCampaign ( )
. затем ( результат => {
пусть лагеря '=' [ ] ;
для ( был к '=' 0 ; к < результат. длина ; к ++ ) {
лагеря. толкать ( { этикетка : результат [ к ] . Имя , ценить : результат [ к ] . Тип } ) ;
}
этот . Названия кампаний '=' лагеря ;
} )
}
// Обработка значения
обработка при изменении ( событие ) {
этот . ценить '=' событие. деталь . ценить ;
}
}
Выход:
Давайте выберем запись и посмотрим ее тип.
Заключение
Мы узнали, как создать в LWC поле со списком с атрибутами и примерами. Сначала мы создали поле со списком значений и отобразили выбранное значение. Затем мы визуализируем HTML-шаблон на основе выбранного значения посредством условного рендеринга. Наконец, мы узнали, как создавать параметры для поля со списком из существующих записей Salesforce и отображать связанные поля в пользовательском интерфейсе.