Раскрывающиеся списки - один из тех компонентов, которые довольно широко используются при настройке Salesforce. Даже я недавно столкнулся с тем же требованием, и, как всегда, я пошел в библиотеку компонентов и набрал «Выбрать» при быстром поиске, надеясь найти встроенный компонент LWC, но ничего не нашел в результатах поиска. Я был так удивлен, что не нашел ни одного, учитывая широту его использования. Фактически это дало мне возможность придумать что-то свое. Тем не менее, как только я начал, я понял, что могу настроить его и сделать более универсальным для обработки следующих сценариев:

  1. Сделайте компонент выбора независимым и позвольте ему самостоятельно извлекать все значения раскрывающегося списка, просто указав объект и имя поля.
  2. Расширьте его, чтобы обрабатывать зависимые списки выбора
  3. Также сделайте его настраиваемым для поддержки раскрывающихся списков с множественным выбором.

Я почти уверен, что упомянутые выше сценарии довольно часто встречаются при выполнении многих бизнес-требований. Учитывая это, этот компонент может пригодиться многим. В этом посте я подробно расскажу, как я справился с каждым сценарием, с примерами кода.

Если вы думаете, что просмотр всего поста болезненен, и вы спешите получить быстрый доступ к коду, перейдите по ссылке Github, указанной в конце поста ;-)

Компонент простого динамического списка выбора

Еще до того, как мы перейдем к реализации, давайте сначала разберемся в значении заголовка. Компонент простого раскрывающегося списка можно определить как компонент, способный извлекать значения раскрывающегося списка любого поля из любого объекта в Salesforce. Он динамичен в том смысле, что имя объекта и поля указываются в компоненте как строки и загружаются только на лету во время рендеринга компонента. Компонент будет выглядеть, как показано ниже (аналогично стандартному компоненту списка выбора):

Как и любой другой компонент LWC, он использует только разметку компонента и компонент javascript и контроллер Apex для достижения своей цели.

Разметка компонента

Разметка компонента в основном состоит из следующих элементов:

  1. Ярлык для отображения ярлыка раскрывающегося списка с возможностью отображения ‘*’, если он является обязательным. Еще одна уникальная особенность этого компонента заключается в том, что он также извлекает метку поля самостоятельно с учетом имени API поля.
  2. Элемент выбора html для отображения параметров с опцией «select» по умолчанию. Этот элемент может быть помечен как "отключен / включен" / "обязателен" в зависимости от условий.

Разметка компонента следующая:

Компонент javascript

JavaScript состоит в основном из нескольких реактивных полей, привязанных к элементам в html, и вызовов контроллеров вершины, как описано ниже:

  1. Поля:
  • Поля, в которых хранятся параметры списка выбора, полученные от контроллеров.
  • Поля с обязательным статусом.
  • Поля, содержащие статус "включено" отключено ".
  • Поля, которые выставлены для установки объекта и имен полей

2. Хук жизненного цикла ConnectedCallback (), который вызывает API выборки значений из раскрывающегося списка и метку для данного поля.

3. Обработчик измененного выделения, который вызывает событие «выбрано» при изменении значения выбора в раскрывающемся списке.

Код класса выглядит следующим образом:

Контроллер Apex:

Контроллер вершины содержит код только для получения значений раскрывающегося списка и значения метки поля из имени API. Это необязательная часть компонента, в зависимости от того, на каком объекте используется компонент. Если компонент используется на объектах, которые поддерживаются службой данных Lightning, то мы могли бы просто использовать вызовы ui * api LDS. Код компонента следующий:

Преимущества

Разрабатывая компонент, как указано выше, мы получаем следующие преимущества:

  1. В настоящее время компонент использует контроллеры Apex для получения значений раскрывающегося списка, но как только Lightning Data Services начнет поддерживать все объекты, мы сможем переключиться на вызовы ui * api без каких-либо изменений в коде родительского компонента.
  2. В родительском компоненте можно избежать большого количества избыточного кода, если ожидается, что он будет отображать
  3. Этот базовый компонент может быть расширен для поддержки зависимых раскрывающихся списков и компонентов раскрывающегося списка с множественным выбором.

Этот компонент будет расширен в ближайшие дни, и обновления будут объяснены в следующих нескольких разделах текущей серии.

Зависимый компонент раскрывающегося списка

Давайте углубимся во второе усовершенствование компонента списка выбора. Если вы много использовали раскрывающиеся списки, вы обязательно почувствуете в них потребность. По моему опыту, зависимый список выбора может оказаться более удобным. Зависимые раскрывающиеся списки - это раскрывающиеся списки, параметры которых зависят от значения, выбранного в другом раскрывающемся списке. Давайте называть другой раскрывающийся список контролирующим раскрывающимся списком, а значение, выбранное в наших обсуждениях, - «ControllingFieldValue». Реализация изменяется, как показано ниже:

Компонентная разметка

В разметке не нужно вносить никаких изменений, поскольку внешний вид компонента остается неизменным для этого варианта использования.

Компонент javascript

Следующие изменения необходимы в javascript для обработки этого сценария:

  • Новое поле с именем «controlFieldName», которое соответствует имени API поля, от которого зависит «fieldName». Это поле определяет, является ли список выбора независимым или зависимым.
  • Новое поле с именем «contrFieldValue», которое содержит значение управляющего поля.
  • Добавьте условный блок в connectedCallback (), чтобы вызвать метод контроллера Apex для предварительного получения всех комбинаций зависимостей раскрывающегося списка.
  • Общедоступный метод получения с именем «controlFieldValue», украшенный декотатором «@api».
  • Сеттер с именем «controlFieldValue», который устанавливает параметры на основе значения, установленного в зависимом раскрывающемся списке.

Изменения кода следующие:

Контроллер Apex

Контроллер Apex просто вводит другой метод для выборки всех зависимых значений между управляющим и зависимым списками выбора.

использование

Использование, как показано ниже

<c-select-component object-name="Task" field-name="Field1"
controlling-field-name="Field2"
controlling-field-value={controllingFieldValue}
label="Dependent Picklist"></c-select-component>

Компонент раскрывающегося списка с множественным выбором

Реализация компонента с множественным выбором потребовала больше времени и усилий, чем ожидалось, и оказалась более сложной, чем я первоначально думал. К сожалению, нет ничего особенного, что можно было бы использовать из готового компонента списка выбора. Тем не менее, в итоге я все же смог добиться того, к чему стремился. Когда вы думаете о раскрывающихся списках с множественным выбором, вы можете учитывать следующие требования:

  1. Должна быть возможность выбрать несколько вариантов.
  2. Выбранные элементы должны отображаться в виде списка, разделенного запятыми.

Конечно, есть еще пара, которую можно добавить в список, но для простоты давайте рассмотрим два вышеупомянутых требования в последующих обсуждениях. Я бы не стал добавлять здесь код для этого, так как читаемость будет полностью потеряна. Однако вы все еще можете найти полную реализацию в моем репозитории Github.

Компонентная разметка

Реализация требует, чтобы вы создали компонент списка выбора с нуля и дополнительно настроили его для поддержки множественного выбора. Поскольку между предыдущей и текущей реализациями не так много общего кода, мне пришлось выполнить условную визуализацию разметки на основе значения флага isMultiSelect. Разметка для множественного выбора состоит из следующего:

  1. Кнопка, имитирующая компонент раскрывающегося списка, позволяющая открывать всплывающее окно при щелчке по компоненту. Это дополнительно состоит из 2 детей. Ярлык для отображения выбранных опций и выпадающий значок, как в любом другом раскрывающемся списке.
  2. Неупорядоченный список, в котором хранятся элементы раскрывающегося списка, каждый из которых содержит флажок и метку. Он встроен в ‹div› ‹/div› и действует как всплывающий компонент списка выбора.
  3. События входа / выхода мыши отслеживаются, чтобы открывать всплывающее окно всякий раз, когда есть движение мыши над компонентом списка выбора.

Компонент javascript

JavaScript добавляет еще пару методов для обработки сценариев множественного выбора. Однозначно важны следующие:

  1. Логическая переменная, указывающая, находится ли указатель мыши над компонентом.
  2. Обработчики событий мыши, такие как mouseEnter, mouseLeave, mouseClick. Эти обработчики в основном устанавливают или сбрасывают логическое значение, указывающее, находится ли указатель мыши над компонентом или нет.
  3. Несколько геттеров, возвращающих значение класса, которое должно быть установлено в контейнерах, в которых размещается весь компонент.
  4. Переменная, которая указывает, сколько элементов должно отображаться в раскрывающемся списке без полосы прокрутки.
  5. Флажок Selection change handler, отвечающий за отображение выбранных элементов в раскрывающемся списке.

Каждый раз, когда элемент выбирается / отменяется, обработчик изменения выбора создает список выбранных элементов и отображает их в виде списка элементов, разделенных запятой.

На этом мы подошли к концу настройки компонентов раскрывающегося списка в LWC. Вы можете найти весь код в моем репозитории Github. Эта реализация представляет собой простую, но очень полезную настройку в раскрывающихся списках. В будущем Salesforce может предложить собственный компонент. Но до тех пор этот компонент пригодится.