This commit is contained in:
319
platform/child-widget-event.html
Normal file
319
platform/child-widget-event.html
Normal file
@ -0,0 +1,319 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Send an event between two child widgets</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="Using the Event type variable, you can create a custom event in one widget and send it to another widget. For more information on how this works and how to configure the..." />
|
||||
<meta name="picture" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<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" />
|
||||
<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>!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://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(83180416,'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://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>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<main class="main container">
|
||||
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<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>
|
||||
<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 designer > <a href="interface_settings.html">Set up interfaces</a> > <a href="client_server_scripts.html">Scripts in widgets</a> / Send an event between two child widgets</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Send an event between two child widgets</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">Using the <span style="font-weight: bold;">Event</span> type variable, you can create a custom event in one widget and send it to another widget. For more information on how this works and how to configure the transfer of data from a child widget to a parent one, read the <a href="event-in-widgets.html" class="topiclink">Send an event from a child widget to a parent one</a> article.</p>
|
||||
<p class="p_Normal">Let’s take a look at how to use various options and additional variables when sending an event between two child widgets placed in one parent widget.</p>
|
||||
<p class="p_Normal">Suppose, the <span style="font-weight: bold;">Transaction Report</span> page has been created in the system. It contains two child widgets: <span style="font-weight: bold;">Filter settings</span> and <span style="font-weight: bold;">Revenues table</span>. When the user enters values in the filter fields, they see the search results in the widget with the table according to the entered parameters. Thus, you can view the found items immediately after entering a value in the filter field.</p>
|
||||
<p class="p_Normal"><img alt="child-widget-event-1" width="816" height="733" style="margin:0;width:816px;height:733px;border:none" src="child-widget-event-1.png"/></p>
|
||||
<p class="p_Normal">Let's take a closer look at how to configure such data transfer.</p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Step 1: Create and configure the Filter settings custom widget</span></h2>
|
||||
<p class="p_Normal">Start the setup by creating a widget that contains fields with filtering parameters. In its settings, you need to:</p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal">Add properties for searching.</li><li class="p_Normal">Create a variable of the <span style="font-weight: bold;">Event</span> type and bind it with the script for launching item search in the parent widget (the <span style="font-weight: bold;">Transaction Report</span> page).</li><li class="p_Normal">In the settings of the properties created for searching, specify the script in the <span style="font-weight: bold;">On value change handler</span> option. Thus, every time the user enters a value in the field, an event is sent to the parent widget together with the specified filtering data.</li></ul>
|
||||
<p class="p_Normal">Follow these steps.</p>
|
||||
<ol style="list-style-type:upper-roman">
|
||||
<li value="1" class="p_Normal"><a href="interface_settings.html#widgets" class="topiclink">Create</a> the <span style="font-weight: bold;">Filter settings</span> widget with the following variables:</li></ol>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal"><span style="font-weight: bold;">Contractor</span>. This is a variable of the <a href="360009707032.html#app" class="topiclink">App</a> type. In this field, the user specifies the name of the required contractor to search for data by its name.</li><li class="p_Normal"><span style="font-weight: bold;">Begin date</span> and <span style="font-weight: bold;">End date</span>. These are variables of the <a href="360009707032.html#date-time" class="topiclink">Date/time</a> type. Here the user specifies the period of transactions.</li><li class="p_Normal"><span style="font-weight: bold;">Filter change</span>. This is a service variable of the <a href="360009707032.html#event" class="topiclink">Event</a> type. You need it for the script that records the filter usage event that occurred in the widget.</li></ul>
|
||||
<p class="p_Normal" style="margin: 0 0 0 13px;"><img alt="child-widget-event-2" width="977" height="328" style="margin:0;width:977px;height:328px;border:none" src="child-widget-event-2.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="2">
|
||||
<li value="2" class="p_Normal">On the <span style="font-weight: bold;">Template</span> tab, place the <a href="panel_with_heading.html" class="topiclink">Panel with Header</a> widget and name it <span style="font-weight: bold;">Filter settings</span>. In this panel, add the <a href="columns.html" class="topiclink">Columns</a> widget, and in the columns, add the <span style="font-weight: bold;">Contractor</span>, <span style="font-weight: bold;">Begin date</span>, and <span style="font-weight: bold;">End date</span> properties.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 21px;"><img alt="child-widget-event-3" width="1120" height="331" style="margin:0;width:1120px;height:331px;border:none" src="child-widget-event-3.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="3">
|
||||
<li value="3" class="p_Normal">On the modeling canvas, select the <span style="font-weight: bold;">Contractor</span> property and click the gear icon. In the window that opens, go to the <span style="font-weight: bold;">Events</span> tab. To the right of the <span style="font-weight: bold;">On value change handler option</span>, click the <span style="font-weight: bold;">Create</span> button, enter the <span style="font-weight: bold;">setFilters</span> function name, select<span style="font-weight: bold;"> Save</span>,<span style="font-weight: bold;"> </span>and then click<span style="font-weight: bold;"> Open</span>.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 20px;"><img alt="child-widget-event-4" width="1007" height="181" style="margin:0;width:1007px;height:181px;border:none" src="child-widget-event-4.png"/></p>
|
||||
<p class="p_Normal">To send an event together with the filter data when the user enters a value in this field, specify the following function on the <span style="font-weight: bold;">Scripts</span> tab that opens:</p>
|
||||
<p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">async function setFilters(): Promise<void> {</span><br />
|
||||
<span class="f_CodeExample"> const filterData = {</span><br />
|
||||
<span class="f_CodeExample"> agent: Context.data.agent,</span><br />
|
||||
<span class="f_CodeExample"> from_date: Context.data.from_date,</span><br />
|
||||
<span class="f_CodeExample"> to_date: Context.data.to_date,</span><br />
|
||||
<span class="f_CodeExample"> };</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample"> Context.data.filter_changed?.emit(filterData);</span><br />
|
||||
<span class="f_CodeExample">}</span><br />
|
||||
<span class="f_CodeExample"> </span></p>
|
||||
<ol style="list-style-type:upper-roman" start="3">
|
||||
<li value="4" class="p_Normal">Specify the same function for the <span style="font-weight: bold;">Begin date</span> and <span style="font-weight: bold;">End date</span> properties. To do this, in their settings, on the <span style="font-weight: bold;">Events</span> tab, to the right of the <span style="font-weight: bold;">On value change handler</span> option, click the empty field and select <span style="font-weight: bold;">setFilters</span>.</li><li value="5" class="p_Normal">Save and publish the <span style="font-weight: bold;">Filter settings</span> widget.</li></ol>
|
||||
<p class="p_Normal">Now you can use it in other widgets as a child widget to filter app items by specified parameters.</p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Step 2: Create and configure the custom Revenues table widget</span></h2>
|
||||
<p class="p_Normal">Now create the second widget to display the filter results in a table. In the widget settings, configure the settings to:</p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal">Trigger a search for matching items when the value in the filters changes.</li><li class="p_Normal">Display the search result in a table.</li></ul>
|
||||
<ol style="list-style-type:upper-roman">
|
||||
<li value="1" class="p_Normal"><a href="interface_settings.html#widgets" class="topiclink">Create</a> the <span style="font-weight: bold;">Revenues table</span> widget with the following variables:</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 18px;"><img alt="child-widget-event-5" width="999" height="283" style="margin:0;width:999px;height:283px;border:none" src="child-widget-event-5.png"/></p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal"><span style="font-weight: bold;">Table</span>. This is a variable of the <a href="360010201779.html" class="topiclink">Table</a> type. Set up its columns by specifying the required app properties. Here the user sees the results of filtering by the entered values. Read how to set up table columns in the <a href="table-visibility.html" class="topiclink">Table settings</a> article.</li><li class="p_Normal"><span style="font-weight: bold;">Transaction</span>. This is a variable of the <a href="360009707032.html#app" class="topiclink">App</a> type with the <span style="font-weight: bold;">One</span> subtype. Select the <span style="font-weight: bold;">Transactions registry</span> app. This is a service variable. You need it to execute the script specified below. It is used to search for app items by the specified filters.</li><li class="p_Normal"><span style="font-weight: bold;">Data filtering</span>. This is a service variable of the <a href="360009707032.html#arbitrary-type" class="topiclink">Arbitrary type</a>. It is used to transfer data from the first<span style="font-weight: bold;"> Filter settings</span> widget to the second <span style="font-weight: bold;">Revenues table</span> widget.</li></ul>
|
||||
<p class="p_Normal" style="margin: 0 0 0 12px;"><img alt="child-widget-event-6" width="895" height="586" style="margin:0;width:895px;height:586px;border:none" src="child-widget-event-6.png"/></p>
|
||||
<p class="p_Normal" style="margin: 0 0 0 12px;">When creating the <span style="font-weight: bold;">Data filtering</span> variable, in the <span style="font-weight: bold;">On value change handler</span> option, specify a script that will show the filtered data in the table.</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')">Script for filling the table with filtered data</a></p>
|
||||
<div id="TOGGLE0186A1" class="dropdown-toggle-body" style="text-align: left; text-indent: 0; line-height: 1.80; padding: 0 0 0 0; margin: 0 0 0 12px;"><table style="border:none; border-spacing:0;">
|
||||
<tr>
|
||||
<td style="vertical-align:top; padding:0; border:none"><p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">interface FilterData {</span><br />
|
||||
<span class="f_CodeExample"> agent: TApplication<Application$_clients$_companies$Data, any, Application$_clients$_companies$Processes> | undefined;</span><br />
|
||||
<span class="f_CodeExample"> from_date: TDate | undefined;</span><br />
|
||||
<span class="f_CodeExample"> to_date: TDate | undefined;</span><br />
|
||||
<span class="f_CodeExample">}</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample">async function setFilter(): Promise<void> {</span><br />
|
||||
<span class="f_CodeExample"> const filterData: FilterData = Context.data.filterData;</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample"> // Get transactions of the revenues according to set filters</span><br />
|
||||
<span class="f_CodeExample"> const transactions = await Context.fields.transactions.app.search()</span><br />
|
||||
<span class="f_CodeExample"> .where((f, g) => {</span><br />
|
||||
<span class="f_CodeExample"> const conditions: Filter[] = [];</span><br />
|
||||
<span class="f_CodeExample"> if (filterData.agent) {</span><br />
|
||||
<span class="f_CodeExample"> conditions.push(f._contractor.link(filterData.agent))</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> if (filterData.from_date) {</span><br />
|
||||
<span class="f_CodeExample"> conditions.push(f._plannedPaymentDate.gte(filterData.from_date))</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> if (filterData.to_date) {</span><br />
|
||||
<span class="f_CodeExample"> conditions.push(f._plannedPaymentDate.lte(filterData.to_date))</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> return g.and(...conditions)</span><br />
|
||||
<span class="f_CodeExample"> })</span><br />
|
||||
<span class="f_CodeExample"> .all()</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample"> const table = Context.data.table!;</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample"> // Clear the table</span><br />
|
||||
<span class="f_CodeExample"> for (let i = table.length - 1; i >= 0; i--) {</span><br />
|
||||
<span class="f_CodeExample"> table.delete(i);</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample"> // Fill in the table</span><br />
|
||||
<span class="f_CodeExample"> for (const item of transactions) {</span><br />
|
||||
<span class="f_CodeExample"> const row = table.insert();</span><br />
|
||||
<span class="f_CodeExample"> row.contractor = item.data._contractor!;</span><br />
|
||||
<span class="f_CodeExample"> row.plan_data = item.data._plannedPaymentDate!;</span><br />
|
||||
<span class="f_CodeExample"> row.name = item.data.__name;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><br />
|
||||
<span class="f_CodeExample"> // Refresh the table display</span><br />
|
||||
<span class="f_CodeExample"> Context.data.table = Context.data.table;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<p class="p_Normal"> </p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<ol style="list-style-type:upper-roman" start="2">
|
||||
<li value="2" class="p_Normal" style="margin-top: 0; margin-right: 0; margin-bottom: 0;">On the <span style="font-weight: bold;">Template</span> tab, place the <a href="panel_with_heading.html" class="topiclink">Panel with Header</a> widget and name it <span style="font-weight: bold;">Revenues</span>. In this panel, add the <span style="font-weight: bold;">Table</span> property created earlier.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 30px;"><img alt="child-widget-event-7" width="853" height="211" style="margin:0;width:853px;height:211px;border:none" src="child-widget-event-7.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="3">
|
||||
<li value="3" class="p_Normal">Save and publish the <span style="font-weight: bold;">Revenues table</span> widget.</li></ol>
|
||||
<p class="p_Normal">Now you can use it in other widgets as a child widget to show the filtering results for transactions in a table.</p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Step 3: Add widgets to the page and configure data transfer between them</span></h2>
|
||||
<p class="p_Normal">Now, add the <span style="font-weight: bold;">Filter settings</span> and <span style="font-weight: bold;">Revenues table</span> widgets to the <a href="360009924451.html" class="topiclink">created</a> <span style="font-weight: bold;">Transaction Report</span> page. The page will become a parent widget for them. The page records the filtering data from the first widget and transfers it to the second one.</p>
|
||||
<ol style="list-style-type:upper-roman">
|
||||
<li value="1" class="p_Normal">Open the settings of the <span style="font-weight: bold;">Transaction Report</span> page and go to the <a href="interface_designer.html" class="topiclink">interface designer</a>.</li><li value="2" class="p_Normal">On the <span style="font-weight: bold;">Context</span> tab, create the <span style="font-weight: bold;">Filter data</span> variable of the <span style="font-weight: bold;">Arbitrary type</span>. It is needed to:</li></ol>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal">Record the filtering data received together with the event from the <span style="font-weight: bold;">Filter settings</span> widget.</li><li class="p_Normal">Link the page context to the context of the <span style="font-weight: bold;">Revenues table</span> widget to display the found items in the table.</li></ul>
|
||||
<ol style="list-style-type:upper-roman" start="3">
|
||||
<li value="3" class="p_Normal">Go to the <span style="font-weight: bold;">Template</span> tab and place the previously created widgets on the canvas:</li></ol>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal"><span style="font-weight: bold;">Filter settings</span></li><li class="p_Normal"><span style="font-weight: bold;">Revenues table</span></li></ul>
|
||||
<p class="p_Normal" style="margin: 0 0 0 15px;"><img alt="child-widget-event-8" width="954" height="336" style="margin:0;width:954px;height:336px;border:none" src="child-widget-event-8.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="4">
|
||||
<li value="4" class="p_Normal">Open the settings of the <span style="font-weight: bold;">Filter settings</span> widget and go to the <span style="font-weight: bold;">Events</span> tab.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 19px;"><img alt="child-widget-event-9" width="632" height="322" style="margin:0;width:632px;height:322px;border:none" src="child-widget-event-9.png"/></p>
|
||||
<p class="p_Normal" style="margin: 0 0 0 17px;">On this tab, you can see the variable of the <span style="font-weight: bold;">Event</span> type created earlier in the widget builder. Link the script to it. This script helps you record the filtering data in the page context when the widget sends <span style="font-weight: bold;">Filter change</span> event.</p>
|
||||
<p class="p_Normal" style="margin: 0 0 0 19px;"><img alt="child-widget-event-10" width="640" height="227" style="margin:0;width:640px;height:227px;border:none" src="child-widget-event-10.png"/></p>
|
||||
<p class="p_Normal" style="margin: 0 0 0 16px;">To link the script, select <span style="font-weight: bold;">Create</span>, specify the function name:<span style="font-weight: bold;"> onFilterChanged</span>, click <span style="font-weight: bold;">Save</span>, and then select <span style="font-weight: bold;">Open</span>. As a result, the asynchronous function will be created on the <span style="font-weight: bold;">Scripts</span> tab. Add the following script to this function:</p>
|
||||
<p class="p_CodeExample" style="white-space: normal; page-break-inside: avoid;"><span class="f_CodeExample">// Launch the script if the filter value is changed</span><br />
|
||||
<span class="f_CodeExample">async function onFilterChanged(filterData: FilterData): Promise<void> {</span><br />
|
||||
<span class="f_CodeExample"> Context.data.filterData = filterData;</span><br />
|
||||
<span class="f_CodeExample">}</span><br />
|
||||
<span class="f_CodeExample">// Specify which values can be used in the function</span><br />
|
||||
<span class="f_CodeExample">interface FilterData {</span><br />
|
||||
<span class="f_CodeExample"> agent: TApplication<Application$_clients$_companies$Data, any, Application$_clients$_companies$Processes> | undefined;</span><br />
|
||||
<span class="f_CodeExample"> from_date: TDate | undefined;</span><br />
|
||||
<span class="f_CodeExample"> to_date: TDate | undefined;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<ol style="list-style-type:upper-roman" start="4">
|
||||
<li value="5" class="p_Normal">Go back to the <span style="font-weight: bold;">Template</span> tab and open the settings of the <span style="font-weight: bold;">Revenues table</span> widget. On the <span style="font-weight: bold;">Main</span> tab, you see its variables. To see the items according to the filtering data in the table, you should send these data to the context of the table widget. To do it, link the <span style="font-weight: bold;">Filter data</span> variable of the arbitrary type you’ve created earlier in the page context.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 20px;"><img alt="child-widget-event-11" width="907" height="418" style="margin:0;width:907px;height:418px;border:none" src="child-widget-event-11.png"/></p>
|
||||
<p class="p_Normal">Save settings of the <span style="font-weight: bold;">Revenues table</span> widget.</p>
|
||||
<ol style="list-style-type:upper-roman" start="4">
|
||||
<li value="6" class="p_Normal">Save and publish the <span style="font-weight: bold;">Transaction Report</span> page.</li></ol>
|
||||
<p class="p_Normal">Now, when entering a value in one of the filter fields, you see the data of the items from the <span style="font-weight: bold;">Transactions registry</span> app.</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" 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>
|
||||
<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">In this topic</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://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="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">© 2025 BRIX</span>
|
||||
<ul class="footer-list">
|
||||
|
||||
<li class="footer-item">
|
||||
<a href="#" class="arrow-top" style="display: block;"></a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<iframe name="hmnavigation" style="display:none!important"></iframe>
|
||||
<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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user