Как задействовать компоненту “Поле ввода с подбором значения” на странице?
Постановка задачи: на пользовательской странице Карточка задачи необходимо обеспечить возможность ввода Постановщика задачис использованием компоненты “Поле ввода с подбором значения”, источником данных для которой будет справочник сотрудников, а выбор одного сотрудника из справочника будет осуществляться путем постепенного набора первых букв фамилии с последующим подбором и отображением сужающегося списка сотрудников, в чьих фамилиях содержится вводимый пользователем набор букв.
При открытии карточки задачи на редактирование, в компоненте должен отобразиться ранее сохраненный в качестве Постановщика задачи пользователь.
Страница “Карточка задачи” должна иметь следующие настройки:
- в качествеглавной сущности компонентыФормадолжна быть назначена таблица “Список задач”(tasks),в которойимеется колонка с идентификатором сотрудника, являющегося постановщиком задачи (reporter_employee_id).
- внутри родительской компоненты-контейнераФормавсей страницы следует расположить 3 простых компоненты:Текстовое поледля параметраНаименование задачи,Текстовое поледля параметраОписание задачи, Поле с подбором значения для параметра Постановщик задачи
- в Граф сущностей компоненты Поле с подбором значения в качестве Главной сущности должна быть определена таблица сотрудников (employee)
- показываемая пользователю колонка - составная, получаемая из соединения колонок Фамилия (last_name), Имя(first_name), Отчество(middle_name)
- колонка базы данных для сохранения значения из компоненты Поле с подбором значения - tasks.reporter_employee_id
Решение задачи:
Предполагается, что страница Карточка задачи уже создана бизнес-аналитиком и в логике бизнес-процесса определена необходимая переменная процесса task_id, значение которой заполняется перед открытием страницы пользователем. Для решения поставленной задачи необходимо произвести следующие действия:
- добавить внутрь страницы компоненту Форма (рис.1)
- в настройках добавленной Формы перейти к разделу Подгрузка данных основная - Источник данных - Граф сущностей и настроить его в соответствии с условием задачи (рис.2).

рис.1 Добавление компоненты Форма на страницу рис.2 Настройка Графа сущностей компоненты Форма
-
в параметре “Переменная процесса с идентификатором” ( Подгрузка данных основная- Переменная процесса с идентификатором ) следует указать переменную процесса task_id (рис.3)

рис.3 Настройка переменной процесса
-
расположить компоненты для отображения параметров Наименование задачи, Описание задачии настроить их на отображение информации из источника данных (рис.4, рис.5)


рис.4 Добавление элемента Наименование рис.5 Добавление элемента Описание -
расположить компоненту Поле с подбором значения внутри компоненты Форма и настроить колонку для сохранения информации в базу данных (чтения информации из базы данных) рис. 6:

рис.6 Назначение колонки сохранения информации
- настроитькомпоненту Поле с подбором значения на свой источник данных для отображения содержимого справочника сотрудников по мере набора букв фамилии сотрудника (рис. 7)

рис.7 Конфигурация основных параметров компоненты
Зеленой цветом (стрелкой) показан процесс конфигурации графа сущности компоненты.
Коричневыми рамками отмечены параметры “Начать подбор вариантов после ввода”, “Показывать варианты по” , отвечающие за а) назначение количества символов, после ввода которых начнется подбор и предложение подходящих по подстроке вариантов из справочника и б) указание максимального количества вариантов, выводимых в выпадающем списке в процессе подбора.
Розовой рамкой отмечен параметр “Тип поиска”, указывающий системе каким образом обрабатывать вхождение вводимой пользователем подстроки - вхождение с любого места или только с начала строки.
Синими рамками помечены взаимосвязанные параметры “Зависит от”, “Связаны по” для случая, когда текущая компонента является зависимой от родительской и предлагаемые текущей компонентой значения должны удовлетворять значению, ранее выбранному в родительской компоненте (отобрать только такие записи, в которых значенияв указанной колонке текущей компоненты соответствуютзначению идентификатора главной сущности родительской компоненты).
Светло-синей рамкойпомечен параметр с колонкой, значение которой будет дополнительно возвращать компонента при использовании метода “Получить значение по BusinessId” (дополнительно к обычно возвращаемому идентификатору главной сущности графа компоненты).
Желтой рамкойпомечен параметр “Активировать фильтрацию по колонке”, указывающий на колонку, по которой будет работать метод “Задать фильтр”.
- настроить компоненту Поле с подбором значения для формирования составного значения из колонок с фамилией, именем и отчеством сотрудника (рис.8)

рис.8 Конфигурация составной колонки, в качестве разделителя указан “пробел”
На этом настройка компоненты закончена, запускаем приложение.
Результат выполнения задачи:
После применения изменений на странице, в экранной форме пользовательского приложения, мы видим, что условия задачи соблюдены (рис. 9)



При вводе первых двух букв система не реагирует, ждет третью
После появления третьей буквы начинает предлагать имеющиеся варианты, подходящие по условиям вхождения уже введенной подстроки
После появления очередной буквы, позволяющей индивидуализировать подбираемое значение, остается единственный вариант, который можно добрать вручную, выбрать манипулятором мышь или нажать кнопку “Ввод” на клавиатуре
рис. 9 Работа компоненты в запущенном приложении
рис.2. Визуальное отображение выполнения условий задачи
image2019-3-5_16-44-54.png (image/png)
image2019-3-5_17-12-21.png (image/png)
image2019-3-7_17-38-11.png (image/png)
image2019-4-5_18-55-34.png (image/png)
image2019-3-7_18-12-24.png (image/png)
image2019-4-5_16-45-44.png (image/png)
image2019-4-5_16-45-5.png (image/png)
image2019-4-9_17-57-28.png (image/png)
image2019-4-9_17-59-58.png (image/png)
image2019-4-9_18-13-12.png (image/png)
image2019-4-9_18-16-1.png (image/png)
image2019-4-9_18-17-15.png (image/png)
image2019-4-9_18-19-25.png (image/png)
image2019-4-9_18-26-53.png (image/png)
image2019-4-9_18-27-5.png (image/png)
image2019-4-9_18-27-14.png (image/png)
image2019-4-9_18-32-50.png (image/png)
image2019-4-11_15-15-33.png (image/png)
image2019-4-11_15-18-21.png (image/png)
image2019-4-11_15-19-10.png (image/png)