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

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

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

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

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

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

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

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

add-js

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

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

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

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

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

Вызов серверного метода из клиентского скрипта

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

Например, на сервере может быть сценарий, который выполняет какую-либо обработку и может обращаться к внешним сервисам:

async function DoSomeWork() : Promise<void> {
  // Тут обычная логика серверного сценария.
  // Можно также использовать внешние вызовы через await
  let response = await fetch('https://my-service.mycompany.com/getmydata?token=' + Context.data.secureToken);
  Context.data.mySecureData = await response.text();
}

После этого в коде на стороне клиента можно вызвать этот метод, используя свойство Server.rpc:

async function onButtonClick() : Promise<void> {
  ViewContext.data.blockUI = true;
  await Server.rpc.DoSomeWork();
  ViewContext.data.blockUI = false;
}

Обратите внимание, между сервером и клиентом данные передаются только через Context или ViewContext. Метод на стороне сервера должен быть без параметров и иметь возвращаемый тип Promise<void>, только тогда он появится в автодополнении в клиентском сценарии.

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

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

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

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

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

script_0

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

script4

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

script5

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

async function close_button(): Promise<void>{
    Context.data.nachat_testirovanie = true
    Context.data.razvernut_v1 = true 
}

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

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

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

script8

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

async function closeBlock(): Promise<void> {
    Context.data.odin_otvet = true  
}

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

async function proverkaQ1(): Promise<void> {
    if (Context.data.n1 && Context.data.n2 && Context.data.n3) {
        Context.data.odin_otvet = false
    }
        else if (Context.data.n1 && Context.data.n2) {
        Context.data.odin_otvet = false
        }
            else if (Context.data.n1 && Context.data.n3) {
            Context.data.odin_otvet = false
            }
                else if (Context.data.n2 && Context.data.n3) {
                Context.data.odin_otvet = false
                }
                    else if (!Context.data.n1 && !Context.data.n2 && !Context.data.n3) {
                    Context.data.odin_otvet = false
                    }
                        else {
                        Context.data.razvernut_v1 = false
                        Context.data.razvernut_v2 = true;    
                        }
}

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

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

script11

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

async function resultTest(): Promise<void> {
    if (Context.data.n2 && Context.data.n2_2008 && Context.data.c_11 && Context.data.elma_365 && Context.data.rpa) {
        Context.data.pravilno = true
    } else {
        Context.data.ne_pravilno = true
    }  
}

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