Иерархия элементов приложения

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

Описание функционала
Модуль представляет собой виджет структуры приложения, позволяющий:

• Просматривать иерархию элементов в виде дерева
• Осуществлять поиск по названию
• Интерактивно раскрывать/сворачивать ветки структуры
• Обновлять данные по требованию

Основные функции
1. Отображение структуры

• Рекурсивное построение дерева подразделений на основе parent-child связей
• Группировка по родительским подразделениям
• Автоматическая сортировка (сначала с дочерними элементами, затем по алфавиту)

2. Поиск и навигация

• Поиск по частичному совпадению названия подразделения
• Подсветка найденных элементов
• Автоматическое раскрытие родительских веток до найденного элемента
• Плавная прокрутка к результатам поиска

3. Интерактивность

• Раскрытие/сворачивание веток:
  • Клик по всей строке подразделения
  • Клик по иконке-стрелке
• Анимации:
  • Плавное раскрытие/закрытие
  • Параболическое движение соседних элементов
  • Каскадное появление дочерних элементов
• Визуальные эффекты:
  • Подсветка при наведении
  • Индикация активных элементов

4. Управление данными

• Кнопка обновления данных
• Кнопка очистки результатов поиска

Как использовать:

1. После импорта модуля, необходимо вынести виджет на страницу.
2. Ввести код раздела и приложения, на которое собираемся ссылаться.
3. Ввести код атрибута, где указан родитель.
4. обавить опциональную зависимость в настройках виджета.

Спойлер: Добавление виджета настраницу

Спойлер: Добавление зависимости

Спойлер: Пример