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

first commit

Browse Source
This commit is contained in:
koziavin
2025-05-26 16:15:30 +04:00
commit a6b05d6789
6059 changed files with 495628 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
platform/child-widget-event.html Normal file
View File

@ -0,0 +1,353 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Передать событие между двумя дочерними виджетами</title>
<meta name="generator" content="Help+Manual" />
<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;типа&nbsp;Событие в одном виджете можно создать пользовательское событие и передать его в другой виджет. Подробнее о том, как это работает и как настроить передачу..." />
<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" />
<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" />
<link rel="stylesheet" href="./jquery-ui.min.css" />
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="./search-yandex.css" />
<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>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){highlight();});
</script>
</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>
<!-- <div class="hero__search-form" id="search-panel">
<form class="search-form" onsubmit="ym(83179930,'reachGoal','poisk')">
<label class="search-form__label">
<span id="reset-search" class="search__icon"></span>
<input class="search-form__input" type="text">
</label>
<input class="search-form__submit" type="submit" value="Submit">
</form>
</div> -->
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
<div class="hero__search">
<a href="#" id="search-icon" class="hero__search-icon">
<img src="search-icon-white.svg" alt="search string">
</a>
<a href="#" id="side-menu-icon" class="hero__side-icon">
<img src="side_menu.svg" alt="side menu">
</a>
</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>
</div>
</div>
</header>
<main class="main container">
<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>
<span class="sidebar__close elma-365-close" id="close"></span>
</div>
<div class="sidebar__wrapper" id="side-menu">
</div>
</aside>
<article class="article" id="article">
<div class="article-inner">
<div class="content">
<header class="article__header">
<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> &gt; <a href="client_server_scripts.html">Скрипты в виджетах</a> / Передать событие между двумя дочерними виджетами</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Передать событие между двумя дочерними виджетами</span></h1>
</div>
</header>
<section class="article__content">
<div class="scroll-top-inner">
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p class="p_Normal">С помощью поля типа <span style="font-weight: bold;">Событие</span> в одном виджете можно создать пользовательское событие и передать его в другой виджет. Подробнее о том, как это работает и как настроить передачу данных от дочернего виджета в родительский, читайте в статье <a href="event-in-widgets.html" class="topiclink">«Передать событие из дочернего в родительский виджет»</a>. </p>
<p class="p_Normal">В данной статье рассмотрим комплексный пример с использованием различных опций и дополнительных переменных, когда событие передаётся между двумя дочерними виджетами, размещёнными в одном родительском.</p>
<p class="p_Normal">Предположим, что в системе создана страница <span style="font-weight: bold;">Отчёт по транзакциям</span>. На ней размещены два дочерних виджета: <span style="font-weight: bold;">Настройки фильтрации</span> и <span style="font-weight: bold;">Таблица с поступлениями</span>. Когда пользователь вводит значения в поля фильтров, в виджете с таблицей выполняется поиск по введённым параметрам и отображаются его результаты. Это позволяет просматривать искомые элементы сразу после ввода значения в поле фильтра.</p>
<p class="p_Normal"><img alt="child-widget-event-1" width="822" height="518" style="margin:0;width:822px;height:518px;border:none" src="child-widget-event-1.png"/></p>
<p class="p_Normal">Рассмотрим подробнее, как выполнить настройку такой передачи данных. </p>
<h2 class="p_Heading2"><span class="f_Heading2">Шаг 1. Создать и настроить пользовательский виджет «Настройки фильтрации»</span></h2>
<p class="p_Normal">Начните настройку с создания виджета, который содержит поля с параметрами фильтрации. В нём нужно:</p>
<ul style="list-style-type:disc">
<li class="p_Normal">добавить свойства для поиска;</li><li class="p_Normal">создать переменную типа <span style="font-weight: bold;">Событие</span>, к которой в родительском виджете (странице <span style="font-weight: bold;">Отчёт по транзакциям</span>) привязывается скрипт для выполнения поиска;</li><li class="p_Normal">в настройках созданных свойств для поиска указать скрипт в опции <span style="font-weight: bold;">Событие при изменении значения</span>. Таким образом каждый раз, когда вводится значение в поле, в родительский виджет будет передаваться событие вместе с указанными данными фильтрации.</li></ul>
<p class="p_Normal">Выполните эти действия:</p>
<ol style="list-style-type:upper-roman">
<li value="1" class="p_Normal"><a href="interface_settings.html#create-widget" class="topiclink">Создайте виджет</a> <span style="font-weight: bold;">Настройки фильтрации</span> со следующими переменными:</li></ol>
<ul style="list-style-type:disc">
<li class="p_Normal"><span style="font-weight: bold;">Контрагент</span> — переменная типа <a href="360009707032.html#app" class="topiclink">Приложение</a>. В этом поле пользователь укажет название нужного контрагента для поиска данных по его названию;</li><li class="p_Normal"><span style="font-weight: bold;">Начало периода</span> и <span style="font-weight: bold;">Конец периода</span> — переменные типа <a href="360009707032.html#date-time" class="topiclink">Дата/время</a>. Здесь можно указать период поступлений;</li><li class="p_Normal"><span style="font-weight: bold;">Изменение фильтров</span> — служебное поле типа <a href="360009707032.html#event" class="topiclink">Событие</a>. Оно применяется в скрипте, который зафиксирует событие использования фильтра, произошедшее в виджете.<br />
<img alt="child-widget-event-2" width="864" height="228" style="margin:0;width:864px;height:228px;border:none" src="child-widget-event-2.jpg"/></li></ul>
<ol style="list-style-type:upper-roman" start="2">
<li value="2" class="p_Normal">На вкладке <span style="font-weight: bold;">Шаблон</span> вынесите виджет <a href="panel_with_heading.html" class="topiclink">Панель с заголовком</a> и назовите его <span style="font-weight: bold;">Настройки фильтрации</span>. В эту панель добавьте виджет <a href="columns.html" class="topiclink">Колонки</a>, а в них — свойства <span style="font-weight: bold;">Контрагент</span>, <span style="font-weight: bold;">Начало периода</span> и <span style="font-weight: bold;">Конец</span> <span style="font-weight: bold;">периода</span>.<br />
<img alt="child-widget-event-3" width="779" height="310" style="margin:0;width:779px;height:310px;border:none" src="child-widget-event-3.png"/></li></ol>
<ol style="list-style-type:upper-roman" start="3">
<li value="3" class="p_Normal">На поле для моделирования выберите свойство <span style="font-weight: bold;">Контрагент</span> и нажмите значок шестерёнки. В открывшемся окне перейдите на вкладку <span style="font-weight: bold;">События</span>. Справа от опции <span style="font-weight: bold;">Событие при изменении значения</span> нажмите кнопку <span style="font-weight: bold;">Создать</span>, введите название функции <span style="font-weight: bold;">setFilters</span>, выберите <span style="font-weight: bold;">Сохранить</span>, а затем — <span style="font-weight: bold;">Открыть</span>.<br />
<img alt="child-widget-event-4" width="710" height="141" style="margin:0;width:710px;height:141px;border:none" src="child-widget-event-4.png"/></li></ol>
<p class="p_Normal" style="margin: 0 0 0 20px;">Чтобы отправить событие вместе с данными фильтрации, когда пользователь введёт значение в это поле, на открывшейся вкладке <span style="font-weight: bold;">Скрипты</span> укажите следующую функцию:</p>
<p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">async function setFilters(): Promise&lt;void&gt; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;const filterData = {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;agent: Context.data.agent,</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;from_date: Context.data.from_date,</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;to_date: Context.data.to_date,</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;};</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;Context.data.filter_changed?.emit(filterData);</span><br />
<span class="f_CodeExample">}</span></p>
<ol style="list-style-type:upper-roman" start="4">
<li value="4" class="p_Normal">Укажите эту же функцию для свойств <span style="font-weight: bold;">Начало периода</span> и <span style="font-weight: bold;">Конец периода</span>. Для этого в их настройках на вкладке <span style="font-weight: bold;">События</span> справа от опции <span style="font-weight: bold;">Событие при изменении значения</span> нажмите пустое поле и выберите <span style="font-weight: bold;">setFilters</span>.</li><li value="5" class="p_Normal">Сохраните и опубликуйте виджет <span style="font-weight: bold;">Настройки фильтрации</span>.</li></ol>
<p class="p_Normal">Теперь его можно использовать в других виджетах как дочерний для фильтрации элементов приложений по заданным параметрам.</p>
<h2 class="p_Heading2"><span class="f_Heading2">Шаг 2. Создать и настроить пользовательский виджет «Таблица с поступлениями»</span></h2>
<p class="p_Normal">Создайте второй виджет для отображения результатов фильтрации в виде таблицы. В настройках виджета задайте настройки, чтобы:</p>
<ul style="list-style-type:disc">
<li class="p_Normal">запускать поиск соответствующих элементов, когда в фильтрах изменяется значение;</li><li class="p_Normal">отображать результат поиска в таблице.</li></ul>
<ol style="list-style-type:upper-roman">
<li value="1" class="p_Normal"><a href="interface_settings.html#create-widget" class="topiclink">Создайте виджет</a> <span style="font-weight: bold;">Таблица с поступлениями</span> со следующими переменными:<br />
<img alt="child-widget-event-5" width="811" height="269" style="margin:0;width:811px;height:269px;border:none" src="child-widget-event-5.png"/></li></ol>
<ul style="list-style-type:disc">
<li class="p_Normal"><span style="font-weight: bold;">Таблица</span> — переменная типа <a href="360010201779.html" class="topiclink">Таблица</a>. Настройте её колонки, указав необходимые свойства приложения. Здесь пользователь увидит результаты фильтрации по введённым значениям. Подробнее о том, как настроить колонки таблицы читайте в статье <a href="table-visibility.html" class="topiclink">«Настройка таблицы»</a>;</li><li class="p_Normal"><span style="font-weight: bold;">Поступление</span> — переменная типа <a href="360009707032.html#app" class="topiclink">Приложение</a> с опцией <span style="font-weight: bold;">Один</span>. Выберите приложение <span style="font-weight: bold;">Реестр поступлений</span>. Это служебная переменная, которая нужна для выполнения ниже указанного скрипта. С её помощью происходит поиск элементов приложения по заданным фильтрам;</li><li class="p_Normal"><span style="font-weight: bold;">Данные фильтрации</span> — служебная переменная типа <a href="360009707032.html#any" class="topiclink">Произвольный тип</a>. Она используется, чтобы передать данные из первого виджета <span style="font-weight: bold;">Настройки фильтрации</span> во второй виджет <span style="font-weight: bold;">Таблица с поступлениями</span>.<br />
<img alt="child-widget-event-6" width="871" height="522" style="margin:0;width:871px;height:522px;border:none" src="child-widget-event-6.png"/></li></ul>
<p class="p_Normal" style="margin: 0 0 0 13px;">При создании переменной <span style="font-weight: bold;">Данные фильтрации</span> в опции <span style="font-weight: bold;">Событие при изменении значения</span> укажите скрипт, который покажет отфильтрованные данные в таблице.</p>
<p class="p_Normal" style="margin: 0 0 0 12px;"><a class="dropdown-toggle" style="font-style: normal; font-weight: normal; color: #000000; background-color: transparent; text-decoration: none;" href="javascript:HMToggle('toggle','TOGGLE0186A1')">Скрипт для заполнения таблицы отфильтрованными данными</a></p>
<div id="TOGGLE0186A1" class="dropdown-toggle-body" style="text-align: left; text-indent: 0; padding: 0 0 0 0; margin: 0 0 0 0;"><table style="border:none; border-spacing:0;">
<tr>
<td style="vertical-align:top; padding:0; border:none"><p class="p_Normal" style="page-break-inside: avoid;"><span class="f_CodeExample">interface FilterData {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;agent: TApplication&lt;Application$_clients$_companies$Data, any, Application$_clients$_companies$Processes&gt; | undefined;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;from_date: TDate | undefined;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;to_date: TDate | undefined;</span><br />
<span class="f_CodeExample">}</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample">async function setFilter(): Promise&lt;void&gt; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;const filterData: FilterData = Context.data.filterData;</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Получение транзакций поступлений по заданным фильтрам</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;const transactions = await Context.fields.transactions.app.search()</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;.where((f, g) =&gt; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;const conditions: Filter[] = [];</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;if (filterData.agent) {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;conditions.push(f._contractor.link(filterData.agent))</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;}</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;if (filterData.from_date) {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;conditions.push(f._plannedPaymentDate.gte(filterData.from_date))</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;}</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;if (filterData.to_date) {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;conditions.push(f._plannedPaymentDate.lte(filterData.to_date))</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;}</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;return g.and(...conditions)</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;})</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;.all()</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;const table = Context.data.table!;</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Очистка таблицы</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;for (let i = table.length - 1; i &gt;= 0; i--) {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;table.delete(i);</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;}</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Заполнение таблицы</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;for (const item of transactions) {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;const row = table.insert();</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;row.contractor = item.data._contractor!;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;row.plan_data = item.data._plannedPaymentDate!;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp; &nbsp; &nbsp;row.name = item.data.__name;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;}</span><br />
<span class="f_CodeExample">&nbsp;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;// Обновляем отображение таблицы</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;Context.data.table = Context.data.table;</span><br />
<span class="f_CodeExample">}</span><br />
<span class="f_CodeExample">&nbsp;</span></p>
</td>
</tr>
</table>
</div>
<ol style="list-style-type:upper-roman" start="2">
<li value="2" class="p_Normal">На вкладке <span style="font-weight: bold;">Шаблон</span> вынесите виджет <a href="panel_with_heading.html" class="topiclink">Панель с заголовком</a> и назовите его <span style="font-weight: bold;">Поступления</span>. В этот виджет добавьте созданное свойство <span style="font-weight: bold;">Таблица</span>.<br />
<img alt="child-widget-event-7" width="887" height="162" style="margin:0;width:887px;height:162px;border:none" src="child-widget-event-7.png"/></li></ol>
<ol style="list-style-type:upper-roman" start="3">
<li value="3" class="p_Normal">Сохраните и опубликуйте виджет <span style="font-weight: bold;">Таблица с поступлениями</span>.</li></ol>
<p class="p_Normal">Теперь его можно использовать в других виджетах как дочерний, чтобы показать результаты фильтрации транзакций в виде таблицы.</p>
<h2 class="p_Heading2"><span class="f_Heading2">Шаг 3. Добавить виджеты на страницу и настроить передачу данных между ними</span></h2>
<p class="p_Normal">На <a href="360009924451.html" class="topiclink">созданную страницу</a> <span style="font-weight: bold;">Отчёт по транзакциям</span> добавьте виджеты <span style="font-weight: bold;">Настройки фильтрации</span> и <span style="font-weight: bold;">Таблица с поступлениями</span>. Страница станет для них родительским виджетом. На странице записываются данные фильтрации от первого виджета и передаются во второй.</p>
<ol style="list-style-type:upper-roman">
<li value="1" class="p_Normal">Откройте настройки страницы <span style="font-weight: bold;">Отчёт по транзакциям</span> и перейдите в <a href="360027211631.html#setting-in-designer" class="topiclink">дизайнер интерфейсов</a>, нажав опцию <span style="font-weight: bold;">Конструктор</span>.</li><li value="2" class="p_Normal">На вкладке <span style="font-weight: bold;">Контекст</span> создайте переменную <span style="font-weight: bold;">Данные фильтрации</span> типа <span style="font-weight: bold;">Произвольный тип</span>. Она нужна, чтобы:</li></ol>
<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> для показа найденных элементов в таблице.</li></ul>
<ol style="list-style-type:upper-roman" start="3">
<li value="3" class="p_Normal">Перейдите на вкладку <span style="font-weight: bold;">Шаблон</span> и вынесите созданные ранее:</li></ol>
<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>.<br />
<img alt="child-widget-event-8" width="903" height="356" style="margin:0;width:903px;height:356px;border:none" src="child-widget-event-8.png"/></li></ul>
<ol style="list-style-type:upper-roman" start="4">
<li value="4" class="p_Normal">Откройте настройки виджета <span style="font-weight: bold;">Настройки фильтрации</span> и перейдите на вкладку <span style="font-weight: bold;">События</span>.<br />
<img alt="child-widget-event-9" width="607" height="235" style="margin:0;width:607px;height:235px;border:none" src="child-widget-event-9.png"/><br />
На этой вкладке отобразится переменная типа <span style="font-weight: bold;">Событие</span>, созданная в конструкторе виджета. Привяжите к ней скрипт. С его помощью данные фильтрации запишутся в контекст страницы, когда виджет передаст событие <span style="font-weight: bold;">Изменение фильтров</span>.<br />
<img alt="child-widget-event-10" width="817" height="336" style="margin:0;width:817px;height:336px;border:none" src="child-widget-event-10.png"/></li></ol>
<p class="p_Normal" style="margin: 0 0 0 20px;">Для этого справа от события нажмите <span style="font-weight: bold;">Создать</span>, введите название функции <span style="font-weight: bold;">onFilterChanged</span> и выберите <span style="font-weight: bold;">Сохранить</span>, а затем — <span style="font-weight: bold;">Открыть</span>. В результате на вкладке <span style="font-weight: bold;">Скрипты</span> создастся асинхронная функция. Внесите в неё следующий скрипт:</p>
<p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">// Устанавливаем запуск скрипта, если значение фильтра изменилось</span><br />
<span class="f_CodeExample">async function onFilterChanged(filterData: FilterData): Promise&lt;void&gt; {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;Context.data.filterData = filterData;</span><br />
<span class="f_CodeExample">}</span><br />
<span class="f_CodeExample">// Указываем, какие значения может принять функция</span><br />
<span class="f_CodeExample">interface FilterData {</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;agent: TApplication&lt;Application$_clients$_companies$Data, any, Application$_clients$_companies$Processes&gt; | undefined;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;from_date: TDate | undefined;</span><br />
<span class="f_CodeExample"> &nbsp; &nbsp;to_date: TDate | undefined;</span><br />
<span class="f_CodeExample">}</span></p>
<ol style="list-style-type:upper-roman" start="5">
<li value="5" class="p_Normal">Вернитесь на вкладку <span style="font-weight: bold;">Шаблон</span> и откройте настройки виджета <span style="font-weight: bold;">Таблица с поступлениями</span>. На вкладке <span style="font-weight: bold;">Основные</span> вы увидите его переменные. Чтобы таблица отобразила элементы по данным фильтрации, нужно передать эти данные в контекст виджета таблицы. Для этого установите связь с переменной произвольного типа <span style="font-weight: bold;">Данные фильтрации</span>, которую создали ранее в контексте страницы.<br />
<img alt="child-widget-event-11" width="817" height="376" style="margin:0;width:817px;height:376px;border:none" src="child-widget-event-11.png"/></li></ol>
<p class="p_Normal" style="margin: 0 0 0 20px;">Сохраните настройки виджета <span style="font-weight: bold;">Таблица с поступлениями</span>.</p>
<ol style="list-style-type:upper-roman" start="5">
<li value="6" class="p_Normal">Сохраните и опубликуйте страницу <span style="font-weight: bold;">Отчёт по транзакциям</span>.</li></ol>
<p class="p_Normal">Теперь при вводе значения в одно из полей фильтров в таблице отобразятся данные элементов приложения <span style="font-weight: bold;">Реестр поступлений</span>.</p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="event-in-widgets.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">event-in-widgets.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="markdown.html">
<span class="bottom-nav__link">markdown.html</span> <span
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
</a>
</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>
</section>
</div>
<aside class="article__sidebar" style="display:none">
<input type="checkbox" />
<div class="article__arrow"></div>
<div class="table-of-contents elma365-right" id="toc2Content">
<h3 class="h3-toc">В этой статье</h3>
<nav id="toc2"></nav>
</div>
</aside>
</div>
</article>
</main>
<footer class="footer">
<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>
</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>
</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="//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>
<script src="./google-search.js"></script>
<script src="./main.js"></script>
<script type="text/javascript">
HMInitToggle('TOGGLE0186A1','hm.type','dropdown','hm.state','0');
</script>
</body>
</html>