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

push ru help
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m55s
Details

Browse Source
This commit is contained in:
koziavin
2025-05-28 05:24:40 +04:00
parent 0113fb8289
commit 041abbbd24
4459 changed files with 121310 additions and 86248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
platform/user-widgets-context.html
View File

@ -1,19 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ru">
<head>
<title>Additional options in the context of custom widgets</title>
<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="When working with widget context, you can create variables that are used to configure interfaces and write scripts. But note that the context of system and custom widgets are..." />
<meta name="description" content="При работе с контекстами виджетов вы можете создавать переменные, которые будут использоваться для настройки интерфейсов и написания скриптов. Однако следует учитывать, что..." />
<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="" />
<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" />
@ -23,6 +24,7 @@
<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>
@ -34,16 +36,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://brix365.com/en/help">
<img src="./logo-en.svg" alt="header logo">
<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(83180416,'reachGoal','poisk')">
<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">
@ -63,7 +65,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://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>
<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>
@ -78,8 +80,8 @@
<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 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>
@ -92,15 +94,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 designer &gt; <a href="interface_settings.html">Set up interfaces</a> / Additional options in the context of custom widgets</p>
<p>Low-code дизайнер &gt; <a href="interface_settings.html">Создание интерфейсов</a> / Настроить контекст пользовательского виджета</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Additional options in the context of custom widgets</span></h1>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Настроить контекст пользовательского виджета</span></h1>
</div>
</header>
@ -109,42 +111,42 @@
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">When working with widget context, you can create variables that are used to configure interfaces and write scripts. But note that the context of system and custom widgets are different. Read more about working with system widget context in <a href="context_types.html" class="topiclink">Context types</a>.</span></p>
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">When creating a </span><span style="font-size: 15px; color: #394149;"><a href="user_widgets.html" class="topiclink">custom widget</a></span><span style="font-size: 15px; color: #394149;">, you can specify the input and output variables, which you cannot do in system widgets. You can also edit the settings window that opens when the widget is placed on a form or page. </span></p>
<p class="p_Normal" style="margin: 11px 0 0 0;"><span style="font-size: 15px; color: #394149;">To work with the additional options, open the widget in the </span><span style="font-size: 15px; color: #394149;"><a href="interface_designer.html" class="topiclink">interface designer</a></span><span style="font-size: 15px; color: #394149;">. On the top panel, go to the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Context</span><span style="font-size: 15px; color: #394149;"> tab.</span></p>
<h2 class="p_Heading2"><span class="f_Heading2">Input and output variables</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">When you place a widget on a form or a page, you can use the </span><span style="font-family: Inter; font-weight: bold;">Input</span><span style="font-family: Inter;"> and </span><span style="font-family: Inter; font-weight: bold;">Output</span><span style="font-family: Inter;"> options to:</span></p>
<p class="p_Normal">При работе с контекстами виджетов вы можете создавать переменные, которые будут использоваться для настройки интерфейсов и написания скриптов. Однако следует учитывать, что контексты системного и пользовательского виджетов различаются. Подробнее о работе с контекстом системного виджета читайте в статье <a href="context_types.html" class="topiclink">«Типы контекста»</a>. </p>
<p class="p_Normal">В контексте <a href="user_widgets.html" class="topiclink">пользовательского виджета</a>, в отличии от системного, вы можете указать, какие переменные являются входными и выходными параметрами. Также вы можете изменить окно настроек, которое открывается при размещении виджета на форме или странице. </p>
<p class="p_Normal">Для этого перейдите в <a href="interface_designer.html" class="topiclink">дизайнер интерфейсов</a> добавленного вами пользовательского виджета. На верхней панели выберите вкладку <span style="font-weight: bold;">Контекст</span>.</p>
<h3 class="p_Heading3"><a id="use-settings" class="hmanchor"></a><span class="f_Heading2">Входные и выходные переменные </span></h3>
<p class="p_Normal">При размещении виджета на форме или странице с помощью опций <span style="font-weight: bold;">Входное</span> и <span style="font-weight: bold;">Выходное</span> вы сможете: </p>
<ul style="list-style-type:disc">
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Manage the visibility of the widget’s variables in the context of a page or a form.</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Pass the widget’s context to the context of a page or form.</span></li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">For this option to work correctly, you need to map the widget’s context variables to the properties of the form or page that it is located on.</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">To enable the </span><span style="font-family: Inter; font-weight: bold;">Input</span><span style="font-family: Inter;"> and </span><span style="font-family: Inter; font-weight: bold;">Output</span><span style="font-family: Inter;"> options, open the widget in the</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"><a href="interface_designer.html" class="topiclink">interface designer</a></span><span style="font-family: Inter;">. On the top panel, select the </span><span style="font-family: Inter; font-weight: bold;">Context</span><span style="font-family: Inter;"> tab. Configure the options for each variable.</span></p>
<p class="p_Normal" style="margin: 11px 0 0 0;"><img alt="context_04" width="1193" height="449" style="margin:0;width:1193px;height:449px;border:none" src="context_04.png"/></p>
<li class="p_Normal">управлять видимостью переменных виджета в контексте формы или страницы;</li><li class="p_Normal">передавать контекст виджета в контекст страницы или формы.</li></ul>
<p style="margin: 0 0 11px 0;"><span style="font-size: 15px;">Для корректной работы настройки, необходимо сопоставить контекстные переменные виджета со свойствами формы или страницы, на которых данный виджет располагается. </span></p>
<p style="margin: 0 0 11px 0;"><span style="font-size: 15px;">Чтобы включить опции </span><span style="font-size: 15px; font-weight: bold;">Входное</span><span style="font-size: 15px;"> и </span><span style="font-size: 15px; font-weight: bold;">Выходное</span><span style="font-size: 15px;">,</span><span style="font-size: 15px; font-weight: bold;"> </span><span style="font-size: 15px;">перейдите в <a href="interface_designer.html" class="topiclink">дизайнер интерфейсов</a> добавленного вами пользовательского виджета. На верхней панели выберите вкладку </span><span style="font-size: 15px; font-weight: bold;">Контекст</span><span style="font-size: 15px;">. Настройте опции для каждой переменной.</span></p>
<p style="margin: 0 0 11px 0;"><img alt="context-types-5" width="999" height="260" style="margin:0;width:999px;height:260px;border:none" src="context-types-5.png"/></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20;"><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Input</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">. This variable will record and store the value of a property from the form or page that the widget is located on.</span></li><li style="line-height: 1.20; margin-top: 11px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Output</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">. The value of this property will be passed to the property of the form or page that it is located on.</span></li><li style="line-height: 1.20; margin-top: 11px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Both options are enabled</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">. In this case, when the value of the widget</span><span style="font-family: Inter;">’</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">s variable changes, the value of the form or page property will also change, and vice versa.</span></li><li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Both options are disabled</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">. In this case, the value of the widget</span><span style="font-family: Inter;">’</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">s variable is not passed to the form or page context. The variable is not mapped with a field of the form or page. Its value is set up in the widget</span><span style="font-family: Inter;">’</span><span style="font-size: 15px; font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">s settings when the widget is added.</span></li></ul>
<h2 class="p_Heading2"><span class="f_Heading2">Example of configuring additional options</span></h2>
<p class="p_Normal">To see how the <span style="font-weight: bold;">Input</span> and <span style="font-weight: bold;">Output</span> options work in real life, take a look at the following example. Let<span style="font-family: Inter;">’</span>s create a widget named <span style="font-weight: bold;">Calculator</span><span style="font-size: 15px;">:</span></p>
<li class="p_Normal"><span style="font-weight: bold;">Входное</span> — в данную переменную будет записываться значение свойства формы или страницы, на которую добавлен виджет; </li><li class="p_Normal"><span style="font-weight: bold;">Выходное</span> — значение переменной виджета передаётся в свойство формы или страницы;</li><li class="p_Normal"><span style="font-weight: bold;">Включены обе опции</span> — в этом случае при изменении значения переменной виджета будет меняться значение свойства формы или страницы и наоборот;</li><li class="p_Normal"><span style="font-weight: bold;">Отключены обе опции</span> — переменная виджета не будет передаваться в контекст формы или страницы. Переменную не нужно связывать с полями на странице или форме, её значение задается в настройках виджета при его создании.</li></ul>
<h3 class="p_Heading3"><span class="f_Heading3">Пример настройки дополнительных опций </span></h3>
<p class="p_Normal">Рассмотрим работу опций <span style="font-weight: bold;">Входное</span> и <span style="font-weight: bold;">Выходное </span>на примере. Создадим пользовательский виджет <span style="font-weight: bold;">Калькулятор</span>. Для этого<span style="font-size: 15px;">:</span></p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Go to </span><span style="font-size: 15px; font-weight: bold;">Administration &gt; Interfaces</span><span style="font-size: 15px;">, click </span><span style="font-size: 15px; font-weight: bold;">+Create</span><span style="font-size: 15px;">, select </span><span style="font-size: 15px; font-weight: bold;">Widget</span><span style="font-size: 15px;">, enter its name, and save the settings. </span></li><li value="2" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">The interface designer will open. Click </span><span style="font-size: 15px; font-weight: bold;">+Widget</span><span style="font-size: 15px;"> and drag the <a href="panel_with_heading.html" class="topiclink">Panel with header</a> widget to the modeling canvas. </span></li><li value="3" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Go to the </span><span style="font-size: 15px; font-weight: bold;">Context</span><span style="font-size: 15px;"> tab and add properties of the <a href="360009707032.html#number" class="topiclink">Number</a> type:</span><span style="font-size: 15px; font-weight: bold;"> Addend 1</span><span style="font-size: 15px;">, </span><span style="font-size: 15px; font-weight: bold;">Addend 2</span><span style="font-size: 15px;">, and </span><span style="font-size: 15px; font-weight: bold;">Sum</span><span style="font-size: 15px;">. </span></li><li value="4" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Set up additional options for the added properties: </span></li></ol>
<ol style="list-style-type:upper-roman"><ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">For </span><span style="font-size: 15px; font-weight: bold;">Addend 1</span><span style="font-size: 15px;"> and </span><span style="font-size: 15px; font-weight: bold;">Addend 2</span><span style="font-size: 15px;">, enable the </span><span style="font-size: 15px; font-weight: bold;">Input</span><span style="font-size: 15px;"> option.</span></li><li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">For </span><span style="font-size: 15px; font-weight: bold;">Sum</span><span style="font-size: 15px;">, enable the </span><span style="font-size: 15px; font-weight: bold;">Output</span><span style="font-size: 15px;"> option.</span></li></ul></li></ol>
<ol style="list-style-type:upper-roman">
<li value="5" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Go back to the </span><span style="font-size: 15px; font-weight: bold;">Template</span><span style="font-size: 15px;"> tab. On the right-side panel, switch to </span><span style="font-size: 15px; font-weight: bold;">Properties</span><span style="font-size: 15px;"> and drag the added variables to the canvas. Place them inside the </span><span style="font-size: 15px; font-weight: bold;">Panel with header</span><span style="font-size: 15px;"> widget. </span></li><li value="6" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Now add a <a href="client_server_scripts.html" class="topiclink">script</a> that will calculate the sum of the </span><span style="font-size: 15px; font-weight: bold;">Addend 1</span><span style="font-size: 15px;"> and </span><span style="font-size: 15px; font-weight: bold;">Addend 2</span><span style="font-size: 15px;"> fields. To do that, select the </span><span style="font-size: 15px; font-weight: bold;">Addend 1</span><span style="font-size: 15px;"> field click on the gear icon next to its name to open the settings. Go to the </span><span style="font-size: 15px; font-weight: bold;">Events</span><span style="font-size: 15px;"> tab and click </span><span style="font-size: 15px; font-weight: bold;">Create</span><span style="font-size: 15px;"> in the </span><span style="font-size: 15px; font-weight: bold;">On value change handler</span><span style="font-size: 15px;">. Enter a name and click </span><span style="font-size: 15px; font-weight: bold;">Create</span><span style="font-size: 15px;"> and </span><span style="font-size: 15px; font-weight: bold;">Open</span><span style="font-size: 15px;">. On the </span><span style="font-size: 15px; font-weight: bold;">Scripts</span><span style="font-size: 15px;"> tab that opens, add the following: </span></li></ol>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async function calc (): Promise&lt;</span><span class="f_CodeExample" style="font-weight: bold;">void</span><span class="f_CodeExample">&gt; {</span><br />
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="color: #ffffff;">&nbsp;&nbsp;&nbsp;</span><span class="f_CodeExample">debugger;</span><br />
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="color: #ffffff;">&nbsp;&nbsp;&nbsp;</span><span class="f_CodeExample">Context.data.sum = Context.data.addend_1 !== undefined &amp;&amp; Context.data.addend_2 !== undefined ? Context.data.addend_1 + Context.data.addend_2 : undefined;</span><br />
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="color: #ffffff;">&nbsp;&nbsp;&nbsp;</span><span class="f_CodeExample">}</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 43px;"><span style="font-size: 15px;">Do the same for </span><span style="font-size: 15px; font-weight: bold;">Addend 2</span><span style="font-size: 15px;">.</span></p>
<li value="1" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Перейдём в </span><span style="font-size: 15px; font-weight: bold;">Администрирование &gt; Интерфейсы</span><span style="font-size: 15px;">, нажмём </span><span style="font-size: 15px; font-weight: bold;">+Создать</span><span style="font-size: 15px;">, выберем </span><span style="font-size: 15px; font-weight: bold;">Виджет</span><span style="font-size: 15px;">, укажем его название и сохраним настройки. </span></li><li value="2" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Откроется дизайнер интерфейсов. Нажмём </span><span style="font-size: 15px; font-weight: bold;">+Виджет</span><span style="font-size: 15px;"> и добавим на поле для моделирования <a href="panel_with_heading.html" class="topiclink">Панель с заголовком</a>. </span></li><li value="3" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Перейдём на вкладку </span><span style="font-size: 15px; font-weight: bold;">Контекст </span><span style="font-size: 15px;">и добавим свойства типа <a href="360009707032.html#number" class="topiclink">Число</a>: </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 1</span><span style="font-size: 15px;">, </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 2</span><span style="font-size: 15px;">, </span><span style="font-size: 15px; font-weight: bold;">Сумма</span><span style="font-size: 15px;">. </span></li><li value="4" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Настроим дополнительные опции для добавленных свойств: </span></li></ol>
<ul style="list-style-type:disc">
<li style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px; font-weight: bold;">Слагаемое 1</span><span style="font-size: 15px;"> и </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 2</span><span style="font-size: 15px;"> — включим опцию </span><span style="font-size: 15px; font-weight: bold;">Входное</span><span style="font-size: 15px;">;</span></li><li style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px; font-weight: bold;">Сумма</span><span style="font-size: 15px;"> — включим опцию </span><span style="font-size: 15px; font-weight: bold;">Выходное</span><span style="font-size: 15px;">.</span></li></ul>
<ol style="list-style-type:upper-roman" start="5">
<li value="5" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Вернёмся на вкладку </span><span style="font-size: 15px; font-weight: bold;">Шаблон</span><span style="font-size: 15px;">. На правой панели дизайнера интерфейсов нажмём </span><span style="font-size: 15px; font-weight: bold;">Свойства</span><span style="font-size: 15px;"> и перенесём добавленные переменные на поле виджета </span><span style="font-size: 15px; font-weight: bold;">Панель с заголовком</span><span style="font-size: 15px;">. </span></li><li value="6" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Добавим <a href="client_server_scripts.html" class="topiclink">скрипт</a>, в котором будет просчитываться сумма значений полей </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 1</span><span style="font-size: 15px;"> и </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 2</span><span style="font-size: 15px;">. Для этого выберем строку </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 1</span><span style="font-size: 15px;"> и откроем настройки, нажав на значок шестерёнки рядом с названием. Перейдём на вкладку </span><span style="font-size: 15px; font-weight: bold;">События</span><span style="font-size: 15px;"> и нажмём </span><span style="font-size: 15px; font-weight: bold;">Создать</span><span style="font-size: 15px;"> в поле </span><span style="font-size: 15px; font-weight: bold;">Событие при изменении значения</span><span style="font-size: 15px;">. Введём название и нажмём </span><span style="font-size: 15px; font-weight: bold;">Создать</span><span style="font-size: 15px;"> и </span><span style="font-size: 15px; font-weight: bold;">Открыть</span><span style="font-size: 15px;">. На открывшейся вкладке </span><span style="font-size: 15px; font-weight: bold;">Скрипты</span><span style="font-size: 15px;"> добавим команды: </span></li></ol>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async </span><span class="f_CodeExample" style="font-weight: bold;">function</span><span class="f_CodeExample"> calc (): Promise&lt;</span><span class="f_CodeExample" style="font-weight: bold;">void</span><span class="f_CodeExample">&gt; {</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;</span><span class="f_CodeExample" style="font-weight: bold;">debugger</span><span class="f_CodeExample">;</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;Context.data.summa = Context.data.slagaemoe_1 !== undefined &amp;&amp; Context.data.slagaemoe_2 !== undefined ? Context.data.slagaemoe_1 + Context.data.slagaemoe_2 : undefined;</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;}</span></p>
<p style="margin: 7px 0 16px 43px;"><span style="font-size: 15px;">Таким же образом привяжем добавленный скрипт в настройках строки </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 2</span><span style="font-size: 15px;">. </span></p>
<ol style="list-style-type:upper-roman" start="7">
<li value="7" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Save and publish the widget. Now you can add the custom </span><span style="font-size: 15px; font-weight: bold;">Calculator</span><span style="font-size: 15px;"> widget to pages and forms of apps.</span></li></ol>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-size: 15px;">Let</span><span style="font-family: Inter;">’</span><span style="font-size: 15px;">s say you have the </span><span style="font-size: 15px; font-weight: bold;">Clients</span><span style="font-size: 15px;"> app. </span><span style="font-family: Inter;">You can</span><span style="font-size: 15px;"> place the </span><span style="font-size: 15px; font-weight: bold;">Calculator</span><span style="font-size: 15px;"> widget on its form. In </span><span style="font-size: 15px; font-weight: bold;">Settings</span><span style="font-size: 15px;">, map the widget</span><span style="font-family: Inter;">’</span><span style="font-size: 15px;">s variables to the app</span><span style="font-family: Inter;">’s</span><span style="font-size: 15px;"> field named </span><span style="font-size: 15px; font-weight: bold;">Total</span><span style="font-size: 15px;">.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-size: 15px;">As the </span><span style="font-size: 15px; font-weight: bold;">Input</span><span style="font-size: 15px;"> option is enabled to the </span><span style="font-size: 15px; font-weight: bold;">Addend 1</span><span style="font-size: 15px;"> and </span><span style="font-size: 15px; font-weight: bold;">Addend 2</span><span style="font-size: 15px;"> variables, the values of the mapped fields will be passed to the widget. The script will calculate the total. Since the </span><span style="font-size: 15px; font-weight: bold;">Output</span><span style="font-size: 15px;"> option is enabled for the </span><span style="font-size: 15px; font-weight: bold;">Sum</span><span style="font-size: 15px;"> field, its value will then be passed to the </span><span style="font-size: 15px; font-weight: bold;">Total</span><span style="font-size: 15px;"> field.</span><span style="font-size: 15px; font-weight: bold;"> </span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><img alt="context_06" width="1220" height="729" style="margin:0;width:1220px;height:729px;border:none" src="context_06.png"/></p>
<h2 class="p_Heading2"><a id="window" class="hmanchor"></a><span class="f_Heading2">Set up a custom widget settings window</span></h2>
<p style="line-height: 1.20; margin: 7px 0 16px 0;">You can create a custom settings window for each widget you create. The system administrator will use it to set the options that determine the widget<span style="font-family: Inter;">’s behavior.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">To set up a custom settings window, go to the </span><span style="font-family: Inter; font-weight: bold;">Context</span><span style="font-family: Inter;"> tab. In the top right corner, click </span><span style="font-family: Inter; font-weight: bold;">Create Form</span><span style="font-family: Inter;">. When you confirm the action, the <a href="interface_designer.html" class="topiclink">interface designer</a> will open. Here you can change the layout of the settings window, create new context variables, write scripts, etc.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">By default, the form comprises a pre-configured <a href="tabs.html" class="topiclink">Tabs</a> widget that includes the </span><span style="font-family: Inter; font-weight: bold;">Standard settings form</span><span style="font-family: Inter;"> widget. You can change the settings of these objects or delete them. You can also <a href="360027211631.html" class="topiclink">add new widgets</a> or fields.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">When you finish making changes, click </span><span style="font-family: Inter; font-weight: bold;">Save</span><span style="font-family: Inter;"> on the top panel of the interface designer. To go back to the custom widget creation page, click </span><img alt="back-arrow" width="33" height="33" style="margin:0;width:33px;height:33px;border:none" src="back-arrow.png"/><span class="f_ImageCaption"> </span><span style="font-family: Inter;">in the top left corner of the page.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">When the widget is published, the new settings page will be available to users when they place the widget on the modeling canvas.</span></p>
<li value="7" style="margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-size: 15px;">Сохраним и опубликуем виджет. Теперь мы можем добавлять пользовательский виджет </span><span style="font-size: 15px; font-weight: bold;">Калькулятор</span><span style="font-size: 15px;"> на страницы или формы приложения.</span></li></ol>
<p style="margin: 7px 0 16px 0;"><span style="font-size: 15px;">Допустим у нас есть приложение </span><span style="font-size: 15px; font-weight: bold;">Клиенты</span><span style="font-size: 15px;">. Разместим на его форме настроенный виджет </span><span style="font-size: 15px; font-weight: bold;">Калькулятор</span><span style="font-size: 15px;">. На форме </span><span style="font-size: 15px; font-weight: bold;">Настройки</span><span style="font-size: 15px;"> свяжем переменные виджета с полями приложения: в </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 1</span><span style="font-size: 15px;"> передадим поле </span><span style="font-size: 15px; font-weight: bold;">Сумма заказа №1</span><span style="font-size: 15px;">, в </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 2</span><span style="font-size: 15px;"> — </span><span style="font-size: 15px; font-weight: bold;">Сумма заказа №2</span><span style="font-size: 15px;">, в переменную </span><span style="font-size: 15px; font-weight: bold;">Сумма</span><span style="font-size: 15px;"> запишем поле </span><span style="font-size: 15px; font-weight: bold;">Общая сумма заказов</span><span style="font-size: 15px;">.</span></p>
<p style="margin: 7px 0 16px 0;"><span style="font-size: 15px;">При включённой опции </span><span style="font-size: 15px; font-weight: bold;">Входное</span><span style="font-size: 15px;"> для переменных </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 1</span><span style="font-size: 15px;"> и </span><span style="font-size: 15px; font-weight: bold;">Слагаемое 2</span><span style="font-size: 15px;"> значения связанных полей на форме будут передаваться в виджет. Сумма слагаемых рассчитывается при помощи скрипта. Затем значение переменной виджета будет передаваться в поле </span><span style="font-size: 15px; font-weight: bold;">Общая сумма заказов</span><span style="font-size: 15px;">, так как для переменной </span><span style="font-size: 15px; font-weight: bold;">Сумма</span><span style="font-size: 15px;"> включена опция </span><span style="font-size: 15px; font-weight: bold;">Выходное</span><span style="font-size: 15px;">.</span><span style="font-size: 15px; font-weight: bold;"> </span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="context_types-6" width="668" height="474" style="margin:0;width:668px;height:474px;border:none" src="context_types-6.png"/></p>
<h2 class="p_Heading2"><a id="settings" class="hmanchor"></a><span class="f_Heading2">Создать окно настроек виджета </span></h2>
<p class="p_Normal">Для каждого пользовательского виджета вы можете создать индивидуальное окно настроек. С его помощью администратор системы сможет задать параметры, определяющие работу виджета. </p>
<p class="p_Normal">Для этого на вкладке <span style="font-weight: bold;">Контекст</span> в правом верхнем углу нажмите кнопку <span style="font-weight: bold;">Создать форму</span>. После подтверждения действия откроется <a href="interface_designer.html" class="topiclink">дизайнер интерфейсов</a>, в котором вы можете изменить внешний вид окна настроек, создать новые контекстные переменные, прописать скрипт и т. д. </p>
<p class="p_Normal">По умолчанию на форме размещён преднастроенный виджет <a href="tabs.html" class="topiclink">Вкладки</a>, в котором расположен виджет <a href="settings-standart-form-widget.html" class="topiclink">Стандартная форма настроек</a>. Вы можете перенастроить или удалить эти объекты, а также <a href="360027211631.html" class="topiclink">добавить новые виджеты</a> или поля. </p>
<p class="p_Normal">После внесения изменений нажмите <span style="font-weight: bold;">Сохранить</span> на верхней панели дизайнера интерфейсов. Для возврата к форме создания пользовательского виджета нажмите кнопку <img alt="context_types-7" width="30" height="30" style="margin:0;width:30px;height:30px;border:none" src="context_types-7.png"/> в левом верхнем углу страницы. </p>
<p class="p_Normal">После публикации виджета изменённая форма настроек будет отображаться у пользователей при размещении виджета на поле для моделирования. </p>
<div class="bottom-nav">
@ -161,7 +163,7 @@
</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>
<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>
@ -169,7 +171,7 @@
<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>
<h3 class="h3-toc">В этой статье</h3>
<nav id="toc2"></nav>
</div>
</aside>
@ -180,30 +182,63 @@
<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>
<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="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 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.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>