Как добавить Фильтр по числовому полю на страницу?
Постановка задачи: необходимо реализовать на пользовательской странице Реестра сотрудников элемент Таблица, где будет содержаться информация о сотрудниках отдела, и два фильтра: Фильтр по числовому полю и Фильтр по текстовому полю, с помощью которых будет осуществляться поиск записей в Таблице по фамилии сотрудника и по стажу работы сотрудника. Элементы на странице должны иметь следующие настройки:
- Блок фильтрации на странице должен иметь подзаголовок-Фильтр по сотрудникам, реализованный с помощью компоненты Текст
- Фильтр по числовому полю (по стажу работы сотрудника):
надпись поля -Стаж работы
фильтровать по… -таблице Список сотрудников иколонке Стаж
операция фильтрации -Равно
максимально возможное значение для ввода - 10 - Фильтр по текстовому полю (по фамилии сотрудника):
надпись поля -Фамилия
фильтровать по… -таблице Список сотрудников иколонке Фамилия(name_last)
операция фильтрации -Содержит всю подстроку - Таблица с информацией о сотрудниках:
в Граф сущностей в качестве Главной сущности должна быть определена таблица Список сотрудников, где есть вся необходимая информация для вывода на страницу
в структуру Таблицы должны быть включены две колонки: Фамилия сотрудникаи Стаж работы сотрудника
Решение задачи:
Предполагается, что страница Реестр сотрудников, где необходимо разместить Таблицу и Фильтры,уже создана бизнес-аналитиком и включена в логику бизнес-процесса. Для добавления на страницу и настройки компонент по условиям задачинеобходимо сделать следующее:
1. Добавление элементов:
- Добавить внутрь Вертикального контейнера контейнер Набор фильтров (рис.1)
- Добавить компоненту Текст внутрь Вертикального контейнера, которая будет являться заголовком блока фильтрации (рис.2)

рис.1 Добавление элементаНабор фильтров

рис.2Добавление элементаТекст
- Добавить внутрь контейнера Набор фильтров компоненту Текстовое поле (фильтр) (рис.3)
- Добавить внутрь контейнера Набор фильтров компоненту Фильтр по числовому полю (рис.4)
- Добавить Таблицу,в которой будет отображаться информация о сотрудниках и по значениям которой будет осуществляться поиск записей с помощью фильтров (рис.5)

рис.3 Добавление компоненты Фильтр по текстовому полю

рис.4 ДобавлениекомпонентыФильтр по числовому полю
рис.5 Добавление элементаТаблица
- Для того чтобы условия фильтрации применялись к таблице, необходимо добавить кнопки:Кнопка для фильтрации,Кнопка очистки фильтра. Для этого необходимо добавить Горизонтальный контейнер, который будет содержать данные кнопки. (рис.6 и рис.7)

рис.6 Добавление элемента Горизонтальный контейнер

рис.7 Добавление кнопок: Для фильтрации и Очистки фильтрации
2. Настройка элементов:
- Настройка Набора фильтров: переносим объект Таблица, удерживая левую кнопку мыши, в свойство “Применить к…” Набора фильтров как показано на рисунке(рис.8)
- Заполняем свойство Надпись у компоненты Текст значением Фильтр по сотрудникам (рис.9)

рис.8 Настройка Набор фильтров

рис.9 Настройка элемента Текст
- Заполняем у элемента Таблица следующие свойства: Таблица. Подгрузка данных - Источник данных - Граф сущностей (как описано в разделе - Настройка Графа сущностей) и настраиваем колонки Таблицы (как описано в разделе -Настройка колонок Таблицы) в блоке Таблица. Настроить колонки таблицы согласно условиям задачи(рис.10)
- Заполняем свойства компоненты Фильтр по текстовому полю согласно условиям задачи (рис.11)
- Заполняем свойства компоненты Фильтр по числовому полю согласно условиям задачи (рис.12)

рис.10 Настройка элементаТаблица

рис.11 Настройка компонентыФильтр по текстовому полю

рис.12 Настройка компоненты Фильтр по числовому полю
Результат выполнения задачи:
После применения изменений на странице, в экранной форме пользовательского приложения, мы видим, что условия задачи соблюдены и на странице отображается блок фильтрации, включающий в себя фильтры по имени и фамилии сотрудника (рис.13 и рис.14)

рис.13 Визуальное отображение выполнения условий задачи

рис.14 Пример выполнения поиска с примененным условием фильтрации
рис.13 Визуальное отображение выполнения условий задачи
image2019-2-27_10-12-42.png (image/png)
image2019-2-27_10-31-44.png (image/png)
image2019-2-27_11-14-10.png (image/png)
image2019-2-27_11-19-57.png (image/png)
image2019-2-27_11-22-12.png (image/png)
image2019-2-27_11-27-36.png (image/png)
image2019-2-28_10-20-51.png (image/png)
image2019-2-28_10-25-32.png (image/png)
image2019-2-28_10-25-46.png (image/png)
image2019-2-28_10-37-29.png (image/png)
image2019-2-28_17-8-54.png (image/png)
image2019-2-28_17-9-29.png (image/png)
image2019-2-28_17-9-59.png (image/png)
image2019-3-1_10-28-32.png (image/png)
image2019-3-1_10-30-56.png (image/png)
image2019-3-1_10-31-39.png (image/png)
image2019-3-1_10-32-15.png (image/png)
image2019-3-1_10-32-46.png (image/png)
image2019-3-1_17-6-26.png (image/png)
image2019-3-1_17-7-18.png (image/png)
image2019-3-1_17-8-8.png (image/png)
image2019-3-1_17-41-39.png (image/png)
image2019-3-1_17-42-35.png (image/png)
image2019-3-1_17-44-14.png (image/png)
image2019-3-11_14-19-40.png (image/png)
image2019-3-11_14-20-16.png (image/png)
image2019-3-11_16-10-7.png (image/png)
image2019-3-11_16-15-42.png (image/png)
image2019-3-11_16-16-12.png (image/png)
image2019-3-11_16-17-9.png (image/png)
image2019-3-11_16-17-41.png (image/png)
image2019-3-11_16-19-47.png (image/png)
image2019-3-11_16-20-24.png (image/png)
image2019-3-11_16-21-11.png (image/png)
image2019-3-11_16-21-23.png (image/png)
image2019-3-11_16-25-22.png (image/png)
image2019-3-15_16-54-5.png (image/png)
image2019-3-15_16-59-41.png (image/png)
image2019-3-22_10-36-15.png (image/png)
image2019-3-22_10-37-45.png (image/png)
image2019-3-22_10-41-8.png (image/png)
image2019-3-22_10-42-11.png (image/png)
image2019-3-22_10-48-28.png (image/png)
image2019-3-22_10-49-25.png (image/png)
image2019-3-22_10-49-53.png (image/png)
image2019-3-22_10-51-12.png (image/png)
image2019-3-22_10-53-4.png (image/png)
image2019-3-22_10-54-15.png (image/png)
image2019-3-22_10-55-26.png (image/png)
image2019-3-22_10-56-6.png (image/png)
image2019-3-22_10-58-0.png (image/png)
image2019-3-22_10-58-26.png (image/png)
image2019-3-22_11-1-15.png (image/png)
image2019-3-22_11-2-36.png (image/png)
image2019-3-22_11-3-1.png (image/png)
image2019-3-22_11-15-36.png (image/png)
image2019-3-22_11-17-41.png (image/png)