Добавление Angular модуля на страницу

Простой

Angular модули — это элементы интерфейса, с помощью которых пользователи BPMSoft выполняют различные действия на странице записи. Такие элементы представлены в виде кнопок, ссылок, слайдеров, переключателей и т. д.

Примечание. В BPMSoft используется Angular версии 12.1.3.

В BPMSoft доступны следующие преднастроенные модули Angular:

Ссылка. Подробнее: Модуль «Ссылка»;
Слайдер. Подробнее: Модуль «Слайдер»;
Кнопка. Подробнее: Модуль «Кнопка»;
Множественный выбор. Подробнее: Модуль «Множественный выбор».

Также возможно создать пользовательские Angular модули с использованием программного кода. Подробнее: Добавление пользовательского модуля Angular

На текущий момент функциональность модулей Angular доступна в бета-версии.

Преднастроенные и пользовательские Angular модули можно добавить только на страницу раздела. Для настройки модулей на странице используйте мастер разделов.

Экземпляр модуля Angular — это добавленный на страницу модуль Angular из меню «Элементы страницы» мастера разделов. На одной странице раздела могут отображаться несколько экземпляров одного модуля. Например, для разных полей можно добавить элемент «Слайдер» с разными настройками.

Вы можете управлять отображением экземпляров модулей на странице раздела с помощью бизнес-правил. Подробнее: Показывать элемент на странице

Пример. Для указания персональной скидки клиента с помощью интерактивного элемента добавим на страницу контакта модуль «Слайдер».

Перед выполнением примера добавьте на страницу раздела «Контакты» поле, которое отображает значение персональной скидки клиента, например, поле «Персональная скидка, %». Подробнее о создании и настройке полей на странице раздела смотрите в статье Настройка полей.

Для добавления экземпляров модулей Angular на страницу в системной настройке «Включить поддержку модулей Angular» должно быть установлено значение «Да». Подробнее: Создание модуля Angular

Чтобы добавит экземпляр Angular модуля на страницу раздела выполните следующие шаги:

Перейдите в раздел, на страницу которого будет добавлен Angular модуль. Например, в раздел «Контакты».
Откройте мастер раздела. Для этого нажмите на кнопку панели управления «Настройка вида» → «Открыть мастер раздела».
В мастере раздела перейдите к блоку «Страницы раздела» и нажмите кнопку «Редактировать страницу».

Рисунок 1 — Переход к настройке страницы раздела

В дизайнере страницы перейдите на вкладку, на которую будет добавлен Angular модуль. Например, вкладка «Основная информация» страницы контакта.
Если на вкладке нет группы полей, то создайте ее по кнопке «Добавить группу полей». Подробнее: Добавление группы полей.
В блоке «Элементы страницы» выберите нужный Angular модуль и переместите на вкладку в группу полей. При этом области, в которые возможно добавить модуль, подсвечиваются (Рисунок 2). Для реализации примера добавим модуль «Слайдер» рядом с полем «Персональная скидка, %».

Рисунок 2 — Добавление Angular модуля на вкладку страницы

В открывшемся окне для настройки модуля «Слайдер» укажите значения параметров (Таблица 1).

Рисунок 3 — Пример настройки модуля «Слайдер»

Рисунок 3 — Пример настройки модуля «Слайдер».png

Таблица 1 — Параметры для настройки модуля «Слайдер»

Параметр	Описание
Наименование экземпляра	Название экземпляра модуля «Слайдер». Значение параметра генерируется автоматически, измените при необходимости
Максимальное значение Минимальное значение	Максимальное и минимальное значения, которые возможны для выбора с помощью слайдера. Например, установите значения «30» и «0», чтобы ограничить диапазон возможной персональной скидки от 0% до 30%
Шаг	Значение шага, с которым ползунок перемещается по шкале. Например, установите значение шага «1» для выбора любого целого числа, входящего в заданный диапазон. Таким образом с помощью слайдера возможно установить скидку размером 1%, 2%, 3% и т. д
Деление шкалы	Интервал, с которым отображаются деления на шкале слайдера. Например, установите значение «5» для отображения делений через каждые 5 шагов. Подробнее: Модуль «Слайдер»
Заголовок	Название слайдера, которое отображается на странице записи. Для добавления элемента без заголовка оставьте поле пустым. Так как в примере слайдер добавлен рядом с полем «Персональная скидка, %», отобразим элемент без заголовка
Источник данных	Укажите код колонки объекта, который является источником данных для слайдера. Например, для поля «Персональная скидка, %» код может быть «BpmDiscount»
Цвет	Цвет, в который будет окрашен слайдер. По умолчанию цвет слайдера — оранжевый. Значение можно выбрать из преднастроенной палитры цветов или ввести вручную с использованием шестнадцатеричного кода (HEX-кода). *Примечание.* Шестнадцатеричный код (HEX-код) начинается с символа # и может быть написан в виде шестизначного кода. Например, #0000ff. Подробнее: Модуль «Слайдер»

Примечание. Подробнее о настройке модуля «Слайдер» смотрите в статье Модуль «Слайдер».

Нажмите кнопку .
В дизайнере страницы настройте размеры добавленного модуля, изменив ширину и высоту соответствующего элемента.
Сохраните изменения в мастере раздела.

Аналогичным образом добавьте на страницу раздела другие преднастроенные и пользовательские Angular модули.

Рисунок 4 — Пример отображения Angular модуля «Слайдер» на странице контакта

Рисунок 4 — Пример отображения Angular модуля Слайдер на странице контакта

В результате на вкладке «Основная информация» страницы контакта отобразится слайдер с заданными параметрами. Максимальная скидка клиента, которая устанавливается с помощью слайдера, равна 30%, минимальная — 0%. Перемещение ползунка по шкале выполняется согласно заданному шагу, равному 1. Деления (точки) на шкале слайдера отображаются с шагом равным 5.

Рисунок 5 — Выбор значения в поле «Персональная скидка, %» с помощью слайдера

Для определения размера скидки переместите ползунок слайдера на нужное значение, например, на «12». В поле «Персональная скидка клиента, %» автоматически отобразится соответствующее значение.

Добавление Angular модуля на страницу

Рекомендуем изучить