Low-code дизайнер > Создание интерфейсов / Вкладки дизайнера

Вкладки дизайнера

В дизайнере интерфейсов вы можете работать на вкладках Шаблон, Контекст, Сценарии, История, Настройки и Файлы.

Шаблон

На вкладке Шаблон вы будете наполнять интерфейс виджетами и настраивать внешний вид страниц и форм.

Чтобы добавить виджет, перетащите его на поле для моделирования и настройте. Вы можете использовать стандартные виджеты, а также создавать свои собственные — пользовательские виджеты.

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

Чтобы создать пользовательский виджет, комбинируйте стандартные виджеты между собой. Например, вы можете добавить Панель с заголовком, в ней разместить Колонки, а в одну из колонок добавить Таблицу с отчётом. Сохраните виджет, и в дальнейшем вы сможете использовать его при настройке других интерфейсов.

О том, как разместить виджет, читайте в статьях «Добавление виджета на страницу» и «Шаблон формы».

Контекст

На вкладке Контекст добавляются свойства, которые можно выносить на поле для моделирования, а также использовать при написании сценариев. Чтобы создать свойство, нажмите кнопку + Добавить и укажите его параметры. Подробнее о свойствах и о том, как их добавлять, читайте в статьях: «Вкладка „Контекст“», «Типы данных в системе», «Типы контекста».

interface-designer-2

Сценарии

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

Также вы можете настроить поведение виджетов, например, показать всплывающее окно при наведении курсора на определенную область формы или страницы. Подробнее об этом читайте в статье «Сценарии в виджетах».

interface-designer-3

История

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

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

interface-designer-4

Настройки выбранной версии применятся к текущему черновику интерфейса, открытому на вкладке Шаблон. Все сохранённые, но не опубликованные изменения будут утеряны.

Вы можете отредактировать восстановленную версию формы или страницы, изменить расположение или настройки виджетов. Чтобы применить интерфейс и разрешить пользователям доступ к нему, повторно нажмите кнопки Сохранить и Опубликовать на верхней панели дизайнера.

Настройки

На этой вкладке вы можете:

  • отключить отображение виджета с ошибками валидации;
  • разрешить размещение пользовательского виджета на верхней или боковой панели формы;
  • задать системные функции;
  • разрешить использование в виджете:
    • глобальных объектов;
    • элементов текущего раздела;
    • объектов и переменных из выбранных разделов или пользовательских модулей, с которыми установлены опциональные зависимости. Возможность подходит для разработки решений, так как в этом случае виджет можно экспортировать без ограничений.

Основные

Если вы настраиваете форму создания или редактирования элемента приложения, задачу и стартовое событие, вы можете использовать опцию Не отображать виджет с ошибками валидации. Установите флажок, чтобы ошибки валидации отображались только под некорректно заполненными полями. Если опция отключена, вверху формы отображается виджет, который содержит список всех допущенных ошибок.

interface-designer-10

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

  • Отображать виджет в заголовке с кнопками в формах установите флажок, чтобы разрешить размещение виджета на верхней панели любой формы;
  • Отображать виджет в боковой панели установите флажок, чтобы выносить виджет на боковую панель любой формы.

Системные функции

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

По умолчанию выполняются следующие функции, если они заданы в сценариях:

  • onInit() — при инициализации виджета;
  • canRender() — при проверке условий для отображения виджета;
  • onLoad() — при завершении отрисовки виджета.

Вы можете заменить эти функции на другие, чтобы настроить выполнение дополнительных действий, например, загрузку и подготовку данных для отображения в виджете. Для этого выберите функцию или создайте её в поле Инициализация, Необходимость отображения или Окончание отрисовки.

Также можно выбрать функцию для выполнения пользовательской валидации (проверки правильности заполнения формы). По умолчанию она не задана. В этой функции вы можете реализовать дополнительные проверки к уже существующим стандартным проверкам валидации при попытке сохранить форму. Например, задайте проверку значений полей формы.

interface-designer-8

Чтобы указать функцию из ваших сценариев, выберите Клиент или Сервер и укажите её название.

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

Доступные элементы

Здесь вы можете разрешить использование виджетов, настроенных на уровне раздела или компании, а также получить доступ к глобальным константам в сценарии.

interface-designer-9

  • Доступные элементы — предоставьте доступ к дополнительным элементам других уровней:
    • Разрешить использование всех элементовустановите флажок, чтобы включить доступ к константе Global и виджетам из других разделов. Тогда при написании сценариев можно использовать переменные, содержащиеся во всех разделах системы, и глобальные параметры. Обратите внимание, использование константы Global и виджетов других разделов делают недоступным экспорт приложения или раздела;
    • Разрешить использование элементов разделавключите опцию, чтобы открыть доступ к константе Namespace и виджетам текущего раздела. Обратите внимание, обращение к объектам раздела в сценарии и использование виджетов раздела делают недоступным экспорт приложения;

начало внимание

Использование констант Global или Namespace в сценариях ограничивает экспорт компонентов системы. Подробнее об этом читайте в статье «Глобальные константы в сценариях».

конец внимание

  • Опциональные зависимости (доступны в объекте Imports) — установите опциональные зависимости от выбранных разделов или пользовательских модулей. После этого в сценарии виджета к указанным компонентам можно получить доступ с помощью константы Imports. Это позволяет экспортировать и импортировать приложение или раздел без ограничений.

Чтобы установить зависимость, нажмите + Добавить раздел и выберите раздел или пользовательский модуль. Затем в колонке Псевдоним задайте для него уникальное имя, которое будет использоваться в сценарии. Допустимы латинские буквы и цифры, для разделения слов можно использовать знак подчёркивания. По умолчанию в поле указывается код раздела или ID модуля.

начало внимание

Чтобы формирование опциональных зависимостей стало доступно, администратор системы должен включить фича-флаг allowScriptImportsDependencies.

конец внимание

Подробнее об использовании констант Global или Namespace в сценариях читайте в cправке ELMA365 TS SDK в статье «Глобальный контекст и изоляция». Использование константы Imports описано в статье «Опицональные зависимости».

Файлы

На вкладке Файлы вы можете добавить библиотеки и пользовательские функции на языке JavaScript, чтобы обращаться к ним в клиентских сценариях.

interface-designer-5