Виджеты на странице можно сделать интерактивными с помощью сценариев.
Сценарий — это код, который описывает поведение виджета в тех или иных условиях. В коде используются переменные, чаще всего — переменные типа Выбор «да/нет», так как большинство действий виджетов, например, скрыть, отобразить и т. п., привязано к их значениям.
Сценарии могут быть:
- Клиентскими — выполняются в браузере пользователя;
- Серверными — обрабатываются на сервере ELMA365;
- Смешанными — сценарий, который выполняется на стороне клиента и вызывает серверный метод.
Серверные сценарии выполняются без ограничения доступа к элементам приложения. Клиентские — с ограничением. Например, если в каком-либо приложении ограничен доступ к элементам, то при попытке загрузить элемент, к которому у текущего пользователя нет доступа, клиентский код вернёт ошибку, а серверный выполнится успешно. Аналогично при получении списка элементов, на стороне Клиента вернутся только те, к которым есть доступ, на стороне Сервера — все.
Как правило, сценарии для виджетов не требуют больших мощностей для реализации, и мы рекомендуем писать их на стороне Клиента.
Работа со сценариями осуществляется на языке TypeScript в удобной среде разработки в дизайнере интерфейсов на вкладке Сценарии.
Внешние зависимости в клиентских сценариях
В клиентских сценариях виджета вы можете обращаться к библиотечным и пользовательским функциям на языке 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.