Low-code дизайнер > Создание интерфейсов / Сценарии

Сценарии

Виджеты на странице можно сделать интерактивными с помощью сценариев. Сценарий — это код, который описывает поведение виджета в тех или иных условиях. В коде используются переменные, чаще всего — переменные типа «Да/Нет», так как большинство действий виджетов (скрыть, отобразить и тп.) привязано к их значениям.

Сценарии можно прописать на стороне Клиента или Сервера. Сценарии на стороне Клиента выполняются в браузере пользователя, а сценарии на стороне Сервера — непосредственно на сервере ELMA365.

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

Работа со сценариями осуществляется на языке TypeScript в удобной среде разработки в low-code дизайнере > вкладка Сценарии.

script1

Примеры использования сценариев в виджетах

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

Рассмотрим, как можно применить сценарий в виджете на примере теста из нескольких вопросов.

Пример 1. Развернуть панель

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

script_0

Добавим виджет Панель с заголовком и назовем ее Вопрос №1. В настройках панели в поле Развернута добавим переменную «Развернуть в1». Тип этой переменной -  «Да/Нет». Панель будет свёрнута, пока значение переменной не сменится на true.

script4

Значение переменной поменяется, когда пользователь нажмет на кнопку Начать тестирование. Для этого настроим саму кнопку.

script5

В настройках кнопки в поле Событие при нажатии добавим сценарий, который будет изменять значение переменной «Развернуть в1» на true. Для того, чтобы добавить сценарий, нажмите кнопку Создать, а затем Открыть. Пропишите сценарий.

script6

Подобный принцип подходит для большинства действий с виджетами. Рассмотрим следующий пример.

Пример 2. Показать информационный блок

Настроим поле Событие при наведении курсора у виджета Информационный блок. Этот блок с предупреждением будет появляться, если пользователь выбрал несколько вариантов ответа.

script8

Нажмите кнопку Создать > Открыть. На вкладке Сценарии пропишите сценарий.

script9

Открываться данный блок будет при выполнении определённых условий, которые также следует прописать в сценарии:
script10

Пример 3. Показать всплывающее окно

Такой же принцип использования сценариев можно применить для отображения виджета Модальное окно. Это всплывающее окно с результатом теста. В поле Показать окно добавим переменную «Да/Нет», которая будет указывать, правильно ли пользователь выполнил тест.

script11

Значение этой переменной будет определяться сценарием:

script12