levis/help365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update help elma

Browse Source
This commit is contained in:
koziavin
2025-05-27 21:32:35 +04:00
parent a6b05d6789
commit 898b22bf32
4500 changed files with 89372 additions and 120699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
platform/client_server_scripts.html
View File

@ -1,20 +1,19 @@
<!DOCTYPE html>
<html lang="ru">
<html lang="en">
<head>
<title>Скрипты в виджетах</title>
<title>Scripts in widgets</title>
<meta name="generator" content="Help+Manual" />
<meta name="keywords" content="Код" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Виджеты на странице можно сделать интерактивными с&nbsp;помощью скриптов." />
<meta name="description" content="You can make widgets on pages interactive by using scripts." />
<meta name="picture" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cправка по Low-code платформе ELMA365" />
<meta property="og:url" content="https://elma365.com/ru/help" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="ELMA365" />
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
<meta property="og:url" content="https://brix365.com/en/help" />
<meta property="og:image" content="" />
<link rel="icon" href="favicon.png" type="image/png" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
@ -24,7 +23,6 @@
<link rel="stylesheet" href="./article.css" />
<link rel="stylesheet" href="./glossary.css" />
<link rel="stylesheet" href="./theme.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="helpman_settings.js"></script>
<script type="text/javascript" src="helpman_topicinit.js"></script>
@ -36,16 +34,16 @@
</head>
<body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M6ETBEC1R9"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'G-M6ETBEC1R9');</script>
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
<header class="header elma-365">
<div class="container">
<a class="header__logo" href="https://elma365.com/ru/help">
<img src="./logo.svg" alt="header logo">
<a class="header__logo" href="https://brix365.com/en/help">
<img src="./logo-en.svg" alt="header logo">
</a>
<!-- <div class="hero__search-form" id="search-panel">
<form class="search-form" onsubmit="ym(83179930,'reachGoal','poisk')">
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
<label class="search-form__label">
<span id="reset-search" class="search__icon"></span>
<input class="search-form__input" type="text">
@ -65,7 +63,7 @@
</div>
<div class="header__navi">
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a class="project-link" href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li><li><a class="project-link" href="https://elma365.com/ru/help/business_solutions/-elma365-store.html">Бизнес-решения</a></li></ul></span></li><li><a href="https://api.elma365.com/ru/"target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/"target="_blank">SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/" target="_blank">Академия</a></li><li><a href="https://elma365.com/ru/" target="_blank">Сайт ELMA365</a></li></ul>
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
</div>
@ -80,8 +78,8 @@
<aside class="sidebar" id="sidebar">
<div class="sidebar__header">
<a class="header__logo" href="https://elma365.com/ru/help">
<img src="./logo-light.svg">
<a class="header__logo" href="https://brix365.com/en/help">
<img src="./logo-light-en.svg">
</a>
<span class="sidebar__close elma-365-close" id="close"></span>
</div>
@ -94,15 +92,15 @@
<div class="article-inner">
<div class="content">
<header class="article__header">
<div class="article__bread" style="display:flex; gap:10px;">
<div class="article__bread" style="display:flex; gap:10px;">
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
<div class="topic__breadcrumbs">
<p>Low-code дизайнер &gt; <a href="interface_settings.html">Создание интерфейсов</a> / Скрипты в виджетах</p>
<p>Low-code designer &gt; <a href="interface_settings.html">Set up interfaces</a> / Scripts in widgets</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Скрипты в виджетах</span></h1>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Scripts in widgets</span></h1>
</div>
</header>
@ -111,95 +109,98 @@
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p style="line-height: 1.28; margin: 0 0 11px 0;">Виджеты на странице можно сделать интерактивными с помощью скриптов.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-weight: bold;">Скрипт</span> — это код, который описывает поведение виджета в тех или иных условиях. В коде используются переменные, чаще всего — переменные типа <a href="360009707032.html#yes_no" class="topiclink">Выбор «да/нет»</a>, так как большинство действий виджетов, например, скрыть, отобразить и т. п., привязано к их значениям.</p>
<p class="p_Normal">Скрипты могут быть: </p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;">You can make widgets on pages interactive by using scripts.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;">A <span style="font-weight: bold;">Script</span> is a piece of code that describes a widget<span style="font-family: Inter;">’s</span> behavior under certain conditions. Scripts use variables, the most common type being <a href="360009707032.html#yes-no-switch" class="topiclink">Yes/No switch</a>, as most widget actions (hide, show, etc.) are bound to the values of such properties.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;">Scripts can be:</p>
<ul style="list-style-type:disc">
<li class="p_Normal"><span style="font-weight: bold;">клиентскими</span> — выполняются в браузере пользователя; </li><li class="p_Normal"><span style="font-weight: bold;">серверными</span> — обрабатываются на сервере ELMA365; </li><li class="p_Normal"><span style="font-weight: bold;">смешанными</span> — выполняются на стороне клиента и <a href="client_server_scripts.html#server" class="topiclink">вызывают</a> серверные методы. </li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Серверные скрипты выполняются без ограничения доступа к элементам приложения. Клиентские — с ограничением. Например, при попытке загрузить элемент, к которому у текущего пользователя нет доступа, клиентский код вернёт ошибку, а серверный выполнится успешно. Аналогично при получении списка элементов, на стороне клиента вернутся только те, к которым есть доступ, на стороне сервера — все.</p>
<p style="margin: 0 0 11px 0;">В серверных скриптах можно использовать дополнительные параметры. Они позволяют донастроить виджет и внести изменения в скрипт без перепубликации. Подробнее об этом вы можете прочитать в статье <a href="360009207779.html" class="topiclink">«Дополнительные параметры»</a>.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Как правило, скрипты для виджетов не требуют больших мощностей для реализации, и мы рекомендуем писать их на стороне клиента.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">Скрипты пишутся на языке TypeScript. Работа с ними осуществляется</span> в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a> на вкладке <span style="font-weight: bold;">Скрипты</span>.</p>
<li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Client-side</span>. Executed in a user<span style="font-family: Inter;">’s browser.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Server-side</span>. Executed on the BRIX server.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Mixed</span>. These scripts are executed on the client side, but they <a href="client_server_scripts.html#server" class="topiclink">call</a> server methods.</li></ul>
<p class="p_Normal">Server-side scripts run regardless of access restrictions to app items. Client scripts are executed with restrictions. For example, when trying to load an item to which the current user does not have access, the client-side code will return an error, while the server-side code will execute successfully. Similarly, when receiving a list of items, the client side will return only those items to which they have access, while the server side will return all items. </p>
<p class="p_Normal">In server-side scripts, you can use additional parameters. They allow you to customize the widget and make changes to the script without republishing. You can read more about it in the <a href="360009207779.html" class="topiclink">Additional parameters</a> article.</p>
<p class="p_Normal">Scripts for widgets usually don<span style="font-family: Inter;">’t</span> require powerful hardware to operate, so we recommend writing them on the client side whenever possible.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;">Scripts are written in the TypeScript programming language on the <span style="font-weight: bold;">Scripts</span> tab of the <a href="interface_designer.html" class="topiclink">interface designer</a>.</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало&nbsp;внимание</span></p>
<p class="p_Normal">Использование констант <code><b>Global</b></code> или <code><b>Namespace</b></code> в скриптах ограничивает экспорт компонентов системы. Подробнее об этом читайте в статье <a href="global-constants.html#export-restrictions" class="topiclink">«Глобальные константы в скриптах»</a>.</p>
<p class="p_Normal">Using <code><b>Global</b></code> or <code><b>Namespace</b></code> constants in scripts restricts the export of system components. Read more about it in the <a href="global-constants.html" class="topiclink">Global constants in scripts</a> article.</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец&nbsp;внимание</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="add-js" width="863" height="456" style="margin:0;width:863px;height:456px;border:none" src="add-js.png"/></p>
<h2 class="p_Heading2"><span class="f_Heading2">Внешние зависимости в клиентских скриптах</span></h2>
<p class="p_Normal">В клиентских скриптах виджета вы можете обращаться к библиотечным и пользовательским функциям на языке Javascript. Для этого перейдите в дизайнере на вкладку <span style="font-weight: bold;">Файлы</span>. Загрузите один или несколько файлов в формате <span style="font-weight: bold;">.js</span> с кодом функций или библиотек. На вкладке <span style="font-weight: bold;">Скрипты</span> в исходном коде скрипта подключите добавленные файлы с помощью инструкции <code><b>import</b></code>. </p>
<p class="p_Normal">Например, чтобы подключить библиотеку <code><b>jQuery</b></code>, перейдите на вкладку <span style="font-weight: bold;">Файлы </span>и загрузите файл с актуальной версией библиотеки, например, <span style="font-weight: bold;">jquery-3.6.0.min.js</span>. Перейдите на вкладку <span style="font-weight: bold;">Скрипты</span> в раздел клиентских скриптов и в начале скрипта добавьте инструкцию:</p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><img alt="S1" width="1008" height="605" style="margin:0;width:1008px;height:605px;border:none" src="s1.png"/></p>
<h2 class="p_Heading2"><span class="f_Heading2">External dependencies in client-side scripts</span></h2>
<p class="p_Normal">In client-side scripts in widgets, you can use JavaScript libraries and custom functions. To do that, go to the <span style="font-weight: bold;">Files</span> tab of the interface designer. Upload one or several .<span style="font-weight: bold;">js</span> files with the code of the required functions or libraries. On the <span style="font-weight: bold;">Scripts</span> tab, use the <code><b>import</b></code> declaration to connect the files you added to the source code. </p>
<p class="p_Normal">For example, to connect the <span style="font-weight: bold;">jQuery</span> library, go to the <span style="font-weight: bold;">Files</span> tab and upload a file with the most recent version of the library, for example, <code><b>jquery-3.6.0.min.js</b></code>. Then open the <span style="font-weight: bold;">Scripts</span> tab, to the client-side script, and add the following declaration in the beginning of the script:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">import $ from &quot;jquery-3.6.0.min.js&quot;;</span></p>
<p class="p_Normal">Теперь в коде скрипта вы сможете обращаться к функциям библиотеки.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Также в клиентских скриптах виджетов поддерживаются функции, которые вызываются автоматически в процессе отображения виджета и при сохранении <a href="create_form.html" class="topiclink">формы</a>. Подробнее об этом читайте в статье <a href="widget_functions.html" class="topiclink">«Системные функции виджетов»</a>.</p>
<h2 class="p_Heading2"><span class="f_Heading2">Получение данных из виджетов </span></h2>
<p class="p_Normal">Способ получения данных из контекста в скриптах зависит от того, где настраивается виджет. </p>
<h3 class="p_Heading3"><span class="f_Heading3">Виджеты интерфейсов </span></h3>
<p class="p_Normal">Если вы настраиваете <a href="interface_settings.html" class="topiclink">интерфейс</a> и создаёте пользовательский виджет, обращаться к его контексту следует с помощью константы <code><b>Context</b></code>, например: </p>
<p class="p_Normal">Now you can call functions from this library in the script<span style="font-family: Inter;">’</span>s code.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Also, client-side scripts allow using functions that are called automatically when displaying a widget or when saving a <a href="create_form.html" class="topiclink">form</a>. Read more about it in <a href="widget_functions.html" class="topiclink">System functions in widgets</a>.</p>
<h2 class="p_Heading2"><span class="f_Heading2">Get data from widgets</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">The way you can get data from a widget<span style="font-family: Inter;">’s</span> context depends on where a widget is located.</p>
<h3 class="p_Heading3"><span class="f_Heading3">Interface widgets</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">If you are setting up an <a href="interface_settings.html" class="topiclink">interface</a> and creating a custom widget, you can access its context using the <code><b>Context</b></code> constant. For example:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">Context.data.string_1&nbsp;=&nbsp;'string&nbsp;value';</span></p>
<p class="p_Normal">К системным виджетам, расположенным на страницах, также необходимо обращаться через <code><b>Context</b></code>. </p>
<h3 class="p_Heading3"><span class="f_Heading3">Виджеты на формах </span></h3>
<p class="p_Normal">Доступ к виджетам, расположенным на форме приложения, осуществляется с помощью константы <code><b>ViewContext</b></code>, так как константа <code><b>Context</b></code> в этом случае отвечает за контекст приложения: </p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample">&nbsp;itemName&nbsp;=&nbsp;Context.data.__name;</span><br />
<span class="f_CodeExample">ViewContext.data.string_1&nbsp;=&nbsp;`Название&nbsp;${&nbsp;itemName&nbsp;}}`;</span></p>
<h2 class="p_Heading2"><a id="server" class="hmanchor"></a><span class="f_Heading2">Вызов серверного метода из клиентского скрипта</span></h2>
<p class="p_Normal">Не все операции могут <span style="font-family: Inter;">выполняться</span> только на стороне клиента или только на сервере. Иногда требуется гибридное решение. В этом случае можно реализовать скрипт на стороне клиента, который будет выполнять часть работы, а затем вызывать скрипт на сервере. <span style="font-family: Inter;">Чаще всего</span> такой подход используется для реализации логики блокировки интерфейса и уведомления пользователя.</p>
<p class="p_Normal">Например, на сервере может быть скрипт, который выполняет обработку данных и может обращаться к внешним сервисам:</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">If you need to access a system widget placed on a page, you also need to use <code><b>Context</b></code>.</p>
<h3 class="p_Heading3"><span class="f_Heading3">Widgets on forms</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">If you need to access a widget placed on an app form, you need to use the <code><b>ViewContext</b></code> constant, as <code><b>Context</b></code> in this case grants access to the context of the app itself:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">const&nbsp;itemName&nbsp;=&nbsp;Context.data.__name;</span><br />
<span class="f_CodeExample">ViewContext.data.string_1&nbsp;=&nbsp;`Name&nbsp;${&nbsp;itemName&nbsp;}}`;</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Read more about this in BRIX TS SDK, in the <a href="https://tssdk.brix365.com/en/pages/quick-start/scripts-in-widgets.html" target="_blank" class="weblink">Scripts in widgets</a> article.</p>
<h2 class="p_Heading2"><a id="server" class="hmanchor"></a><span class="f_Heading2">Call a server method from a client-side script</span></h2>
<p class="p_Normal">Not all operations can be performed strictly on the server side or the client side. Sometimes a hybrid approach is necessary. In this case you can implement a client-side script to do part of the work and then call a server script. This approach is mostly used to implement the logic for locking interfaces and sending user notifications.</p>
<p class="p_Normal">For example, there may be a script on a server that performs data processing and can access external services:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async&nbsp;</span><span class="f_CodeExample" style="font-weight: bold;">function</span><span class="f_CodeExample">&nbsp;DoSomeWork()&nbsp;:&nbsp;Promise&lt;</span><span class="f_CodeExample" style="font-weight: bold;">void</span><span class="f_CodeExample">&gt;&nbsp;{</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;//&nbsp;Далее&nbsp;прописывается&nbsp;логика&nbsp;серверного&nbsp;скрипта.&nbsp;Вы&nbsp;можете&nbsp;использовать&nbsp;внешние&nbsp;вызовы&nbsp;через&nbsp;`await`</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;//&nbsp;A&nbsp;typical&nbsp;logic&nbsp;of&nbsp;a&nbsp;server-side&nbsp;script</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;//&nbsp;External&nbsp;calls&nbsp;can&nbsp;be&nbsp;made&nbsp;via&nbsp;`await`</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;let&nbsp;response&nbsp;=&nbsp;await&nbsp;fetch('https://my-service.mycompany.com/getmydata?token='&nbsp;+&nbsp;Context.data.secureToken);</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;Context.data.mySecureData&nbsp;=&nbsp;await&nbsp;response.text();</span><br />
<span class="f_CodeExample">}</span></p>
<p class="p_Normal">В коде на стороне клиента можно вызвать этот метод, используя свойство <code><b>Server.rpc</b></code>:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async</span><span class="f_CodeExample">&nbsp;function&nbsp;onButtonClick()&nbsp;:&nbsp;Promise&lt;void&gt;&nbsp;{</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;ViewContext.data.blockUI&nbsp;=&nbsp;true;</span><br />
<p class="p_Normal">Then, in the code of a client-side script, you can call this method by using the <code><b>Server.rpc</b></code><span style="font-weight: bold;"> </span>property:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async&nbsp;</span><span class="f_CodeExample" style="font-weight: bold;">function</span><span class="f_CodeExample">&nbsp;onButtonClick()&nbsp;:&nbsp;Promise&lt;</span><span class="f_CodeExample" style="font-weight: bold;">void</span><span class="f_CodeExample">&gt;&nbsp;{</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;ViewContext.data.blockUI&nbsp;=&nbsp;</span><span class="f_CodeExample" style="font-weight: bold;">true</span><span class="f_CodeExample">;</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;await&nbsp;Server.rpc.DoSomeWork();</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;ViewContext.data.blockUI&nbsp;=&nbsp;false;</span><br />
<span class="f_CodeExample">&nbsp;&nbsp;ViewContext.data.blockUI&nbsp;=&nbsp;</span><span class="f_CodeExample" style="font-weight: bold;">false</span><span class="f_CodeExample">;</span><br />
<span class="f_CodeExample">}</span></p>
<p class="p_Normal">Обратите внимание, между сервером и клиентом данные передаются только через <code><b>Context</b></code> или <code><b>ViewContext</b></code>. Метод на стороне сервера должен быть без параметров и иметь возвращаемый тип <code><b>Promise</b></code>. Только тогда он появится в автодополнении в клиентском скрипте.</p>
<p class="p_Normal">Вызывать серверные методы можно также с помощью вложенных виджетов, например, <a href="button_widget.html" class="topiclink">Кнопка</a> или <a href="code_widget.html" class="topiclink">Код</a>. Подробнее об этом читайте в <a href="https://tssdk.elma365.com/ru/latest/pages/quick-start/scripts-in-widgets.html#3" target="_blank" class="weblink">справке ELMA365 TS SDK</a>.</p>
<h2 class="p_Heading2"><a id="app-events" class="hmanchor"></a><span class="f_Heading2">Отслеживание событий в приложениях через клиентский скрипт</span></h2>
<p style="margin: 0 0 7px 0;"><span style="font-family: Inter;">Виджет на странице может отображать данные по элементам приложения в реальном времени. Например, вы можете настроить отчёт, в котором без обновления страницы отображаются актуальные статусы элементов и новые записи в приложении. </span></p>
<p style="margin: 0 0 7px 0;"><span style="font-family: Inter;">Для этого в виджете отчёта подпишитесь на события создания, удаления и изменения элементов и задайте для них функции‑обработчики. Это можно сделать с помощью клиентского скрипта.</span></p>
<h3 class="p_Heading3"><span class="f_Heading3">Подписаться на событие</span></h3>
<p style="margin: 0 0 7px 0;"><span style="font-family: Inter;">Для создания подписки на событие в приложении откройте вкладку </span><span style="font-family: Inter; font-weight: bold;">Скрипты</span><span style="font-family: Inter;">, перейдите в раздел клиентских скриптов и напишите скрипт:</span></p>
<p class="p_Normal">Please note that data between the server and the client is passed only via <code><b>Context</b></code> or <code><b>ViewContext</b></code>. The method on the server side must have no parameters and has to return <code><b>Promise</b></code>. Only then it will appear in the auto-complete list for the client-side script.</p>
<p class="p_Normal">You can also call server methods using nested widgets like <a href="button_widget.html" class="topiclink">Button</a> or <a href="code_widget.html" class="topiclink">Code</a>. Read more about it in the <a href="https://tssdk.brix365.com/en/pages/quick-start/scripts-in-widgets.html#3" target="_blank" class="weblink">Scripts in widgets</a> article in BRIX TS SDK.</p>
<h2 class="p_Heading2"><a id="track-app-events" class="hmanchor"></a><span class="f_Heading2">Track app events through a client-side script</span></h2>
<p class="p_Normal">A widget on a page can display real-time data on app items. For example, you can set up a report that displays the current status of items and new entries in the app without refreshing the page.</p>
<p class="p_Normal">To do this, subscribe to the events of item creation, deletion, and change in the report widget and set handler functions for them. This can be done using a client-side script.</p>
<h3 class="p_Heading3"><span class="f_Heading3">Subscribe to an event</span></h3>
<p class="p_Normal">To create an event subscription in the app, open the Scripts tab, go to the client-side scripts section and write a script:</p>
<p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">await System.events.subscribe()</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Подписка на событие создания нового элемента в приложении</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;.onAppItemCreate(Context.fields.order.app, async (events) =&gt; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;const event = events[0];</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;const order = await event.data.fetch();</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;// Обновление данных отчёта</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;updateReportWithNew(order);</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;},</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;{</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;debounce: 0</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;})</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Подписка на событие изменения определённого элемента, в том числе смену его статуса</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;.onAppItemUpdate(item, function(e) =&gt; {}, { buffered: 2 })</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Подписка на событие удаления определённого элемента</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;.onAppItemDelete(item, function(e) =&gt; {}, { debounce: 0 })</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;.all();</span></p>
<p style="page-break-after: avoid; margin: 0 0 7px 0;"><span style="font-family: Inter;">Основные параметры:</span></p>
<span class="f_CodeExample"> &nbsp; </span><br />
<span class="f_CodeExample"> &nbsp; </span><span class="f_CodeExample" style="font-style: italic;">// Subscribe to the event of creating a new item in the app</span><br />
<span class="f_CodeExample"> &nbsp; .onAppItemCreate(Context.fields.order.app, async (events) =&gt; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; </span><span class="f_CodeExample" style="font-weight: bold;">const event </span><span class="f_CodeExample">= events[0];</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; </span><span class="f_CodeExample" style="font-weight: bold;">const </span><span class="f_CodeExample">order = await </span><span class="f_CodeExample" style="font-weight: bold;">event</span><span class="f_CodeExample">.data.fetch();</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; </span><span class="f_CodeExample" style="font-style: italic;">// Report data update</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; updateReportWithNew(order);</span><br />
<span class="f_CodeExample"> &nbsp; },</span><br />
<span class="f_CodeExample"> &nbsp; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; debounce: 0</span><br />
<span class="f_CodeExample"> &nbsp; })</span><br />
<span class="f_CodeExample"> &nbsp; </span><br />
<span class="f_CodeExample"> &nbsp; </span><span class="f_CodeExample" style="font-style: italic;">// Subscribe to the event of change of a certain item, including the change of its status</span><br />
<span class="f_CodeExample"> &nbsp; .onAppItemUpdate(item, function(e) =&gt; {}, { buffered: 2 })</span><br />
<span class="f_CodeExample"> &nbsp; </span><br />
<span class="f_CodeExample"> &nbsp; </span><span class="f_CodeExample" style="font-style: italic;">// Subscription to the event of deletion of a certain item</span><br />
<span class="f_CodeExample"> &nbsp; .onAppItemDelete(item, function(e) =&gt; {}, { debounce: 0 })</span><br />
<span class="f_CodeExample"> &nbsp; .all();</span></p>
<p class="p_Normal">Basic parameters:</p>
<ul style="list-style-type:disc">
<li style="margin-top: 0; margin-right: 0; margin-bottom: 7px;"><span style="font-family: Inter;">приложение или элемент, по которым отслеживаются события;</span></li><li style="margin-top: 0; margin-right: 0; margin-bottom: 7px;"><span style="font-family: Inter;">обработчик события — пользовательская функция, которая запускается при наступлении события.</span></li></ul>
<p style="margin: 16px 0 8px 0;"><span style="font-family: Inter;">Для оптимизации производительности можно также использовать необязательные параметры — опции обработчика:</span></p>
<li class="p_Normal">The app or item for which events are tracked.</li><li class="p_Normal">Event handler is a custom function that is run when an event occurs.</li></ul>
<p class="p_Normal">The handler options optional parameters also be used to optimize performance:</p>
<ul style="list-style-type:disc">
<li style="margin-top: 0; margin-right: 0; margin-bottom: 7px;"><code><b>buffered</b></code><span style="font-family: Inter;"> — укажите, сколько событий будет накапливаться, прежде чем они будут обрабатываться. По умолчанию 1;</span></li><li style="margin-top: 0; margin-right: 0; margin-bottom: 7px;"><code><b>debounce</b></code><span style="font-family: Inter;"> — задайте максимальную частоту вызова обработчика в миллисекундах. Обратите внимание, если за установленное время получено больше событий, чем указано в </span><code><b>buffered</b></code><span style="font-family: Inter;">, обрабатываются последние из них, а более ранние игнорируются. Для событий создания и удаления рекомендуется устанавливать значение 0, чтобы обрабатывались все элементы. Значение по умолчанию — 50 мс.</span></li></ul>
<h3 class="p_Heading3"><span class="f_Heading3">Отключить обработчик</span></h3>
<p style="margin: 0 0 7px 0;"><span style="font-family: Inter;">Подписки на события активны, пока открыта страница с виджетом, для которого они настроены. При переходе на другую страницу они автоматически отключаются.</span></p>
<p style="margin: 0 0 7px 0;"><span style="font-family: Inter;">Вы также можете отключить обработчик события, когда использовать его больше не нужно. Для этого используйте в клиентском скрипте следующие методы:</span></p>
<p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">// Отключение обработчика `onDeleteHandler`, который использовался для события удаления элемента</span><br />
<span class="f_CodeExample">await System.events.unsubscribe().onAppItemDelete(item, onDeleteHandler).all();</span><br />
<li class="p_Normal"><code><b>buffered</b></code>. Specify how many events will be accumulated before they are processed. The default is 1.</li><li class="p_Normal"><code><b>debounce</b></code>. Set the maximum frequency of handler calls in milliseconds. Please note that if more events are received during the set time than specified in buffered, the last of them are processed and the earlier ones are ignored. For create and delete events, it is recommended to set the value to 0 so that all items are processed. The default value is 50 ms.</li></ul>
<h3 class="p_Heading3"><span class="f_Heading3">Disable handler</span></h3>
<p class="p_Normal">Event subscriptions are active as long as the page with the widget for which they are configured is open. When you switch to another page, they are automatically disabled.</p>
<p class="p_Normal">You can also disable an event handler when you no longer need to use it. To do this, use the following methods in the client script:</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample" style="font-style: italic;">//&nbsp;Disable&nbsp;the&nbsp;`onDeleteHandler`&nbsp;handler&nbsp;that&nbsp;was&nbsp;used&nbsp;for&nbsp;the&nbsp;event&nbsp;of&nbsp;item&nbsp;deletion</span><br />
<span class="f_CodeExample">await&nbsp;System.events.unsubscribe().onAppItemDelete(item,&nbsp;onDeleteHandler).all();</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample">...</span><br />
<span class="f_CodeExample">// Отключение всех обработчиков для события изменения элемента</span><br />
<span class="f_CodeExample">await System.events.unsubscribe().onAppItemUpdate(item).all();</span><br />
<span class="f_CodeExample" style="font-style: italic;">//&nbsp;Disable&nbsp;all&nbsp;handlers&nbsp;for&nbsp;the&nbsp;event&nbsp;of&nbsp;item&nbsp;change&nbsp;</span><br />
<span class="f_CodeExample">await&nbsp;System.events.unsubscribe().onAppItemUpdate(item).all();</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample">...</span><br />
<span class="f_CodeExample">// Отмена всех подписок на события в рамках виджета</span><br />
<span class="f_CodeExample">await System.events.unsubscribe().all();</span></p>
<span class="f_CodeExample" style="font-style: italic;">//&nbsp;Cancel&nbsp;all&nbsp;subscriptions&nbsp;to&nbsp;events&nbsp;within&nbsp;the&nbsp;widget</span><br />
<span class="f_CodeExample">await&nbsp;System.events.unsubscribe().all();</span></p>
<p class="p_Normal">&nbsp;</p>
<div class="bottom-nav">
@ -216,7 +217,7 @@
</div>
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
<div class="feedback-wrap"><div class="feedback" id="feedback"><span><b>Была ли статья полезной?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx">Спасибо за ваш отзыв!</div><div id="feedback-success-popup"><div class="wrap"><button type="button" class="feedback-popup-close">×</button><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_212_2187)"><path d="M22 0.6875C10.2294 0.6875 0.6875 10.2294 0.6875 22C0.6875 33.7706 10.2294 43.3125 22 43.3125C33.7706 43.3125 43.3125 33.7706 43.3125 22C43.3125 10.2294 33.7706 0.6875 22 0.6875ZM22 40.5625C11.8023 40.5625 3.4375 32.3078 3.4375 22C3.4375 11.8024 11.6922 3.4375 22 3.4375C32.1977 3.4375 40.5625 11.6922 40.5625 22C40.5625 32.1976 32.3078 40.5625 22 40.5625ZM34.1713 16.933L18.6613 32.3186C18.257 32.7197 17.604 32.7171 17.203 32.3128L9.82283 24.873C9.42176 24.4686 9.42434 23.8157 9.82867 23.4146L10.5609 22.6884C10.9652 22.2873 11.6181 22.2899 12.0192 22.6942L17.9468 28.6697L31.9926 14.7366C32.3969 14.3356 33.0498 14.3382 33.4509 14.7425L34.1772 15.4747C34.5783 15.879 34.5757 16.532 34.1713 16.933Z" fill="#27AE60"></path></g><defs><clipPath id="clip0_212_2187"><rect width="44" height="44" fill="white"></rect></clipPath></defs></svg><p>Ваш отзыв успешно отправлен!</p><span>Спасибо за обратную связь.</span></div></div><div class="feedback__popup" id="feedback__popup_why"><button type="button" class="feedback-popup-close">×</button><div class="feedback__popup-header">Уточните, почему:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Рекомендации не помогли</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Текст трудно понять</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Нет ответа на мой вопрос</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Содержание статьи не соответствует заголовку</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Другая причина</label></div><div class="feedback__popup" id="feedback__popup-other"><button type="button" class="feedback-popup-close">×</button> <div class="feedback__popup-header">Расскажите, что вам не понравилось в статье:</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Отправить"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg"/><span class="feedback-form__btn-group_yes-btn">Да</span></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg"/><span class="feedback-form__btn-group_no-btn">Нет</span></label></div><select name="category"><option disabled>Выберите вариант</option><option value="bad_recommendation" selected>Рекомендации не помогли</option><option value="difficult_text">Текст трудно понять</option><option value="no_answer">Нет ответа на мой вопрос</option><option value="bad_header">Содержание статьи не соответствует заголовку</option><option value="other_reason">Другая причина</option></select><input type="submit"></form></div></div>
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
</section>
</div>
@ -224,7 +225,7 @@
<input type="checkbox" />
<div class="article__arrow"></div>
<div class="table-of-contents elma365-right" id="toc2Content">
<h3 class="h3-toc">В этой статье</h3>
<h3 class="h3-toc">In this topic</h3>
<nav id="toc2"></nav>
</div>
</aside>
@ -235,63 +236,30 @@
<div class="footer-container">
<div class="footer-mobile">
<ul class="footer-mobile__list"><li><a href="https://api.elma365.com/ru/" target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/" target="_blank">TS SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/elma365" target="_blank">Академия</a></li></ul><ul class="footer-mobile__list"><li><a href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li></ul>
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
</div>
<div class="container">
<div class="footer-wrap">
<div><span class="mobile-question-popup">Отправить фидбэк</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Задать вопрос</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Отправить"></div></form><div class="hidden fade-in question-success-xs">Ваш фидбэк отправлен.</div></div>
<div class="footer-flex-b">
<div class="footer-top">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</div>
<div class="footer-line">
<div class="footer-line-copy">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
</div>
<ul class="footer-list">
<li class="footer-item"><a href="https://elma365.com/ru/" target="_blank" class="footer-link" style="color: #0D4A75;"><img src="browse.svg" alt="browse icon" class="footer-img">elma365.com</a></li><li class="footer-item"><a href="https://www.youtube.com/user/ELMABPM" target="_blank" class="footer-link"><img src="yt.svg" alt="youtube icon" class="footer-img"></a></li><li class="footer-item"><a href="https://vk.com/elma_bpm" target="_blank" class="footer-link"><img src="vk.svg" alt="vk icon" class="footer-img"></a></li><li class="footer-item"><a href="https://t.me/elmaday" target="_blank" class="footer-link"><img src="tg.svg" alt="telegram icon" class="footer-img"></a></li><li class="footer-item"><a href="https://dzen.ru/elma" target="_blank" class="footer-link"><img src="dzen.svg" alt="dzen icon" class="footer-img"></a></li>
<li class="footer-item">
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</li>
</ul>
</div>
</div>
<div class="footer-wrap">
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
<div class="footer-flex-b">
<span class="footer-copy">&copy; 2025 BRIX</span>
<ul class="footer-list">
<li class="footer-item">
<a href="#" class="arrow-top" style="display: block;"></a>
</li>
</ul>
</div>
</div>
<a href="#" class="arrow-top"></a>
</div>
</footer>
<!-- <script type="text/javascript" src="jquery1.min.js"></script>-->
<iframe name="hmnavigation" style="display:none!important"></iframe>
<!--<script src="./jquery-ui.js"></script> -->
<script src="./jquery-ui.min.js"></script>
<script src="./jquery-ui.js"></script>
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
<script src="./jquery.tocify.min.js"></script>
<script src="./TypoReporter.min.js"></script>