Кнопка

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

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

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

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

Скрипт

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

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

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

Использование констант Global или Namespace в скриптах ограничивает экспорт компонентов системы. Подробнее об этом читайте в статье «Глобальные константы в скриптах».

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

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

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

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

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

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

• Добавить версию — позволяет загрузить файл с новой версией документа;
• Отправить — нажав на кнопку, пользователь может отправить документ на ознакомление или на согласование;
• Список версий — позволяет открыть список версий файла при нажатии на кнопку.

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

• Переназначить задачу — позволяет пользователю переназначить задачу на другого сотрудника;
• Меню задачи — открывает меню задачи с действиями:
  • Переназначить;
  • Изменить список участников;
  • Изменить дату начала;
  • Запланировать в Календарь;
  • Изменить время в Календаре;
  • Изменить процент выполнения.

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

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

1. В поле Бизнес-процесс* выберите процесс согласования.
2. В настройке Связать с полем выберите переменную Договор. В неё запишется текущий элемент приложения Договор.
3. Затем вы можете передать в процесс данные договора — его номер, дату создания, контрагента. Для этого нажмите Настроить входные параметры.
4. В открывшемся окне сопоставьте переменные процесса и свойства приложения Договор. В левой колонке выберите свойства контекста процесса, которые хотите заполнить, а в правой колонке выберите свойства Договора, которые хотите передать в процесс.

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

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

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

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

1. В поле Приложение выберите Акт.
2. В настройке Связать с полем выберите свойство Договор, в которое запишется текущий элемент приложения Договор.
3. Затем вы можете передать в акт данные договора — его номер, дату создания, контрагента. Для этого нажмите Настроить входные параметры.
4. В открывшемся окне сопоставьте свойства приложений Акт и Договор. Так, в левой колонке выберите свойство Номер акта, которое хотите заполнить, а в правой колонке выберите свойство Номер договора, которое хотите передать.

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

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

Ссылка

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

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

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

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

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

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

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

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

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

Для этого:

1. На созданной странице Калькулятор кредита нажмите значок шестерёнки и в меню настроек выберите Конструктор. Откроется дизайнер интерфейсов.
2. Добавьте служебную переменную. Она используется в скрипте, чтобы настроить изменение активности кнопки Рассчитать график платежей в зависимости от заполнения нужных полей.
    
   Для этого перейдите на вкладку Контекст и создайте переменную типа Выбор «да/нет» с названием Кнопка отключена. В поле Имя свойства* укажите button_disabled. Этот код будет использоваться в скрипте на следующем шаге.
3. Теперь задайте скрипт, с помощью которого определяется значение созданной служебной переменной. Если поля Процент, Сумма и Срок кредита (мес.) не заполнены, значение служебной переменной true. Кнопка Рассчитать график платежей заблокирована. Если значения в указанные поля добавлены, значение служебной переменной false. Это значит, пользователь может нажать кнопку.
    
   Для этого перейдите на вкладку Скрипты и добавьте следующий скрипт:

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. Перейдите на вкладку Шаблон и откройте настройки поля Процент.
   
2. В появившемся окне перейдите на вкладку События и в опции Событие при изменении значения добавьте функцию onFieldsChange() из созданного ранее скрипта.
   
3. Сохраните настройки.
4. Аналогичным образом добавьте функцию onFieldsChange() в настройках полей Сумма и Срок кредита (мес.).

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

1. Откройте настройки кнопки и в опции Не активна нажмите и <Не установлено>.
2. В появившемся окне выберите добавленное ранее свойство Кнопка отключена и сохраните настройки кнопки.
3. Опубликуйте изменённую страницу.

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

Была ли статья полезной?

Спасибо за ваш отзыв!

×

Ваш отзыв успешно отправлен!

Спасибо за обратную связь.

×

Уточните, почему:

Рекомендации не помоглиТекст трудно понятьНет ответа на мой вопросСодержание статьи не соответствует заголовкуДругая причина

×

Расскажите, что вам не понравилось в статье:

ДаНет

Выберите вариантРекомендации не помоглиТекст трудно понятьНет ответа на мой вопросСодержание статьи не соответствует заголовкуДругая причина