Виджеты на странице можно сделать интерактивными с помощью сценариев. Сценарий — это код, который описывает поведение виджета в тех или иных условиях. В коде используются переменные, чаще всего — переменные типа «Да/Нет», так как большинство действий виджетов (скрыть, отобразить и тп.) привязано к их значениям.
Сценарии можно прописать на стороне Клиента или Сервера. Сценарии на стороне Клиента выполняются в браузере пользователя, а сценарии на стороне Сервера — непосредственно на сервере QuickBPM.
Серверные сценарии выполняются без ограничения доступа к элементам приложения. Клиентские — с ограничением. Например, если в каком-либо приложении органичен доступ к элементам, то при попытке загрузить элемент, к которому у текущего пользователя нет доступа, клиентский код вернет ошибку, а серверный выполнится успешно. Аналогично при получении списка элементов, на клиенте вернутся только те, к которым есть доступ, на сервере — все.
Как правило, сценарии для виджетов не требуют больших мощностей для реализации, и мы рекомендуем писать их на стороне Клиента.
Работа со сценариями осуществляется на языке TypeScript в удобной среде разработки в low-code дизайнере > вкладка Сценарии.
Примеры использования сценариев в виджетах
Виджеты удобно использовать для того, чтобы показывать информацию в зависимости от тех или иных условий. Например, при определенных действиях, пользователь увидит подсказку или дополнительные поля для заполнения.
Рассмотрим, как можно применить сценарий в виджете на примере теста из нескольких вопросов.
Пример 1. Развернуть панель
По умолчанию вопросы свернуты, но как только пользователь нажмет на кнопку «Начать тестирование», первый вопрос должен развернуться.
Добавим виджет Панель с заголовком и назовем ее Вопрос №1. В настройках панели в поле Развернута добавим переменную «Развернуть в1». Тип этой переменной - «Да/Нет». Панель будет свёрнута, пока значение переменной не сменится на true.
Значение переменной поменяется, когда пользователь нажмет на кнопку Начать тестирование. Для этого настроим саму кнопку.
В настройках кнопки в поле Событие при нажатии добавим сценарий, который будет изменять значение переменной «Развернуть в1» на true. Для того, чтобы добавить сценарий, нажмите кнопку Создать, а затем Открыть. Пропишите сценарий.
Подобный принцип подходит для большинства действий с виджетами. Рассмотрим следующий пример.
Пример 2. Показать информационный блок
Настроим поле Событие при наведении курсора у виджета Информационный блок. Этот блок с предупреждением будет появляться, если пользователь выбрал несколько вариантов ответа.
Нажмите кнопку Создать > Открыть. На вкладке Сценарии пропишите сценарий.
Открываться данный блок будет при выполнении определённых условий, которые также следует прописать в сценарии:
Пример 3. Показать всплывающее окно
Такой же принцип использования сценариев можно применить для отображения виджета Модальное окно. Это всплывающее окно с результатом теста. В поле Показать окно добавим переменную «Да/Нет», которая будет указывать, правильно ли пользователь выполнил тест.
Значение этой переменной будет определяться сценарием:
