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

рис.1 Добавление компоненты Древовидная таблица на страницу рис.2 Настройка Графа сущностей Древовидной таблицы
- после заполнения Графа сущностей компоненты в свойстве Древовидная таблица. Подгрузка данных необходимо в качестве Колонки, указывающей на родительский элемент указать колонку Главной сущности (иерархической таблицы базы данных Справочник видов продукции) - parent_id, которая является внешним ключом, ссылающимся на первичный ключ этой же таблицы базы данных (рис.3). Указание данной колонки и использование иерархической таблицы базы данных в качестве Главной сущности позволит выстроить древовидную структуру таблицы с ветвями (родителями) и относящимися к ним дочерними записями.
- в параметре Таблица. Настроить колонки таблицы необходимо включить элементы, которые будут отображать значения колонок из трёх ранее добавленных в Граф сущностей таблиц базы данных -Справочник видов продукции (иерархическая таблица -Главная сущность),Справочник ЛКВП и Справочник кодов ФСРАР (рис.4)
- на этой же странице Справочник видов продукции для того чтобы реализовать возможность добавления новой записи в таблицу с переходом на страницу Добавления вида продукции необходимо добавить элемент Кнопка выбора,в свойствах которого настраиваются следующие параметры (рис.5):
- в качестве Компоненты для выбора записи указываем настраиваемую Древовидную в таблицу
- в свойстве элемента Таблица. Получить идентификатор выбранной в таблице записи и сохранить в переменную процесса в параметре Сохранить идентификатор в…указываем уже созданную переменную процесса parent_id
- по нажатию на кнопку Добавить скрипт необходимо выбрать из открывшегося списка доступную для компоненты функцию Управление навигацией и в её настройках указать значение переменной навигации add_vid_prod, по которому будет осуществляться переход по бизнес-процессу на страницу Добавление вида продукции
рис.3 Настройка свойства Подгрузка данных
рис.4 Настройка колонок Таблицы
рис.5 Настройка Кнопки выбора записи в таблице
Согласно условию задачи, в случае, когда пользователю необходимо добавить новую запись (родительскую или дочернюю) в таблицу осуществляется переход по бизнес-процессу на страницу Добавления вида продукции по нажатию на кнопку Добавить. На открывшейся странице должно быть поле Родитель, которое будет заполнено из переменной процесса значением (идентификатором) выбранной ранее записи в таблице, в случае, если происходит добавление дочерней записи к уже существующей ветви (родителю). Если переход на страницу был осуществлен без выбора записи в Таблице, то есть пользователю необходимо добавить родительскую запись, на странице Добавления вида продукции поле Родитель будет пустым.
Для того чтобы добавитьполе Родитель(компонентаПоле ввода с подбором значения)на страницу Добавления вида продукции необходимо сделать следующее:
- добавить элемент из раздела **Компоненты – Поля – Поле ввода с подбором значения (с возможностью сохранения)**внутрь компоненты Формана странице(рис.6)
- в свойстве компоненты Поле ввода с подбором значения. Подгрузка данных настроить Граф сущностей, где в Редакторе структуры сущностей необходимо включить в качестве Главной сущности таблицу базы данных -Справочник видов продукции (рис.7)

рис.6 Добавление компоненты Поле ввода с подбором значения (с возможностью сохранения) рис.7 Настройка Графа сущностей Поля ввода с подбором значения
- после заполнения Графа сущностей компоненты в свойствеПоле ввода с подбором значения. Подгрузка данныхнеобходимо дополнительно настроить два параметра (рис.8):
- в параметре Сортировать поуказываем колонку Название (name)таблицы базы данных Справочник видов продукции, включенной в Граф сущностей компоненты.
- в параметреПоказывать пользователюуказываем колонку Название (name)таблицы базы данных Справочник видов продукции, включенной в Граф сущностей компоненты.
- для того, чтобы полученное значение из элемента Родитель сохранялось в базу данных, необходимо настроить свойствоПоле ввода с подбором значения. Сохранения значения, где мы указываем таблицу базы данных и колонку, в которую будет происходить сохранение значения на странице (рис.9)
- согласно поставленной задаче, описанной выше, значение поля Родитель на странице должно подгружаться из переменнойпроцесса - parent_id, что можно настроить перейдя к свойству компоненты Заполнить значением из переменной процесса (рис.9)
рис.8 Настройка Подгрузки данныхПоля ввода с подбором значения рис.9 Настройки свойств сохранения и заполнения значения из переменной
Результат выполнения задачи:
После применения изменений на странице, в экранной форме пользовательского приложения, мы видим, что на страницеСправочник видов продукции есть Древовидная таблица, в которой записи отображаются в виде дерева, где видно основную ветвь (родительскую запись) - Группу продукции, и ответвляющиеся от неё дочерние записи - Виды продукции (рис.10). Для того, чтобы добавить новую запись в Таблицу (дочернюю к уже имеющейся записи) на странице размещена кнопка Добавить (рис.10). По нажатию на кнопку происходит запись идентификатора выбранной строки-родителя, к которой пользовательхочет добавить дочернюю запись, в переменную процесса и переход по бизнес-процессу на страницу Добавления вида продукции (рис.11). После открытия страницы в поле Родитель отображается значение ранее выбранное в Древовидной таблице на странице Справочник видов продукции (рис.12, рис.13). В случае, если пользователь добавляет саму ветвь (родителя), то он не выбирает запись в таблице, а сразу нажимает на кнопку Добавить, и значение поля Родитель у добавляемой записи остается пустым (рис.13).

рис.10 Отображение Древовидной таблицы на странице рис.11 Выбор родительской записи в таблице для добавления дочерней записи

рис.12 Отображение значения в поле Родитель рис.13 Последовательность двух вариантов действия: добавление родительской и дочерней записи
image2019-4-12_14-27-47.png (image/png)
image2019-4-12_14-27-55.png (image/png)
Screenshot_2.png (image/png)
Screenshot_8.png (image/png)
Screenshot_9.png (image/png)
Screenshot_9.png (image/png)
image2019-4-12_15-13-14.png (image/png)
Screenshot_10.png (image/png)
Screenshot_11.png (image/png)
image2019-4-16_15-40-30.png (image/png)
Screenshot_12.png (image/png)
Screenshot_151.png (image/png)
Screenshot_15.png (image/png)
Screenshot_15.png (image/png)
Screenshot_15.png (image/png)
image2019-4-17_10-42-16.png (image/png)
image2019-4-17_10-48-37.png (image/png)
image2019-4-17_10-50-29.png (image/png)
image2019-4-17_10-51-29.png (image/png)
image2019-4-17_10-55-32.png (image/png)
Запись_2019_04_17_11_02_28_197.gif (image/gif)
image2019-4-17_11-7-50.png (image/png)
image2019-4-17_11-12-45.png (image/png)