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

Сценарии в виджетах

Виджеты на странице можно сделать интерактивными с помощью сценариев.

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

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

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

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

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

add-js

В клиентских сценариях виджета вы можете обращаться к библиотечным и пользовательским функциям на языке Javascript. Для этого перейдите в дизайнере на вкладку Файлы. Загрузите один или несколько файлов в формате .js с кодом функций или библиотек. На вкладке Сценарии в исходном коде скрипта подключите добавленные файлы с помощью инструкции import.

Например, подключить библиотеку jQuery можно следующим образом. На вкладке Файлы загрузите файл с актуальной версией библиотеки, скажем jquery-3.6.0.min.js. Перейдите на вкладку Сценарии в раздел клиентских скриптов и в начале сценария добавьте инструкцию:

import $ from "jquery-3.6.0.min.js";

Теперь в коде сценария вы сможете обращаться к функциям библиотеки.

 

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

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

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

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

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

script_0

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

script4

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

script5

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

script6

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

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

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

script8

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

script9

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

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

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

script11

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

script12

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас