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

Дизайнер интерфейсов

В Дизайнере интерфейсов вы можете настроить собственные интерфейсы, используя виджеты.

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

Виджеты можно использовать:

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

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

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

  1. Чтобы создать интерфейс:
  • Перейдите в раздел Администрирование > Интерфейсы. Создайте новый виджет или страницу. Вы автоматически перейдете в дизайнер;
  • Если вы хотите использовать интерфейс на уровне конкретного раздела или его приложения, перейдите в меню раздела, нажав на значок шестерёнки рядом с его названием, и выберите пункт Интерфейсы. Затем создайте виджет или страницу. Дизайнер откроется автоматически.
  1. Чтобы настроить страницу главного меню или меню раздела:
  • Добавьте новую страницу или откройте существующую. Нажмите на значок шестеренки в правом верхнем углу страницы и выберите пункт Конструктор.
  1. Чтобы настроить форму приложения:
  • Перейдите в расширенный режим настройки форм приложения. Откройте вкладку формы, которую хотите изменить, нажмите ссылку <По умолчанию>, а затем кнопку +Создать форму. Если форма была создана ранее, нажмите кнопку Редактировать форму на соответствующей вкладке. Подробнее об этом читайте в статье «Шаблон формы».

Работа в Дизайнере интерфейсов

Дизайнер интерфейсов выглядит следующим образом:

interface_designer01

  1. Поле для моделирования — это рабочая область, внутри которой вы будете создавать пользовательские виджеты и настраивать внешний вид страниц или форм с помощью виджетов и свойств.
  2. Панель инструментов, с помощью которой вы можете Сохранить, Опубликовать или Отладить настроенный интерфейс, Проверить добавленные виджеты на правильность составления, а также Отменить и Повторить действие.
  3. Вкладки для работы с дизайнером интерфейсов: ШаблонКонтекст, Сценарии, История и Файлы.
  4. Вкладки для наполнения интерфейса:

Вкладка «Шаблон»

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

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

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

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

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

Вкладка «Контекст»

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

interface-designer-2

Вкладка «Сценарии»

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

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

interface-designer-3

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

Подробнее об использовании сценариев читайте в cправке «ELMA365 TS SDK».

Вкладка «История»

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

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

interface-designer-4

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

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

Вкладка «Файлы»

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

interface-designer-5

Верхняя панель инструментов дизайнера

На верхней панели дизайнера располагаются кнопки для работы с настраиваемым интерфейсом.

interface_toolbar1

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

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

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

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

Навигация по полю для моделирования

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

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

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

interface-designer-7

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас