Продвинутый дизайнер интерфейсов

Настройка содержания и расположения элементов на странице раздела осуществляется в дизайнере страниц без использования кода, с помощью представленных low-code инструментов. На страницу Angular вы можете добавлять экземпляры таких компонентов, как поля, визуальные элементы и элементы действия (кнопки).

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

Для перехода к продвинутому дизайнеру страниц выполните следующие шаги:

1. Откройте раздел, страницу которого необходимо изменить.
2. Перейдите в мастер раздела по команде  «Настройка вида» → «Открыть мастер раздела». Подробнее о включении продвинутого дизайнера и создании страниц в нем смотрите в статьях Настройка раздела в продвинутом дизайнере интерфейсов и Создание страниц в продвинутом дизайнере интерфейсов.
3. В блоке «Страницы раздела» выберите из списка страницу и нажмите → «Редактировать».

Рисунок 1 — Список страниц раздел

Дизайнер интерфейса условно можно разделить на несколько блоков.

Рисунок 2 — Дизайнер интерфейса страницы

1 — Панель управления

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

• — закрыть дизайнер без сохранения изменений;
• Сохранить страницу — сохранить изменения, внесенные на страницу;
• — перейти в базу знаний BPMSoft.

2 — Меню навигации

Меню навигации содержит следующие вкладки:

•  Настройка интерфейса — дизайнер интерфейса страницы;
•  Исходный код — сгенерированный код графического интерфейса страницы, основанный на выполненных настройках в дизайнере;
•  Параметры страницы — форма для просмотра и редактирования параметров страницы. Для изменения доступно поле «Заголовок», а также «Название» только при создании страницы.

Рисунок 3 — Параметры страницы

При сохранении изменений вкладка отмечается иконкой  , если она содержит ошибку. Если на вкладке исправляются все ошибки, иконка пропадает.

3 — Панель элементов

Для создания страницы раздела в BPMSoft по умолчанию доступны следующие Angular компоненты:

• Элементы действия — элементы интерфейса, с помощью которых выполняются различные действия на странице записи. По умолчанию доступен Angular компонент «Кнопка»;
• Поля ввода — список возможных типов полей. По умолчанию доступны следующие Angular компоненты: «Справочное поле», «Число», «Строка», «Дата/Время», «Чек-бокс». Подробнее: Настройка полей в продвинутом дизайнере интерфейсов;
• Визуальные элементы — визуальные и интерактивные элементы интерфейса. По умолчанию доступны следующие Angular компоненты: «Изображение», «Слайдер», «Текст», «Ссылка».

Также вы можете создавать собственные Angular компоненты. Подробнее: Создание Angular компонента

4 — Рабочая область

В рабочей области выполняется настройка внешнего вида страницы. Чтобы добавить элемент, выберите его из меню на панели элементов и перетащите в нужное место рабочей области. Подробнее о добавлении элементов на страницу смотрите в статье Добавление элементов на Angular страницу.

Примечание. Настройка вкладок, групп полей и деталей недоступна.

5 — Панель настройки элемента

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

Чтобы открыть панель, выберите элемент в рабочей области и нажмите . В верхней части панели отображается название элемента: например, «Строка» — тип поля или «Изображение» — название визуального элемента. Для скрытия панели нажмите .

Параметры на панели сгруппированы:

• Основные параметры — общие параметры для всех элементов страницы:
• Видимость — признак, который управляет отображением элемента на странице. Если признак выключен, то элемент будет скрыт на странице. По умолчанию признак включен;
• Доступность — признак, который определяет, может ли пользователь взаимодействовать с элементом, например, нажимать на кнопку или вводить значение в поле. По умолчанию признак включен. Заблокированные поля на странице отмечены ;
• Название компонента — название элемента, которое отображается в рабочей области дизайнера интерфейса;
• Ширина и Высота — размеры элемента на странице. Значения устанавливаются автоматически при изменении размера элемента в рабочей области. Ширина указывается в процентах, высота — в пикселях. Также размер можно установить вручную, указав значения в соответствующих полях. При необходимости вы можете сбросить значение ширины, нажав на % → «Авто». В результате блок элемента растянется на максимально допустимую ширину страницы;
• Дополнительные параметры — набор дополнительных параметров зависит от выбранного элемента. Подробнее о настройке полей смотрите в статье Настройка полей в продвинутом дизайнере интерфейсов, о настройке визуальных и интерактивных элементов — в Преднастроенные модули Angular.

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

Начало работы с продвинутым дизайнером интерфейсов
Настройка раздела в продвинутом дизайнере интерфейсов
Создание страниц в продвинутом дизайнере интерфейсов