Добавление Angular модуля на страницу
Angular модули — это элементы интерфейса, с помощью которых пользователи BPMSoft выполняют различные действия на странице записи. Такие элементы представлены в виде кнопок, ссылок, слайдеров, переключателей и т. д.
Примечание. В BPMSoft используется Angular версии 12.1.3.
В BPMSoft доступны следующие преднастроенные модули Angular:
- Ссылка. Подробнее: Модуль «Ссылка»;
- Слайдер. Подробнее: Модуль «Слайдер»;
- Кнопка. Подробнее: Модуль «Кнопка»;
- Множественный выбор. Подробнее: Модуль «Множественный выбор».
Также возможно создать пользовательские Angular модули с использованием программного кода. Подробнее: Добавление пользовательского модуля Angular
Преднастроенные и пользовательские Angular модули можно добавить только на страницу раздела. Для настройки модулей на странице используйте мастер разделов.
Экземпляр модуля Angular — это добавленный на страницу модуль Angular из меню «Элементы страницы» мастера разделов. На одной странице раздела могут отображаться несколько экземпляров одного модуля. Например, для разных полей можно добавить элемент «Слайдер» с разными настройками.
Вы можете управлять отображением экземпляров модулей на странице раздела с помощью бизнес-правил. Подробнее: Отображение элемента
Пример. Для указания персональной скидки клиента с помощью интерактивного элемента добавим на страницу контакта модуль «Слайдер».
Перед выполнением примера добавьте на страницу раздела «Контакты» поле, которое отображает значение персональной скидки клиента, например, поле «Персональная скидка, %». Подробнее о создании и настройке полей на странице раздела смотрите в статье Поля
Чтобы добавит экземпляр Angular модуля на страницу раздела выполните следующие шаги:
- Перейдите в раздел, на страницу которого будет добавлен Angular модуль. Например, в раздел «Контакты».
- Откройте мастер раздела. Для этого нажмите на кнопку панели управления «Настройка вида» → «Открыть мастер раздела».
- В мастере раздела перейдите к блоку «Страницы раздела» и нажмите кнопку «Редактировать страницу».
Рисунок 1 — Переход к настройке страницы раздела
- В дизайнере страницы перейдите на вкладку, на которую будет добавлен Angular модуль. Например, вкладка «Основная информация» страницы контакта.
- Если на вкладке нет группы полей, то создайте ее по кнопке «Добавить группу полей». Подробнее: Группы полей.
- В блоке «Элементы страницы» выберите нужный Angular модуль и переместите на вкладку в группу полей. При этом области, в которые возможно добавить модуль, подсвечиваются (Рисунок 2). Для реализации примера добавим модуль «Слайдер» рядом с полем «Персональная скидка, %».
Рисунок 2 — Добавление Angular модуля на вкладку страницы
- В открывшемся окне для настройки модуля «Слайдер» укажите значения параметров (Таблица 1).
Рисунок 3 — Пример настройки модуля «Слайдер»
Таблица 1 — Параметры для настройки модуля «Слайдер»
| Параметр | Описание |
| Наименование экземпляра | Название экземпляра модуля «Слайдер». Значение параметра генерируется автоматически, измените при необходимости |
| Максимальное значение Минимальное значение | Максимальное и минимальное значения, которые возможны для выбора с помощью слайдера. Например, установите значения «30» и «0», чтобы ограничить диапазон возможной персональной скидки от 0% до 30% |
| Шаг | Значение шага, с которым ползунок перемещается по шкале. Например, установите значение шага «1» для выбора любого целого числа, входящего в заданный диапазон. Таким образом, с помощью слайдера возможно установить скидку размером 1%, 2%, 3% и т. д |
| Деление шкалы | Интервал, с которым отображаются деления на шкале слайдера. Например, установите значение «5» для отображения делений через каждые 5 шагов. Подробнее: Модуль «Слайдер» |
| Заголовок | Название слайдера, которое отображается на странице записи. Для добавления элемента без заголовка оставьте поле пустым. Так как в примере слайдер добавлен рядом с полем «Персональная скидка, %», отобразим элемент без заголовка |
| Источник данных | Укажите код колонки объекта, который является источником данных для слайдера. Например, для поля «Персональная скидка, %» код может быть «BpmDiscount» |
| Цвет |
Цвет, в который будет окрашен слайдер. По умолчанию цвет слайдера — оранжевый. Значение можно выбрать из преднастроенной палитры цветов или ввести вручную с использованием шестнадцатеричного кода (HEX-кода). Примечание. Шестнадцатеричный код (HEX-код) начинается с символа # и может быть написан в виде шестизначного кода. Например, #0000ff. Подробнее: Модуль «Слайдер» |
Примечание. Подробнее о настройке модуля «Слайдер» смотрите в статье Модуль «Слайдер».
- Нажмите кнопку
. - В дизайнере страницы настройте размеры добавленного модуля, изменив ширину и высоту соответствующего элемента.
- Сохраните изменения в мастере раздела.
Аналогичным образом добавьте на страницу раздела другие преднастроенные и пользовательские Angular модули.
Рисунок 4 — Пример отображения Angular модуля «Слайдер» на странице контакта
В результате на вкладке «Основная информация» страницы контакта отобразится слайдер с заданными параметрами. Максимальная скидка клиента, которая устанавливается с помощью слайдера, равна 30%, минимальная — 0%. Перемещение ползунка по шкале выполняется согласно заданному шагу, равному 1. Деления (точки) на шкале слайдера отображаются с шагом равным 5.
Рисунок 5 — Выбор значения в поле «Персональная скидка, %» с помощью слайдера
Для определения размера скидки переместите ползунок слайдера на нужное значение, например, на «12». В поле «Персональная скидка клиента, %» автоматически отобразится соответствующее значение.
Рекомендуем изучить
Модуль «Слайдер»
Добавление пользовательского модуля Angular
Настройка страницы раздела
Поля
Настройка аналитики в раздела