Вводный курс
10 модулей
5 недели

Компоненты выбора

Скопировать

Компоненты для выбора из различных вариантов в веб-приложениях


Вместо использования ID в URL можно рассмотреть и другие варианты для создания фильтрации. Одним из них является использование специального компонента Select с возможностью выбора страны из списка. Ранее мы уже использовали компонент Relselect и логика его работы во многом похожа, но благодаря Select мы можем не просто предложить выбор из всех доступных стран, но и добавить свои собственные варианты.

Компонент Select

Давайте разберем настройку Select, выбор в котором будет определять, города из каких стран должны в таблице, а также добавлена возможность показать вообще все доступные города.


При создании компонента Select его необходимо заполнить вариантами из которых и будет осуществляться выбор. Для этого, как и в Relselect, нужно получить общий список стран. Но дальше мы не отправляем этот список в Select напрямую, а преобразуем в доступные варианты, каждый из которых представлен в виде модели Select Option. Поэтому объявим в качестве переменной массив Select Options и в цикле заполним его нужными данными.


В данном примере существенными полями Select Options для нас будут являться Label (текст предлагаемого варианта) и Value (его числовой идентификатор). Установим в качестве этих значений название страны и ее ID.

При этом последний вариант, который должен показать все доступные города без привязки к стране, создадим отдельно и добавим в общий перечень. Установим для него Label = World и Value = 0.

При выборе какого либо варианта будет срабатывать триггер Select onChange. Воспользуемся им, чтобы узнать выбранный вариант и запишем его в новую глобальную переменную Country selected. При этом необходимо сделать дополнительную проверку и в случае, если был выбран последний вариант (все доступные города), то значение данной переменной следует установить пустым (null).


Последним действием данный бизнес-процесс запускает нажатие кнопки Refresh, которая обновляет данные в таблице. Ее БП тоже нужно немного изменить и учесть появление новой переменной.


Готово. Теперь мы можем выбирать, города из какой страны должны быть показаны в таблице.


Компонент Dropdown

И в завершение разберем еще один компонент, позволяющий выбирать различные варианты - Dropdown. Его ключевое отличие заключается в том, что выбор определенного варианта должен немедленно запустить какое-то действие, а не просто запомнить выбранный вариант. Его можно назвать кнопкой с расширенными функциональными возможностями.

Для примера используем Dropdown в качестве замены кнопки удаления страны в таблице. Теперь она не будет немедленно удалять запись в базе, а вызовет дополнительные варианты, где можно будет либо подтвердить удаление, либо отменить его.

Начнем с общей настройки компонента. Выберем его внешний вид и доступные варианты действий.


Далее создадим сам бизнес-процесс. И первым действием в нем необходимо будет определить какой именно записи был нажат Dropdown. Для обычных кнопок данное значение передается как Record ID, но в данном случае будет нажиматься даже не сам Dropdown, а его дочерний компонент с нужным вариантом. Поэтому получение ID записи происходит немного сложнее.

Для повторяющихся элементов таблицы Component ID состоит из двух частей, разделенных знаком “-”. Первая часть - стандартный идентификатор компонента. А вот вторая часть - как раз ID записи, добавление которой и делает идентификатор повторяющихся компонентов уникальным.

Зная это нам остается лишь получить данный ID. Поэтому разделим строку на части (Split string) и узнаем узнаем значение второй части (index = 1)


Далее необходимо определить, какой именно вариант был выбран.


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


Готово. Теперь удаление записей из базы защищено от случайных нажатий.


Was this article helpful?
Все еще ищете ответ?
Cообщество