В дизайнере интерфейсов вы можете настроить собственные интерфейсы, используя виджеты.
Виджет — это элемент интерфейса с определёнными функциональными возможностями для решения таких задач, как загрузка файла, отображение данных, сообщений, списка пользователей и т. д.
Виджеты можно использовать:
- для настройки страниц;
- для настройки форм.
Комбинируя различные виджеты, вы создаете интерфейс, в котором в дальнейшем будут работать пользователи. Готовую комбинацию виджетов можно сохранить и затем многократно использовать на разных страницах и формах. Таким образом вы можете создавать разнообразные интерфейсы, которые максимально отвечают нуждам вашей компании.
Перейти в дизайнер интерфейсов
В дизайнере интерфейсов настраивается внешний вид форм приложений и страниц, а также создаются пользовательские виджеты. Перейти в дизайнер можно несколькими способами в зависимости от того, какой элемент системы вы хотите настроить.
- Чтобы создать интерфейс:
- перейдите в раздел Администрирование > Интерфейсы. Создайте новый виджет типа Страница или другой пользовательский виджет. Вы автоматически перейдёте в дизайнер;
- если вы хотите использовать интерфейс на уровне конкретного раздела или его приложения, можно в меню раздела или приложения выбрать пункт Интерфейсы. Затем создайте виджет. Дизайнер откроется автоматически.
- Чтобы настроить страницу главного меню или меню раздела:
- добавьте новую страницу или откройте существующую. Затем в правом верхнем углу страницы нажмите значок шестерёнки и выберите пункт Конструктор.
- Чтобы настроить форму приложения:
- перейдите в расширенный режим настройки форм приложения. Откройте вкладку формы, которую хотите изменить, нажмите ссылку <По умолчанию>, а затем кнопку +Создать форму. Если форма была создана ранее, нажмите кнопку Редактировать форму на соответствующей вкладке. Подробнее об этом читайте в статье «Шаблон формы».
Если с элементом интерфейса уже работает в дизайнере другой администратор, вы можете открыть этот элемент в дизайнере только для просмотра. Для этого при переходе в дизайнер в появившемся окне нажмите Открыть в режиме просмотра.
Работа в дизайнере интерфейсов
Дизайнер интерфейсов выглядит следующим образом:
- Поле для моделирования — это рабочая область, внутри которой вы будете создавать пользовательские виджеты и настраивать внешний вид страниц или форм с помощью виджетов и свойств.
- Панель инструментов, с помощью которой вы можете Сохранить, Опубликовать или Отладить настроенный интерфейс, Проверить добавленные виджеты на правильность составления, а также Отменить и Повторить действие.
- Вкладки для работы с дизайнером интерфейсов: Шаблон, Контекст, Сценарии, История, Настройки и Файлы.
- Вкладки для наполнения интерфейса:
- Виджеты — все доступные виджеты сгруппированные по типам;
- Свойства — системные свойства виджетов, все переменные из контекста приложения или бизнес-процесса, а также свойства, добавленные на вкладке «Контекст».
Вкладка «Шаблон»
На вкладке Шаблон вы будете наполнять интерфейс виджетами и настраивать внешний вид страниц и форм.
Чтобы добавить виджет, перетащите его на поле для моделирования и настройте. Вы можете использовать стандартные виджеты, а также создавать свои собственные — пользовательские виджеты.
Стандартные виджеты группируются по типам. В зависимости от того, какой элемент системы вы настраиваете, страницу или форму, вам будет доступен определенный набор виджетов. Например, на страницы нельзя добавить виджеты для боковой панели формы. На формы, в свою очередь, нельзя добавить виджеты для страниц.
Чтобы создать пользовательский виджет, комбинируйте стандартные виджеты между собой. Например, вы можете добавить Панель с заголовком, в ней разместить Колонки, а в одну из колонок добавить Таблицу с отчётом. Сохраните виджет, и в дальнейшем вы сможете использовать его при настройке других интерфейсов.
О том, как разместить виджет, читайте в статьях «Добавление виджета на страницу» и «Шаблон формы». Подробное описание всех доступных виджетов можно найти в разделе «Типы виджетов».
Вкладка «Контекст»
На вкладке Контекст добавляются свойства, которые можно выносить на поле для моделирования, а также использовать при написании сценариев. Чтобы создать свойство, нажмите кнопку +Добавить и укажите его параметры. Подробнее о свойствах и о том, как их добавлять, читайте в статьях: «Вкладка “Контекст”», «Типы данных в системе», «Типы контекста».
Вкладка «Сценарии»
На этой вкладке вы можете написать сценарии для обработки данных, чтобы в дальнейшем использовать их в настройках виджетов. Например, при помощи сценария можно отображать на странице актуальные курсы валют или создать заголовок страницы, который будет изменяться в зависимости от текущей даты.
Также вы можете настроить поведение виджетов, например, показать всплывающее окно при наведении курсора на определенную область формы или страницы. Подробнее об этом читайте в статье «Сценарии в виджетах».
Вкладка «История»
После того как вы внесли изменения в интерфейс формы или страницы, их необходимо опубликовать, чтобы новые настройки стали доступны пользователям. Все опубликованные версии интерфейса будут отображаться на вкладке История с указанием автора, времени и комментария, оставленного при публикации.
На этой вкладке вы можете восстановить предыдущую версию интерфейса. Для этого выберите название в списке, нажмите кнопку Применить версию в правом верхнем углу страницы и подтвердите действие.
Настройки выбранной версии применятся к текущему черновику интерфейса, открытому на вкладке Шаблон. Все сохраненные, но не опубликованные изменения будут утеряны.
Вы можете отредактировать восстановленную версию формы или страницы, изменить расположение или настройки виджетов. Чтобы применить интерфейс и разрешить пользователям доступ к нему, повторно нажмите кнопки Сохранить и Опубликовать на верхней панели дизайнера.
Вкладка «Настройки»
На этой вкладке вы можете задать системные функции, а также разрешить использование глобальных элементов в виджете.
Системные функции
Здесь вы можете выбрать функции, которые хотите применить при инициализации виджета, проверке условий для его отображения или валидации формы.
Используйте эту возможность, чтобы настроить выполнение дополнительных действий, например, загрузки и подготовки данных для отображения в виджете. Указывать функции на этой вкладке необязательно.
- Инициализация — по умолчанию при инициализации выполнится функция onInit, если она есть в сценариях. Если вы хотите, чтобы выполнилась другая функция, выберите её или создайте новую.
- Необходимость отображения — по умолчанию при проверке условий для отображения виджета выполнится функция canRender, если она есть в сценариях. Если вы хотите, чтобы выполнилась другая функция, выберите её или создайте новую.
- Валидация — выберите функцию для выполнения пользовательской валидации (проверки правильности заполнения формы). По умолчанию она не задана. В этой функции вы можете реализовать дополнительные проверки к уже существующим стандартным проверкам валидации при попытке сохранить форму. Например, задайте проверку значений полей формы.
Чтобы указать функцию из ваших сценариев, выберите Клиент или Сервер и укажите её название.
Вы можете перейти к созданию сценария, нажав Создать. Затем задайте название функции и ещё раз нажмите Создать. После этого перейдите на вкладку Сценарии, нажав Открыть. Подробнее о создании сценария на стороне Клиент или Сервер читайте в статье «Сценарии в виджетах».
Доступные элементы
Вы можете открыть доступ к дополнительным элементам других уровней, чтобы использовать их для создания интерфейса.
Разрешить использование всех элементов — чтобы включить доступ к глобальным константам и виджетам из других разделов, установите флажок. Тогда при написании сценариев можно использовать переменные, содержащиеся в разделах, и глобальные параметры. Обратите внимание, использование глобальных констант и виджетов других разделов ограничивает возможность экспорта приложения или раздела.
Разрешить использование элементов раздела — чтобы открыть доступ к объектам и виджетам текущего раздела, установите флажок.
Подробнее об использовании сценариев читайте в cправке «ELMA365 TS SDK».
Вкладка «Файлы»
На вкладке Файлы вы можете добавить библиотеки и пользовательские функции на языке Javascript, чтобы обращаться к ним в клиентских сценариях.
Верхняя панель инструментов дизайнера
На верхней панели дизайнера располагаются кнопки для работы с настраиваемым интерфейсом.
- Сохранить — настроенная страница или форма сохранится как черновик. Внесённые изменения не будут доступны пользователям. Вы сможете вернуться к редактированию интерфейса позже;
- Проверить — добавленные виджеты проверяются на наличие ошибок. Если в настройках виджета обнаружена ошибка, например, неверно составлен добавленный сценарий, вы увидите оповещение;
- Опубликовать — виджеты отобразятся на формах или страницах и станут доступны пользователям. Публикуйте интерфейс каждый раз, когда вносите изменения в него и хотите, чтобы они стали видны пользователям. При публикации версии вы можете оставить комментарий. Он отобразится на вкладке История, где вы можете вернуться к предыдущей версии страницы или формы;
- Отладить — в открывшемся окне вы сможете посмотреть, как будет выглядеть настроенная форма или страница для пользователей после публикации. Подробнее об этом читайте в статье «Отладить интерфейс в дизайнере»;
- Отменить — при работе на вкладке Шаблон вы можете отменить своё последнее действие: добавление или удаление виджета, его перемещение, изменение настроек;
- Повторить — позволяет заново выполнить отменённое действие.
- Перейти к редактированию — это действие доступно только в режиме просмотра элемента интерфейса. Позволяет перейти к его редактированию, если другой администратор завершил работу с этим элементом в дизайнере.
начало внимание
Чтобы внесенные изменения на формах и страницах стали доступны пользователям, не забудьте опубликовать настроенный интерфейс.
конец внимание
Навигация по полю для моделирования
Функция навигации позволяет быстро перейти к нужному элементу на поле для моделирования. Это удобно при создании сложных интерфейсов с большим количеством виджетов.
Навигация становится доступной, когда виджет содержит два и более элемента.
Чтобы быстро найти любой вложенный элемент формы, в верхнем левом углу наведите курсор на название виджета и нажмите шестерёнку справа от него. Затем выберите нужный элемент, на поле он выделится синей рамкой.
