# Вкладки дизайнера интерфейсов

> [HTML Version](designer-tabs.html)

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

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

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

### Размещение виджетов

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

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

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

Подробнее о том, как размещать виджеты, читайте в статьях [о добавлении виджета на страницу](360027211631.md) и [о настройке шаблона формы для приложений и процессов](360029250931.md#add-widget).

При работе со сложными интерфейсами вы можете  быстро находить элементы, используя [навигацию на поле для моделирования](canvas-navigation.md). Также можно перемещать, копировать, удалять отдельные виджеты и выполнять другие доступные действия.

### Настройка внешнего вида виджетов

Чтобы задать внешний вид интерфейса, например, настроить цвета, границы и отступы, откройте на верхней панели [редактор стилей](style-editor.md). Он позволяет установить для виджетов стили на языке CSS с возможностью автодополнения, проверки на ошибки, изоляции стилей и т. д. 

Все доступные варианты определения внешнего вида виджетов описаны в [статье о способах настройки стилей](apply-styles.md).

### Отладка интерфейса

После окончания настройки всех виджетов вы можете проверить работу и внешний вид формы или страницы перед публикацией. Для этого используйте [режим отладки](interface-debug.md).

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

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

**(interface-designer-2.png)**

## Вкладка «Скрипты»

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

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

**(interface-designer-3.png)**

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

На этой вкладке можно просмотреть все опубликованные версии интерфейса с указанием автора, времени и комментария, оставленного при публикации. Также в списке отобразятся [снятые с публикации версии](#unpublish).

Внешний вид вкладки и набор доступных действий зависит от того, включено в системе [версионирование структур](elma365-structure-versioning.md) или нет:

1. Если сохранение версий структур не активировано, вы можете [восстановить предыдущую версию](#restore-version) или [снять с публикации](#unpublish).

**(interface-designer-4.png)**

2. Если версионирование активировано, текущая версия в списке обозначается значком **(designer-tabs-1.png)**, а снятая с публикации — значком**(designer-tabs-2.png)**. Для перехода к меню действий справа от версии нажмите значок **три точки** и выберите нужное:

**(designer-tabs-3.png)**

	- [Сравнить с текущей](elma365-structure-versioning.md#compare-with-current) — просмотреть прежнюю и текущую версии в формате JSON;

	- **Скачать файл** — загрузить версию в виде файла формата **.е365**. Такие файлы версий можно сравнить во внешнем текстовом редакторе, например в Visual Studio Code;

	- [Снять с публикации](#unpublish);

	- **Восстановить версию** —сделать текущей одну из предыдущих версий.

### Восстановить предыдущую версию

Вы можете восстановить любую предыдущую опубликованную версию интерфейса. Для этого выберите её в списке и нажмите кнопку **Применить версию** или **Восстановить версию**.

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

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

### Снять версию с публикации

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

Также вы можете снять с публикации все предыдущие версии интерфейса во время [публикации новой версии](interface_designer.md#unpublish).

Если вы хотите восстановить снятую с публикации версию, выберите её в списке и нажмите появившуюся кнопку **Восстановить публикацию **или **Восстановить версию**.

## Вкладка «Настройки»

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

- [отключить](#validation-errors) отображение виджета с ошибками валидации;

- [настроить](#custom-widgets) для пользовательского виджета:

	- видимость в дизайнере интерфейсов;

	- размещение внутри разных интерфейсов;

- задать [системные функции](#system-functions);

- разрешить [использование](#access-settings) в виджете:

	- глобальных объектов;

	- элементов текущего раздела;

	- объектов и переменных из выбранных разделов или пользовательских модулей, с которыми установлены [опциональные зависимости](optional-dependencies.md). Возможность подходит для разработки решений, так как в этом случае виджет можно экспортировать без ограничений.

### Отображение ошибок валидации

Опция **Не отображать виджет с ошибками валидации** используется для настройки [формы создания или редактирования](360009918011.md) элемента приложения, [задачи](360012495611.md) и [стартового события](360012496011.md), чтобы ошибки валидации отображались только под некорректно заполненными полями. 

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

(interface-designer-10.png)

### Настройка пользовательского виджета

При создании [пользовательского виджета](user_widgets.md) на вкладке **Настройки > Основные** можно управлять его размещением внутри других интерфейсов. 

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

- **Скрывать виджет в списке виджетов** — установите флажок, чтобы на вкладке **Шаблон** на правой панели дизайнера интерфейсов виджет не отображался. Например, вы создали виджет, состоящий из нескольких других пользовательских виджетов. Вспомогательные виджеты можно скрыть из дизайнера интерфейсов, чтобы пользователи применяли только основной виджет;

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

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

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

Доступные варианты:

- **Полный** — по умолчанию виджет выводится на поле для моделирования в том же виде, как будет отображаться после публикации. 

	- **Вызывать функцию инициализации в конструкторе** — по умолчанию в виджете активируется [функция инициализации](widget_functions.md#onlnit), которая содержит скрипты и позволяет, например, отправлять запросы на сервер для получения данных.

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

- **Выводить только название виджета** — в дизайнере отображается только название виджета, чтобы обозначить его расположение на форме. Можно компактно размещать виджеты на поле для моделирования и быстро переходить к их настройкам; 

- **Отдельный виджет** — при выборе этого вида появится кнопка **Создать форму**. Нажмите на неё и создайте специальную форму виджета, которая будет отображаться вместо исходной при моделировании формы или страницы. Если отдельная форма виджета была создана ранее, для её настройки в дизайнере интерфейсов нажмите **Редактировать форму**. 

Это удобно, если виджет содержит, например, текстовое наполнение и другие виджеты. В этом случае на шаблоне можно представить виджет схематично. Специальная форма настроена, например, для виджета [Модальное окно](modal_window.md). 

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

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

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

- [onInit()](widget_functions.md#onlnit) — при инициализации виджета;

- [destroy()](widget_functions.md#destroy) — при окончании работы виджета;

- [canRender()](widget_functions.md#canrender) — при проверке условий для отображения виджета;

- [onLoad()](widget_functions.md#onload) — при завершении отрисовки виджета.

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

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

(interface-designer-8.png)

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

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

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

Здесь вы можете разрешить использование виджетов, настроенных на уровне раздела или компании, а также получить доступ к [глобальным константам](global-constants.md) в скрипте.

**(interface-designer-9.png)**

- **Доступные элементы **— предоставьте доступ к дополнительным элементам других уровней:

	- **Разрешить использование всех элементов** — установите флажок, чтобы включить доступ к константе [Global](global-constants.md) и виджетам из других разделов. Тогда при написании скриптов можно использовать переменные, содержащиеся во всех разделах системы, и глобальные параметры. Обратите внимание, использование константы \[OBJECT\] и виджетов других разделов делают недоступным [экспорт приложения](360009669292.md) или [раздела](360007722171.md);

	- **Разрешить использование элементов раздела** — включите опцию, чтобы открыть доступ к константе [Namespace](global-constants.md) и виджетам текущего раздела. Обратите внимание, обращение к объектам раздела в скрипте и использование виджетов раздела делают недоступным [экспорт приложения](360009669292.md);

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

````
Использование констант \[OBJECT\] или \[OBJECT\] в скриптах ограничивает экспорт компонентов системы. Подробнее об этом читайте в статье [«Глобальные константы в скриптах»](global-constants.md#export-restrictions).

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

- ````
**Опциональные зависимости (доступны в объекте Imports) **— установите [опциональные зависимости](optional-dependencies.md) от выбранных разделов или пользовательских модулей. После этого в срипте виджета к указанным компонентам можно получить доступ с помощью константы [Imports](global-constants.md). Это позволяет экспортировать и импортировать приложение или раздел без ограничений.

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

Подробнее об использовании констант \[OBJECT\] или \[OBJECT\] в скриптах читайте в cправке ELMA365 TS SDK в статье [«Глобальный контекст и изоляция»](https://tssdk.elma365.com/ru/latest/pages/quick-start/intro_globals.html). Использование константы \[OBJECT\] описано в статье [«Опциональные зависимости»](optional-dependencies.md).

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

На вкладке **Файлы** в меню кнопки **Создать** доступны [такие же опции](add-files-workspace-items.md), как и в разделе **Файлы**. Вы можете:

- добавить библиотеки и пользовательские функции на языке JavaScript, чтобы обращаться к ним в [клиентских скриптах](client_server_scripts.md);

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

После загрузки файла наведите курсор на его название в списке, чтобы выбрать доступное действие:

**(interface-designer-5.png)**

- **(interface-designer-6.png) **— скопировать в буфер обмена ссылку на загрузку файла, чтобы использовать её при настройке пользовательского виджета. Например, добавить на форму или страницу изображение с помощью виджета **Код**, используя ссылку на загруженный файл в теге `<img>`. Подробнее об этом примере читайте в [статье про виджет Код](code_widget.md#img);

- **(download-icon-row.png) **— загрузить файл на ваш компьютер;

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