# Кнопка

> [HTML Version](button_widget.html)

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

Чтобы разместить виджет, перетащите его с правой панели [дизайнера интерфейсов](interface_designer.md) на поле для моделирования или нажмите кнопку **+ Виджет**. Подробнее читайте в статье [«Шаблон формы для приложений и процессов»](360029250931.md). Затем выполните настройку в открывшемся окне:

## Вкладка «Основные»

**(button-widget-1.png)**

- **Отображение** — выберите внешний вид виджета;

- **Надпись**/**подсказка\*** — укажите текст надписи или подсказки, отображаемый на кнопке. Вы можете [связать](bind-field-to-widget-option.md) это поле с контекстной переменной, нажав (bind_table-icon.png);

- **Иконка** — вы можете выбрать иконку, отображаемую вместе с надписью на кнопке;

- **Не активна** — включите опцию или свяжите её с переменной, чтобы задать блокировку кнопки в зависимости от выполнения некоторых условий. Например, можно отображать кнопку неактивной, пока не указаны значения в обязательных полях. Подробнее о такой настройке читайте в разделе [«Пример динамической блокировки кнопки»](#inactive-case);

- **Не показывать стартовую форму** — опция отображается для кнопок, связанных с [запуском бизнес-процесса](#start-process). Включите её, чтобы при нажатии на кнопку настроенная в стартовом событии [форма запуска](360012496011.md#form_tab) не отображалась. Исполнение процесса начнётся с блока, следующего за стартовым событием. Вы можете [связать](bind-field-to-widget-option.md) это поле с контекстной переменной, нажав (bind_table-icon.png);

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

	- [Скрипт](#script) — выберите готовый скрипт, написанный на вкладке [Скрипты](designer-tabs.md#script-tab), или создайте его; 

	- [Предопределенное действие](#activity) — выберите настроенное в системе действие, например, **Настройка прав доступа**;

	- [Запустить процесс](#start-process) — свяжите кнопку с запуском экземпляра настроенного в системе процесса;

	- [Создать элемент приложения](#create-app-item); 

	- [Ссылка](#link) — настройте переход по ссылке.

### Скрипт

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

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

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

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

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

### ````
Предопределённое действие

Когда пользователь нажмёт кнопку, выполнится уже настроенное в системе действие. Выберите его в поле **Предопределенное действие**. При настройке страницы эта опция не применяется.

Для любых приложений доступно действие:

- **Настройка прав доступа** — пользователь сможет изменить права доступа на элемент приложения. Для этого в настройках самого приложения должна быть выбрана опция **Ограничить доступ к данным**.

Для приложений типа **Документ** доступны действия:

- **Добавить версию** — позволяет загрузить файл с новой версией документа;

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

- **Список версий** — позволяет открыть список версий файла при нажатии на кнопку.

Для задач бизнес-процесса доступны действия:

- **Переназначить задачу** — позволяет пользователю переназначить задачу на другого сотрудника;

- **Меню задачи** — открывает меню задачи с действиями:

	- **Переназначить**;

	- **Изменить список участников**;

	- **Изменить дату начала**;

	- **Запланировать в Календарь**;

	- **Изменить время в Календаре**;

	- **Изменить процент выполнения**.

### Запустить процесс 

Когда пользователь нажмёт кнопку, запустится процесс. Для примера настроим запуск процесса согласования с формы приложения **Договор**:

1. В поле **Бизнес-процесс\*** выберите процесс согласования.

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

3. Затем вы можете передать в процесс данные договора — его номер, дату создания, контрагента. Для этого нажмите **Настроить входные параметры**.

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

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

### Создать элемент приложения

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

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

1. В поле **Приложение** выберите **Акт**.

2. В настройке **Связать с полем** выберите свойство **Договор**, в которое запишется текущий элемент приложения **Договор**.

3. Затем вы можете передать в акт данные договора — его номер, дату создания, контрагента. Для этого нажмите **Настроить входные параметры**.

4. В открывшемся окне сопоставьте свойства приложений **Акт** и **Договор**. Так, в левой колонке выберите свойство **Номер акта**, которое хотите заполнить, а в правой колонке выберите свойство **Номер договора**, которое хотите передать.

**(hmfile_hash_5ff9ee73.PNG)**

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

Теперь при нажатии на кнопку откроется форма создания элемента приложения **Акт**. В поле **Договор** будет записан элемент приложения **Договор**, на форме которого пользователь нажал кнопку. В поле **Номер акта** будет указан номер договора.

### Ссылка

Когда пользователь нажмёт кнопку, осуществится переход по ссылке.

Вы можете связать кнопку со свойством контекста типа **Текст**. Например, чтобы настроить переход к тексту инструкции, выберите (bind_table-icon.png), затем нажмите **<Не установлено>** и в выпадающем списке выберите переменную **Текст инструкции**.

Также можно включить опцию **Открывать ссылку в новой вкладке**.

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

На этих вкладках задаются системные настройки, одинаковые для всех виджетов. Они позволяют управлять видимостью виджетов и доступом к ним, настраивать их поведение при наведении курсора и т. д. Подробнее об этом читайте в статье [«Системные настройки виджетов»](common_widget_settings.md).

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

## Пример динамической блокировки кнопки

Допустим, в системе создана страница **Калькулятор кредита**. На ней пользователи заполняют поля **Процент**, **Сумма**, **Срок кредита (мес.)** и рассчитывают график платежей, нажимая кнопку. 

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

**(button-widget-2.png)**

Для этого:

1. На [созданной странице](360009924451.md) **Калькулятор кредита** нажмите значок шестерёнки и в меню настроек выберите **Конструктор**. Откроется [дизайнер интерфейсов](interface_designer.md).

2. Добавьте служебную переменную. Она используется в скрипте, чтобы настроить изменение активности кнопки **Рассчитать график платежей** в зависимости от заполнения нужных полей.  
  
Для этого перейдите на вкладку **Контекст** и создайте переменную типа [Выбор «да/нет»](360009707032.md#yes_no) с названием **Кнопка отключена**. В поле** Имя свойства\*** укажите \[OBJECT\]. Этот код будет использоваться в скрипте на следующем шаге.

3. Теперь задайте скрипт, с помощью которого определяется значение созданной служебной переменной. Если поля **Процент**, **Сумма** и **Срок кредита (мес.)** не заполнены, значение служебной переменной \[OBJECT\]. Кнопка **Рассчитать график** платежей заблокирована. Если значения в указанные поля добавлены, значение служебной переменной \[OBJECT\]. Это значит, пользователь может нажать кнопку.  
  
Для этого перейдите на вкладку **Скрипты** и добавьте следующий скрипт:

````
async function onInit (): Promise<void> \{  
    Context.data.button\_disabled = true;  
\}  
  
async function onFieldsChange(): Promise<void> \{  
    if (Context.data.sum?.cents \&\& Context.data.sum?.cents > 0 \&\& Context.data.term \&\& Context.data.term > 0 \&\& Context.data.percentage \&\& Context.data.percentage > 0) \{  
        Context.data.button\_disabled = false;  
    \} else \{  
        Context.data.button\_disabled = true  
    \}  
\}

4. ````
Чтобы в добавленном скрипте фиксировалось заполнение полей, укажите в их настройках отправку события при изменении значения. Для этого:

1. Перейдите на вкладку **Шаблон** и откройте настройки поля **Процент**.  
**(button-widget-3.png)**

2. В появившемся окне перейдите на вкладку **События** и в опции **Событие при изменении значения** добавьте функцию \[OBJECT\] из созданного ранее скрипта.  
**(button-widget-4.png)**

3. Сохраните настройки.

4. Аналогичным образом добавьте функцию \[OBJECT\] в настройках полей **Сумма** и **Срок кредита (мес.)**.

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

1. Откройте настройки кнопки и в опции **Не активна** нажмите (bind_table-icon.png) и **<Не установлено>**. 

2. В появившемся окне выберите добавленное ранее свойство **Кнопка отключена** и сохраните настройки кнопки.

3. Опубликуйте изменённую страницу.

Теперь при заполнении всех полей кнопка **Рассчитать график платежей** становится активной. Если хотя бы одно поле остаётся пустым, пользователь не может нажать кнопку.