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

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

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

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

Сценарии могут быть:

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

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

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

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

add-js

Внешние зависимости в клиентских сценариях

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

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

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

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

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

Получение данных из виджетов

Способ получения контекстных данных в сценариях зависит от того, где настраивается виджет.

Виджеты интерфейсов

Если вы настраиваете интерфейс и создаёте пользовательский виджет, обращаться к его контексту следует с помощью константы Context, например:

Context.data.string_1 = 'string value';

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

Виджеты на формах

Доступ к виджетам, расположенным на форме приложения, осуществляется с помощью константы ViewContext, так как константа Context в этом случае отвечает за контекст приложения:

const itemName = Context.data.__name;
ViewContext.data.string_1 = `Название ${ itemName }}`;

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

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

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

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, только тогда он появится в автодополнении в клиентском сценарии.

Вызывать серверные методы можно также с помощью вложенных виджетов, например, Кнопка или Код. Подробнее об этом читайте в справке ELMA365 TS SDK.