# Системные настройки виджетов

> [HTML Version](common_widget_settings.html)

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

Чтобы значения системных настроек менялись динамически, можно [связать их с контекстными переменными](bind-field-to-widget-option.md).

## Вкладка «События»

**(widget-system-settings-2.png)**

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

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

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

Вы можете использовать переменную типа [Событие](360009707032.md#event) в контексте пользовательского виджета, чтобы передать данные события в родительский виджет. Тогда эта переменная отобразится на вкладке **События**. Подробнее об этом читайте в статье [«Передать событие в родительский виджет»](event-in-widgets.md).

Чтобы настроить исполняемый скрипт:

1. Напротив нужного события нажмите кнопку **Создать**.

2. Введите название скрипта и нажмите **Открыть**.

3. Пропишите скрипт в открывшейся вкладке **Скрипты**.

4. Скрипт сохраняется автоматически. Чтобы выйти из [дизайнера интерфейсов](interface_designer.md), нажмите **Сохранить** и **Опубликовать**.

## Вкладка «Системные» 

**(widget-system-settings-1.png)**

- **HTML стили** — задайте CSS‑стили для виджета, например, определите его ширину;

- **HTML классы **— примените к виджету CSS‑стили, настроенные в [редакторе стилей](style-editor.md) или [виджете Код](code_widget.md#configure-styles). Для этого укажите в поле название пользовательского класса и нажмите клавишу **Tab**. Стили, которые вы настроите для этого класса, определят внешний вид виджета. Один и тот же класс можно указать в настройках сразу нескольких виджетов, например, чтобы задать одинаковый цветной фон для разных панелей на форме;

- **Видимость** — позволяет скрыть виджет визуально с помощью CSS‑стилей и HTML‑разметки. При этом сам виджет не удаляется из кода страницы. Определите условия отображения виджета:

	- **Показывать всегда** — виджет в любом случае будет виден пользователю;

	- **Показать по условию, Скрыть по условию** — добавьте условие, при котором виджет отобразится или скроется. Для этого установите [связь настройки с контесктной переменной](bind-field-to-widget-option.md). Например, выберите вариант **Скрыть по условию** и свяжите эту настройку с переменной типа [Выбор «да/нет»](360009707032.md#yes_no). Виджет отобразится, если пользователь при заполнении данных выберет **Нет**, и скроется, если выбрать **Да**;

	- **Показать для групп** — чтобы отобразить виджет только для определённых групп пользователей, выберите их в поле, которое появится ниже;

	- **Скрывать всегда** — виджет в любом случае скроется для пользователя;

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

	- **Показывать всегда** — изображение виджета сформировано и отображается на странице;

	- **Показать по условию**, **Скрыть по условию** — установите условие, при котором изображение виджета формируется в коде страницы или вызывается функция его уничтожения. Для этого привяжите к настройке контекстную переменную типа **Выбор «да/нет»**. Например, при выборе варианта **Да** для опции **Скрыть по условию** виджет уничтожится;

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

	- **Скрывать всегда** — изображение виджета не формируется, его нельзя увидеть на странице, в том числе в её коде. Чтобы скрыть виджет визуально без удаления из кода страницы, используйте опцию **Видимость**.  
  
Подробнее об использовании настроек читайте в разделе [«Сравнение опций „Видимость“ и „Рендер“»](#render-visibility);

- **Только для чтения** — настройте доступ к виджету:

	- **Наследовать от родителя** — опцию удобно использовать, когда внутрь одного виджета добавлен другой. К примеру, внутри виджета [Колонка](columns.md#column), который доступен только для чтения, вы разместили список с элементами приложения. Для того, чтобы пользователи не могли вносить изменения в этот список, при его настройке укажите опцию **Наследовать от родителя**;

	- **Да **— пользователи не смогут редактировать данные, которые отображает виджет;

	- **Нет **— пользователи смогут редактировать данные, отображаемые внутри виджета;

- **Загружать содержимое асинхронно** — опция доступна для виджетов, в которых содержатся данные, например, [Колонки](columns.md), [Входящие задачи](incoming_tasks.md), [Панель с заголовком](panel_with_heading.md). Включите опцию, чтобы содержимое отображалось только после полной загрузки страницы или формы приложения.

### Сравнение опций «Видимость» и «Рендер»

Рассмотрим, чем отличаются настройки:

- **Видимость** — управляет визуальным отображением виджета на странице при помощи CSS‑стилей и HTML‑разметки;

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

Вы можете применять опцию **Рендер** в следующих случаях:

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

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

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

Совместное использование опций «Видимость» и «Рендер»

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

1. Создайте две переменные типа **Выбор «да/нет»**:

- **Данные готовы** — для опции **Рендер**;

- **Отобразить виджет** — для опции **Видимость**.

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

3. В опции **Видимость** выберите вариант **Показать по условию** и привяжите переменную **Отобразить виджет**, в настройках которой предустановлено значение **Нет**. 

Если настройки выполнены и опубликованы, то:

- когда входные данные для виджета будут готовы, он сформируется в коде страницы;

- когда в переменной **Показать виджет** значение изменится на **Да**, виджет станет виден на странице.

##