update help elma
This commit is contained in:
@ -1,20 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Настройка пользовательской валидации</title>
|
||||
<title>Set up custom validation</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="Валидация используется для проверки правильности заполнения полей и определения возможности сохранения формы. Валидация может быть: " />
|
||||
<meta name="description" content="Validation is used to verify that fields are filled out correctly and to determine if the form can be saved. Validation can be:" />
|
||||
<meta name="picture" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Cправка по Low-code платформе ELMA365" />
|
||||
<meta property="og:url" content="https://elma365.com/ru/help" />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:site_name" content="ELMA365" />
|
||||
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
|
||||
<meta property="og:url" content="https://brix365.com/en/help" />
|
||||
<meta property="og:image" content="" />
|
||||
<link rel="icon" href="favicon.png" type="image/png" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
@ -24,7 +23,6 @@
|
||||
<link rel="stylesheet" href="./article.css" />
|
||||
<link rel="stylesheet" href="./glossary.css" />
|
||||
<link rel="stylesheet" href="./theme.css" />
|
||||
|
||||
<script type="text/javascript" src="jquery.js"></script>
|
||||
<script type="text/javascript" src="helpman_settings.js"></script>
|
||||
<script type="text/javascript" src="helpman_topicinit.js"></script>
|
||||
@ -36,16 +34,16 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M6ETBEC1R9"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'G-M6ETBEC1R9');</script>
|
||||
|
||||
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
|
||||
|
||||
<header class="header elma-365">
|
||||
<div class="container">
|
||||
<a class="header__logo" href="https://elma365.com/ru/help">
|
||||
<img src="./logo.svg" alt="header logo">
|
||||
<a class="header__logo" href="https://brix365.com/en/help">
|
||||
<img src="./logo-en.svg" alt="header logo">
|
||||
</a>
|
||||
<!-- <div class="hero__search-form" id="search-panel">
|
||||
<form class="search-form" onsubmit="ym(83179930,'reachGoal','poisk')">
|
||||
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
|
||||
<label class="search-form__label">
|
||||
<span id="reset-search" class="search__icon"></span>
|
||||
<input class="search-form__input" type="text">
|
||||
@ -65,7 +63,7 @@
|
||||
</div>
|
||||
<div class="header__navi">
|
||||
|
||||
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a class="project-link" href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li><li><a class="project-link" href="https://elma365.com/ru/help/business_solutions/-elma365-store.html">Бизнес-решения</a></li></ul></span></li><li><a href="https://api.elma365.com/ru/"target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/"target="_blank">SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/" target="_blank">Академия</a></li><li><a href="https://elma365.com/ru/" target="_blank">Сайт ELMA365</a></li></ul>
|
||||
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
|
||||
|
||||
|
||||
</div>
|
||||
@ -80,8 +78,8 @@
|
||||
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<a class="header__logo" href="https://elma365.com/ru/help">
|
||||
<img src="./logo-light.svg">
|
||||
<a class="header__logo" href="https://brix365.com/en/help">
|
||||
<img src="./logo-light-en.svg">
|
||||
</a>
|
||||
<span class="sidebar__close elma-365-close" id="close"></span>
|
||||
</div>
|
||||
@ -94,15 +92,15 @@
|
||||
<div class="article-inner">
|
||||
<div class="content">
|
||||
<header class="article__header">
|
||||
<div class="article__bread" style="display:flex; gap:10px;">
|
||||
<div class="article__bread" style="display:flex; gap:10px;">
|
||||
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
|
||||
|
||||
<div class="topic__breadcrumbs">
|
||||
<p>Low-code дизайнер > <a href="interface_settings.html">Создание интерфейсов</a> > <a href="client_server_scripts.html">Скрипты в виджетах</a> / Настройка пользовательской валидации</p>
|
||||
<p>Low-code designer > <a href="interface_settings.html">Set up interfaces</a> > <a href="client_server_scripts.html">Scripts in widgets</a> / Set up custom validation</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Настройка пользовательской валидации</span></h1>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Set up custom validation</span></h1>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
@ -111,114 +109,114 @@
|
||||
<a href="#h1-article" class="scroll-top"></a>
|
||||
</div>
|
||||
<!-- Placeholder for topic body. -->
|
||||
<p class="p_Normal">Валидация используется для проверки правильности заполнения полей и определения возможности сохранения формы. Валидация может быть: </p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">Validation is used to verify that fields are filled out correctly and to determine if the form can be saved. Validation can be:</p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal"><span style="font-weight: bold;">системной</span> — проверяется заполнение обязательных полей на форме. В рамках системной валидации на форме отображаются только типовые ошибки; </li><li class="p_Normal"><span style="font-weight: bold;">пользовательской</span> — параметры проверки полей и вывода ошибок задаются пользователями. </li></ul>
|
||||
<p class="p_Normal">Для создания пользовательской валидации применяется функция <span style="font-weight: bold;">Валидация</span>, которая создаётся на вкладке <a href="designer-tabs.html#settings-tab" class="topiclink">Настройки</a> дизайнера интерфейсов. В этой функции прописываются дополнительные проверки к уже существующим стандартным проверкам валидации. Подробнее о методах и свойствах объекта результата валидации читайте в справке ELMA365 TS SDK в статье <a href="https://tssdk.elma365.com/ru/latest/interfaces/_02_types_.validationresult.html" target="_blank" class="weblink">«Результат валидации»</a>. </p>
|
||||
<p class="p_Normal">Если присутствует хотя бы одна ошибка стандартной или пользовательской валидации, форму сохранить невозможно. Исключением являются <a href="user-validation.html#hidden" class="topiclink">ошибки скрытых на форме полей</a>. </p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Добавление пользовательской валидации</span></h2>
|
||||
<p class="p_Normal">Рассмотрим работу функции валидации на примере проверки поля <span style="font-weight: bold;">ИНН</span> при создании элемента приложения <span style="font-weight: bold;">Компании</span>. </p>
|
||||
<p class="p_Normal">Допустим, на форме приложения <span style="font-weight: bold;">Компании</span> расположено свойство <span style="font-weight: bold;">ИНН</span> типа <a href="360009707032.html#string" class="topiclink">Строка</a>. Для создания новой компании необходимо, чтобы это поле было правильно заполнено, то есть введено определённое количество цифр. </p>
|
||||
<p class="p_Normal">Для создания пользовательской валидации выполните следующие действия: </p>
|
||||
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-weight: bold;">System</span>. It checks the filling of mandatory fields on the form. With system validation, only standard errors are displayed on the form.</li><li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-weight: bold;">Custom</span>. The parameters of field validation and error output are set by the user.</li></ul>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">To set custom validation, the <span style="font-weight: bold;">Validation</span> function is used. It is created on the <a href="designer-tabs.html#system-functions" class="topiclink">Settings</a> tab of the interface designer. In this function, additional validation checks are added to the existing standard checks. Read more about methods and properties of the validation result object in BRIX TS SDK in the <span style="color: #0000ff;"><a href="https://tssdk.brix365.com/en/interfaces/_02_types_.validationresult.html" target="_blank" class="weblink">Validation result</a></span> article.</p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">If at least one error of standard or custom validation is present, the form cannot be saved. Exceptions are <span style="color: #0000ff;"><a href="user-validation.html#hidden" class="topiclink">errors of hidden form fields</a></span>.</p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Set up custom validation</span></h2>
|
||||
<p style="text-align: justify; line-height: 1.28; margin: 0 0 11px 0;">Let<span style="color: #202122; background-color: #ffffff;">’s</span> consider the work of the validation function on the example of checking the <span style="font-weight: bold;">LEI </span>field when creating an element of the <span style="font-weight: bold;">Entity</span> app.</p>
|
||||
<p style="text-align: justify; line-height: 1.28; margin: 0 0 11px 0;">Let’s say, on the <span style="font-weight: bold;">Entity</span> app form, there is the <span style="font-weight: bold;">LEI</span> property of the <span style="color: #0000ff;"><a href="360009707032.html#string" class="topiclink">String</a></span> type. To create a new entity, this field must be filled in correctly, i.e. a certain number of digits must be entered.</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">Perform the following steps to set custom validation:</p>
|
||||
<ol style="list-style-type:upper-roman">
|
||||
<li value="1" class="p_Normal">Откройте форму создания элемента приложения в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a>. </li><li value="2" class="p_Normal">Перейдите на вкладку <span style="font-weight: bold;">Настройки</span>. </li><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>.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 36px;"><img alt="user-validation-1" width="882" height="342" style="margin:0;width:882px;height:342px;border:none" src="user-validation-1.png"/></p>
|
||||
<li value="1" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Open the app item creation form in the <span style="color: #0000ff;"><a href="interface_designer.html" class="topiclink">interface designer</a></span>.</li><li value="2" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Go to the <span style="font-weight: bold;">Settings</span> tab.</li><li value="3" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">In the <span style="font-weight: bold;">System functions</span> section, in the <span style="font-weight: bold;">Validation</span> field, specify the validation function. To do this, click <span style="font-weight: bold;">Create</span>, then <span style="font-weight: bold;">Open</span>.</li></ol>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 7px 34px;"><img alt="user-validation-1" width="867" height="312" style="margin:0;width:867px;height:312px;border:none" src="user-validation-1.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="4">
|
||||
<li value="4" class="p_Normal">На открывшейся вкладке <span style="font-weight: bold;">Скрипты</span> будет отображаться заготовка в виде пустой асинхронной функции, которая возвращает <a href="https://tssdk.elma365.com/ru/latest/interfaces/_02_types_.validationresult.html" target="_blank" class="weblink">результат валидации</a> <code><b>(Promise<ValidationResult>)</b></code>. </li><li value="5" class="p_Normal">Внутри функции создайте новый объект результата валидации и поместите его в переменную, например, <code><b>result</b></code>. В этот объект можно добавлять необходимые ошибки валидации. Также объект необходимо возвращать в результате выполнения функции: </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"> validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> result = </span><span class="f_CodeExample" style="font-weight: bold;">new</span><span class="f_CodeExample"> ValidationResult();</span><br />
|
||||
<span class="f_CodeExample"> ...</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<li value="4" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">The opened <span style="font-weight: bold;">Scripts</span> tab will display a blank asynchronous function that returns the <span style="color: #0000ff;"><a href="https://tssdk.brix365.com/en/latest/interfaces/_02_types_.validationresult.html" target="_blank" class="weblink">validation result</a></span> (<code><b>Promise</b></code>).</li><li value="5" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Inside the function, create a new validation result object and place it in a variable, for example, <code><b>result</b></code>. You can add necessary validation errors to this object. The object should also be returned as a result of the function execution:</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"> validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> result = </span><span class="f_CodeExample" style="font-weight: bold;">new</span><span class="f_CodeExample"> ValidationResult();</span><br />
|
||||
<span class="f_CodeExample"> ...</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<p class="p_Normal">После создания функции и добавления в неё переменной с результатом сформируйте ошибки валидации. Они выводятся на форму при неверном заполнении полей. </p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Добавление ошибок валидации</span></h3>
|
||||
<p class="p_Normal">В функцию валидации можно добавлять различные действия, например, дополнительные проверки, а также создавать ошибки, которые будут выводиться на форму. </p>
|
||||
<p class="p_Normal">Например, в функции будет проверяться не только заполнение свойства <span style="font-weight: bold;">ИНН</span>, но и его содержимое: количество введённых символов и их тип. </p>
|
||||
<p class="p_Normal">Для удобства при создании проверок валидации создадим переменную <code><b>inn</b></code>, в которую из контекста будет передаваться значение свойства, хранящее введённый ИНН (<code><b>Context.data.inn</b></code>): </p>
|
||||
<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"> validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> result = </span><span class="f_CodeExample" style="font-weight: bold;">new</span><span class="f_CodeExample"> ValidationResult();</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> inn = Context.data.inn;</span><br />
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">After creating the function and adding a variable with the result to it, you need to generate validation errors that will be displayed on the form when fields are filled out incorrectly.</p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Add validation errors</span></h3>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">You can add various actions to the validation function, for example, additional checks, as well as create errors that will be displayed on the form.</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">For example, the function will check not only the <span style="font-weight: bold;">LEI</span> property, but also its content: the number of entered characters and their type.</p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">For convenience, when creating validation checks, we will create a variable <code><b>lei</b></code>, to which the value of the property storing the entered LEI (<code><b>Context.data.lei</b></code>) will be passed from the context:</p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async function validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample">const result = new ValidationResult();</span><br />
|
||||
<span class="f_CodeExample">const lei = Context.data.lei;</span><br />
|
||||
<span class="f_CodeExample">…</span><br />
|
||||
<span class="f_CodeExample">return result;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">When checking the contents of the property, we will add the validation result to the variable. In this case, we will use the field code from the context (in our case, <code><b>lei</b></code>) as the first parameter for the result, and the displayed validation error text as the second parameter. For example:</p>
|
||||
<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"> validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> result = </span><span class="f_CodeExample" style="font-weight: bold;">new</span><span class="f_CodeExample"> ValidationResult();</span><br />
|
||||
<span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> lei = Context.data.lei;</span><br />
|
||||
<span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (!lei?.length) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('lei', "Company LEI number must be entered");</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (lei && /[^0-9]/.test(lei)) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('lei', "LEI number can only consist of digits");</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (lei && [20].indexOf(lei.length) === -1) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('lei', "LEI number can only have 20 digits");</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<p class="p_Normal">При проверке содержимого свойства будем добавлять в переменную результат валидации. При этом в качестве первого параметра для результата будем использовать код поля из контекста (в нашем случае, <code><b>inn</b></code>), а второго — отображаемый текст ошибки валидации. Например: </p>
|
||||
<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"> validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> result = </span><span class="f_CodeExample" style="font-weight: bold;">new</span><span class="f_CodeExample"> ValidationResult();</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> inn = Context.data.inn;</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (!inn?.length) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('inn', "Необходимо ввести ИНН компании");</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (inn && /[^0-9]/.test(inn)) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('inn', "ИНН может состоять только из цифр");</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (inn && [10, 12].indexOf(inn.length) === -1) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('inn', "ИНН может состоять только из 10 или 12 цифр");</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<p class="p_Normal">Для добавления ошибок валидации можно использовать следующие методы: </p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">The following methods can be used to add validation errors:</p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal"><code><b>addContextError</b></code> — если проверяемое свойство находится в контексте основного объекта (свойство приложения, задачи и т. д), то есть в <code><b>Context.data</b></code>; </li><li class="p_Normal"><code><b>addViewContextError</b></code> — если свойство находится в контексте самой формы, то есть в <code><b>ViewContext.data</b></code>. </li></ul>
|
||||
<p class="p_Normal">Данные правила необходимо учитывать при написании функций, иначе ошибки на форме могут отображаться некорректно. </p>
|
||||
<p class="p_Normal">После проверки полей и добавления ошибок для определённых условий сохраните и опубликуйте форму. При попытке создать элемент приложения <span style="font-weight: bold;">Компания</span> без заполнения обязательных полей вы увидите ошибки:</p>
|
||||
<p class="p_Normal"><img alt="user-validation-2" width="721" height="407" style="margin:0;width:721px;height:407px;border:none" src="user-validation-2.png"/></p>
|
||||
<p class="p_Normal">Ошибки валидации выводятся под полями, а также перечислены в блоке валидации в верхней части формы. Помимо добавленных пользовательских ошибок валидации в списке также показаны ошибки стандартной валидации — в нашем случае незаполненное обязательное поле <span style="font-weight: bold;">Название</span>. </p>
|
||||
<p class="p_Normal">При корректном выборе метода добавления ошибки в списке будут отображаться имена свойств. При нажатии на название свойства из списка будет осуществлён переход к данному полю на форме. </p>
|
||||
<p class="p_Normal">Также в правом верхнем углу блока валидации отображается значок <img alt="user-validation-10" width="15" height="15" style="margin:0;width:15px;height:15px;border:none" src="user-validation-10.png"/>, который позволяет закрыть блок. При попытке сохранить форму и наличии хотя бы одной ошибки блок будет показан снова. </p>
|
||||
<p class="p_Normal">Для каждого поля можно добавлять несколько ошибок валидации одновременно. Например, можно изменить функцию валидации так, чтобы при каждой проверке свойства не возвращать результат, а проверять следующее условие. Например: </p>
|
||||
<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"> validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> result = </span><span class="f_CodeExample" style="font-weight: bold;">new</span><span class="f_CodeExample"> ValidationResult();</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">const</span><span class="f_CodeExample"> inn = Context.data.inn;</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (!inn?.length) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('inn', "Необходимо ввести ИНН компании");</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (inn && /[^0-9]/.test(inn)) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('inn', "ИНН может состоять только из цифр");</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">if</span><span class="f_CodeExample"> (inn && [10, 12].indexOf(inn.length) === -1) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError('inn', "ИНН может состоять только из 10 или 12 цифр");</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> </span><span class="f_CodeExample" style="font-weight: bold;">return</span><span class="f_CodeExample"> result;</span><br />
|
||||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><code><b>addContextError()</b></code>. If the property to be validated is in the context of the main object (app property, task, etc.), i. e., in <code><b>Context.data</b></code>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><code><b>addViewContextError()</b></code>. If the property is in the context of the form itself, i. e., in <code><b>ViewContext.data</b></code>.</li></ul>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">These rules should be taken into account when writing functions, otherwise errors on the form may be displayed incorrectly.</p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">After checking the fields and adding errors for certain conditions, save and publish the form. If you try to create a <span style="font-weight: bold;">Entity</span> app items without filling in the required fields, you will see errors:</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><img alt="user-validation-2" width="869" height="395" style="margin:0;width:869px;height:395px;border:none" src="user-validation-2.png"/></p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">Validation errors are displayed below the fields and are also listed in the validation section at the top of the form. In addition to the added custom validation errors, the list also shows standard validation errors, in our case, the unfilled required field <span style="font-weight: bold;">Name</span>.</p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">If the method of adding the error is selected correctly, the property names will be displayed in the list. If you click on the property name from the list, you will be passed to this field on the form.</p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Also, in the upper right corner of the validation activity, the <img alt="cross-icon-red" width="19" height="19" style="margin:0;width:19px;height:19px;border:none" src="cross-icon-red.png"/> icon is displayed that allows you to close the activity. If you try to save the form and there is at least one error, the activity will be displayed again.</p>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">You can add multiple validation errors for each field at the same time. For instance, you can modify the validation function so that each time a property is checked, it does not return a result, but checks the next condition. For example:</p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async function validate(): Promise<ValidationResult> {</span><br />
|
||||
<span class="f_CodeExample"> const result = new ValidationResult();</span><br />
|
||||
<span class="f_CodeExample"> const lei = Context.data. lei ;</span><br />
|
||||
<span class="f_CodeExample"> if (!lei ?.length) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError(lei , "Company LEI number must be entered");</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> if (lei && /[^0-9]/.test(lei )) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError(lei , "LEI number can only consist of digits");</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> if (lei && [20].indexOf(lei .length) === -1) {</span><br />
|
||||
<span class="f_CodeExample"> result.addContextError(lei , "LEI number can only have 20 digits");</span><br />
|
||||
<span class="f_CodeExample"> }</span><br />
|
||||
<span class="f_CodeExample"> return result;</span><br />
|
||||
<span class="f_CodeExample">}</span></p>
|
||||
<p class="p_Normal">В таком случае в блоке валидации формы и под самим полем будут отображены все актуальные ошибки валидации для данного свойства: </p>
|
||||
<p class="p_Normal"><img alt="user-validation-3" width="721" height="446" style="margin:0;width:721px;height:446px;border:none" src="user-validation-3.png"/></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Изменение заголовка блока валидации</span></h2>
|
||||
<p class="p_Normal">Над списком ошибок в блоке валидации находится заголовок, значение для которого задано по умолчанию. Чтобы изменить заголовок, воспользуйтесь свойством <code><b>title</b></code>: </p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">result.title = "При создании компании обнаружены ошибки:";</span></p>
|
||||
<p class="p_Normal"><img alt="user-validation-4" width="721" height="406" style="margin:0;width:721px;height:406px;border:none" src="user-validation-4.png"/></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Добавление текста в ошибки валидации</span></h2>
|
||||
<p class="p_Normal">В блоке со списком ошибок валидации можно выводить текстовые сообщения с дополнительной информацией. Например, добавить сообщение о какой-либо ошибке через метод <code><b>addMessage</b></code>:</p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">result.addMessage('Эта ошибка не привязана ни к какому полю формы, но является ошибкой');</span></p>
|
||||
<p class="p_Normal">Добавленные таким образом сообщения будут отображаться под заголовком блока валидации: </p>
|
||||
<p class="p_Normal"><img alt="user-validation-5" width="721" height="424" style="margin:0;width:721px;height:424px;border:none" src="user-validation-5.png"/></p>
|
||||
<h2 class="p_Heading2"><a id="hidden" class="hmanchor"></a><span class="f_Heading2">Валидация скрытых полей </span></h2>
|
||||
<p class="p_Normal">На форме приложения может присутствовать скрытое, но обязательное для заполнения поле. В этом случае валидация будет зависеть от того, как именно скрыто поле: </p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">In this case, all current validation errors for this property will be displayed in the validation field of the form and under the field itself:</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><img alt="user-validation-3" width="676" height="395" style="margin:0;width:676px;height:395px;border:none" src="user-validation-3.png"/></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Change the validation widget header</span></h2>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">Above the list of errors in the validation field, there is the title. Its value is set by default. To change it, use the <code><b>title</b></code> property:</p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">result.title = "Error detected when adding the entity:";</span></p>
|
||||
<p class="p_Normal"><img alt="user-validation-4" width="680" height="334" style="margin:0;width:680px;height:334px;border:none" src="user-validation-4.png"/></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Add text to validation errors</span></h2>
|
||||
<p class="p_Normal">In the field with the list of validation errors, you can display text messages with additional information. For example, add a message about some error using the <code><b>addMessage()</b></code> method:</p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">result.addMessage('There is an error not linked with any form field');</span></p>
|
||||
<p class="p_Normal">Messages added in this way will be displayed under the validation title:</p>
|
||||
<p class="p_Normal"><img alt="user-validation-5" width="670" height="362" style="margin:0;width:670px;height:362px;border:none" src="user-validation-5.png"/></p>
|
||||
<h2 class="p_Heading2"><a id="hidden" class="hmanchor"></a><span class="f_Heading2">Validation of hidden fields</span></h2>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">An app form may contain a hidden but required field. In this case, validation will depend on how the field is hidden:</p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li class="p_Normal">валидация игнорируется, если поле не отображается на форме по какому-либо условию. Например, видимость поля зависит от значения других свойств, оно управляется функцией или добавлено в скрытый по условию виджет. В этом случае скрытое поле не будет валидировано, и пользователь не увидит ошибок при сохранении элемента;</li><li class="p_Normal">валидация сработает, если поле всегда скрыто или добавлено в виджет, который скрыт всегда. Например, значение для поля устанавливается автоматически с помощью скрипта. В этом случае скрытое поле будет проверяться на ошибки заполнения, и пользователь увидит их при сохранении элемента. </li></ul>
|
||||
<p class="p_Normal">Рассмотрим подробнее оба варианта. </p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Валидация скрытых по условию полей </span></h3>
|
||||
<p class="p_Normal">Предположим, на форме создания компании расположено обязательное для заполнения поле <span style="font-weight: bold;">ИНН</span>. Чтобы пользователи могли добавить новый элемент без ввода ИНН компании, настроим отображение поля с помощью переключателя: </p>
|
||||
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">Validation is ignored if the field is not visible on the form based on a condition. For example, the visibility of a field depends on the value of other properties, it is controlled by a function or added to a widget hidden on condition. In this case, the hidden field will not be validated and the user will not see any errors when saving the item.</li><li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">Validation will work if the field is always hidden or is added to a widget that is always hidden. For example, the value for a field is set automatically by a script. In this case, the hidden field will be validated for filling errors, and the user will see them when saving the item.</li></ul>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Let’s take a closer look at both options.</p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Validation of fields hidden on condition</span></h3>
|
||||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">Let’s say there is a required <span style="font-weight: bold;">LEI</span> field on the entity creation form. To allow users to add a new item without entering the company’s LEI, let’s customize the field display using a switch:</p>
|
||||
<ol style="list-style-type:upper-roman">
|
||||
<li value="1" class="p_Normal">Откройте форму создания элемента приложения в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a>. </li><li value="2" class="p_Normal">Удалите расположенный по умолчанию виджет <a href="element_standart_form_widget.html" class="topiclink">Стандартная форма элемента</a>, который содержит все свойства из контекста приложения. </li><li value="3" class="p_Normal">Добавьте на форму удалённые вместе с виджетом свойства повторно. Для этого в правой панели дизайнера интерфейсов выберите вкладку <span style="font-weight: bold;">Свойства</span> и перетащите необходимые поля на форму. Все свойства будут отображаться в виде виджета <a href="form_line_widget.html" class="topiclink">Строка формы</a>. </li><li value="4" class="p_Normal">Перейдите на вкладку <span style="font-weight: bold;">Контекст</span> и создайте свойство <span style="font-weight: bold;">Показать ИНН</span> (<code><b>show_inn</b></code>) с типом <a href="360009707032.html#yes_no" class="topiclink">Выбор «да/нет»</a>. </li><li value="5" class="p_Normal">Вынесите созданное свойство <span style="font-weight: bold;">Показать ИНН</span> на поле для моделирования.</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 37px;"><img alt="user-validation-6" width="921" height="297" style="margin:0;width:921px;height:297px;border:none" src="user-validation-6.png"/></p>
|
||||
<li value="1" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Open the app item creation form in the <span style="color: #0000ff;"><a href="interface_designer.html" class="topiclink">interface designer</a></span>.</li><li value="2" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Remove the default located <span style="color: #0000ff;"><a href="element_standart_form_widget.html" class="topiclink">Standard item form</a></span> widget, which contains all properties from the app context.</li><li value="3" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Add the properties deleted with the widget to the form again. To do this, select the <span style="font-weight: bold;">Properties</span> tab in the right panel of the interface designer and drag and drop the required fields onto the form. All properties will be displayed as a <span style="color: #0000ff;"><a href="form_line_widget.html" class="topiclink">Form field</a></span> widget.</li><li value="4" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Click on the <span style="font-weight: bold;">Context</span> tab and create the <span style="font-weight: bold;">Show LEI</span> (<code><b>show_lei</b></code>) property of the <span style="color: #0000ff;"><a href="360009707032.html#yes-no-switch" class="topiclink">Yes/No switch</a></span> type.</li><li value="5" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Place the created <span style="font-weight: bold;">Show LEI</span> property on the modeling canvas.</li></ol>
|
||||
<p style="line-height: 1.20; margin: 7px 0 7px 34px;"><img alt="user-validation-6" width="1080" height="622" style="margin:0;width:1080px;height:622px;border:none" src="user-validation-6.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="6">
|
||||
<li value="6" 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;">Показать ИНН</span>. Отображение поля для ввода ИНН будет зависеть от значения этой переменной. </li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 37px;"><img alt="user-validation-7" width="726" height="306" style="margin:0;width:726px;height:306px;border:none" src="user-validation-7.png"/></p>
|
||||
<li value="6" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Open the settings for the <span style="font-weight: bold;">LEI</span> property. On the <span style="font-weight: bold;">System</span> tab, in the <span style="font-weight: bold;">Hide</span> field, select the <span style="font-weight: bold;">Show on condition</span> option. Then link the condition with the variable <span style="font-weight: bold;">Show LEI</span>. The display of the <span style="font-weight: bold;">LEI</span> field will depend on the value of this variable.</li></ol>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 7px 34px;"><img alt="user-validation-7" width="998" height="523" style="margin:0;width:998px;height:523px;border:none" src="user-validation-7.png"/></p>
|
||||
<ol style="list-style-type:upper-roman" start="7">
|
||||
<li value="7" class="p_Normal">Сохраните и опубликуйте форму. </li></ol>
|
||||
<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-weight: bold;">Сохранить</span>. </p>
|
||||
<p class="p_Normal"><img alt="user-validation-8" width="719" height="366" style="margin:0;width:719px;height:366px;border:none" src="user-validation-8.png"/></p>
|
||||
<p class="p_Normal">Произойдёт проверка обязательного поля <span style="font-weight: bold;">Название</span>. После заполнения этого поля элемент будет сохранён, а ошибки валидации скрытого поля <span style="font-weight: bold;">ИНН</span> будут проигнорированы. </p>
|
||||
<p class="p_Normal">При установке переключателя в значение <span style="font-weight: bold;">Да</span> поле для ввода ИНН будет отображено на форме и его валидация будет проверяться. </p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Валидация всегда скрытых полей </span></h3>
|
||||
<p class="p_Normal">Предположим, на форме создания компании нужно разместить скрытое поле, значение для которого устанавливается с помощью скрипта. Для корректной работы приложения значение этого поля проверяется правилами валидации. Для этого: </p>
|
||||
<li value="7" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Save and publish the form.</li></ol>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">After that, try to create an <span style="font-weight: bold;">Entity</span> app item. Set the <span style="font-weight: bold;">Show</span> <span style="font-weight: bold;">LEI</span> switch to <span style="font-weight: bold;">No</span> to hide the required field and click <span style="font-weight: bold;">Save</span>.</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><img alt="user-validation-8" width="751" height="298" style="margin:0;width:751px;height:298px;border:none" src="user-validation-8.png"/></p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">The required <span style="font-weight: bold;">Name</span> field is validated. When this field is filled in, the item will be saved and validation errors of the hidden <span style="font-weight: bold;">LEI</span> field will be ignored.</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">If the switch is set to <span style="font-weight: bold;">Yes</span>, the <span style="font-weight: bold;">LEI</span> field will be displayed on the form and its value will be checked.</p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Validation of always hidden fields</span></h3>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">Suppose you need to place a hidden field on the company creation form, and its value is set using a script. For correct operation of the app, the value of this field must be checked by validation rules. To do this:</p>
|
||||
<ol style="list-style-type:upper-roman">
|
||||
<li value="1" class="p_Normal">Откройте форму создания элемента приложения в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a>. </li><li value="2" class="p_Normal">Перейдите на вкладку <span style="font-weight: bold;">Контекст</span> и создайте новое свойство. Задайте название, например, <span style="font-weight: bold;">Специальное поле</span> (<code><b>special</b></code>). </li><li value="3" class="p_Normal">Разместите созданное свойство на поле для моделирования. Для этого на правой панели дизайнера интерфейсов выберите вкладку <span style="font-weight: bold;">Свойства</span> и перетащите поле на форму. Свойство будет отображаться в виде виджета <a href="form_line_widget.html" class="topiclink">Строка формы</a>. </li><li value="4" class="p_Normal">В открывшемся окне настроек свойства на вкладке <span style="font-weight: bold;">Системные</span> в поле <span style="font-weight: bold;">Видимость</span> выберите опцию <span style="font-weight: bold;">Скрывать всегда</span>. </li><li value="5" class="p_Normal">Сохраните и опубликуйте изменения. </li></ol>
|
||||
<p class="p_Normal">После этого попробуйте создать элемент приложения <span style="font-weight: bold;">Компания</span>. Если скрытое поле не заполнено или заполнено неверно, пользователь увидит ошибку валидации. </p>
|
||||
<p class="p_Normal"><img alt="user-validation-9" width="574" height="383" style="margin:0;width:574px;height:383px;border:none" src="user-validation-9.png"/></p>
|
||||
<li value="1" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Open the app item creation form in the <span style="color: #0000ff;"><a href="interface_designer.html" class="topiclink">interface designer</a></span>.</li><li value="2" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Click the <span style="font-weight: bold;">Context</span> tab and create a new property. Specify a name, for example, <span style="font-weight: bold;">Special field</span> (<code><b>special</b></code>).</li><li value="3" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Place the created property on the modeling canvas. To do this, select the <span style="font-weight: bold;">Properties</span> tab in the right pane of the interface designer and drag the field onto the form. The property will be displayed as the <span style="color: #0000ff;"><a href="form_line_widget.html" class="topiclink">Form field</a></span> widget.</li><li value="4" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">In the opened property settings window, on the <span style="font-weight: bold;">System</span> tab, in the <span style="font-weight: bold;">Hide</span> field, select the <span style="font-weight: bold;">Always hide</span> option.</li><li value="5" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Save and publish changes.</li></ol>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">After that, try to create an <span style="font-weight: bold;">Entity</span> app item. If the hidden field was filled out incorrectly, the user will see a validation error.</p>
|
||||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><img alt="user-validation-9" width="557" height="307" style="margin:0;width:557px;height:307px;border:none" src="user-validation-9.png"/></p>
|
||||
|
||||
<div class="bottom-nav">
|
||||
|
||||
@ -235,7 +233,7 @@
|
||||
|
||||
</div>
|
||||
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
|
||||
<div class="feedback-wrap"><div class="feedback" id="feedback"><span><b>Была ли статья полезной?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx">Спасибо за ваш отзыв!</div><div id="feedback-success-popup"><div class="wrap"><button type="button" class="feedback-popup-close">×</button><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_212_2187)"><path d="M22 0.6875C10.2294 0.6875 0.6875 10.2294 0.6875 22C0.6875 33.7706 10.2294 43.3125 22 43.3125C33.7706 43.3125 43.3125 33.7706 43.3125 22C43.3125 10.2294 33.7706 0.6875 22 0.6875ZM22 40.5625C11.8023 40.5625 3.4375 32.3078 3.4375 22C3.4375 11.8024 11.6922 3.4375 22 3.4375C32.1977 3.4375 40.5625 11.6922 40.5625 22C40.5625 32.1976 32.3078 40.5625 22 40.5625ZM34.1713 16.933L18.6613 32.3186C18.257 32.7197 17.604 32.7171 17.203 32.3128L9.82283 24.873C9.42176 24.4686 9.42434 23.8157 9.82867 23.4146L10.5609 22.6884C10.9652 22.2873 11.6181 22.2899 12.0192 22.6942L17.9468 28.6697L31.9926 14.7366C32.3969 14.3356 33.0498 14.3382 33.4509 14.7425L34.1772 15.4747C34.5783 15.879 34.5757 16.532 34.1713 16.933Z" fill="#27AE60"></path></g><defs><clipPath id="clip0_212_2187"><rect width="44" height="44" fill="white"></rect></clipPath></defs></svg><p>Ваш отзыв успешно отправлен!</p><span>Спасибо за обратную связь.</span></div></div><div class="feedback__popup" id="feedback__popup_why"><button type="button" class="feedback-popup-close">×</button><div class="feedback__popup-header">Уточните, почему:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Рекомендации не помогли</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Текст трудно понять</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Нет ответа на мой вопрос</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Содержание статьи не соответствует заголовку</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Другая причина</label></div><div class="feedback__popup" id="feedback__popup-other"><button type="button" class="feedback-popup-close">×</button> <div class="feedback__popup-header">Расскажите, что вам не понравилось в статье:</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Отправить"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg"/><span class="feedback-form__btn-group_yes-btn">Да</span></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg"/><span class="feedback-form__btn-group_no-btn">Нет</span></label></div><select name="category"><option disabled>Выберите вариант</option><option value="bad_recommendation" selected>Рекомендации не помогли</option><option value="difficult_text">Текст трудно понять</option><option value="no_answer">Нет ответа на мой вопрос</option><option value="bad_header">Содержание статьи не соответствует заголовку</option><option value="other_reason">Другая причина</option></select><input type="submit"></form></div></div>
|
||||
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
@ -243,7 +241,7 @@
|
||||
<input type="checkbox" />
|
||||
<div class="article__arrow"></div>
|
||||
<div class="table-of-contents elma365-right" id="toc2Content">
|
||||
<h3 class="h3-toc">В этой статье</h3>
|
||||
<h3 class="h3-toc">In this topic</h3>
|
||||
<nav id="toc2"></nav>
|
||||
</div>
|
||||
</aside>
|
||||
@ -254,63 +252,30 @@
|
||||
<div class="footer-container">
|
||||
<div class="footer-mobile">
|
||||
|
||||
<ul class="footer-mobile__list"><li><a href="https://api.elma365.com/ru/" target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/" target="_blank">TS SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/elma365" target="_blank">Академия</a></li></ul><ul class="footer-mobile__list"><li><a href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li></ul>
|
||||
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="footer-wrap">
|
||||
|
||||
<div><span class="mobile-question-popup">Отправить фидбэк</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Задать вопрос</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Отправить"></div></form><div class="hidden fade-in question-success-xs">Ваш фидбэк отправлен.</div></div>
|
||||
|
||||
<div class="footer-flex-b">
|
||||
<div class="footer-top">
|
||||
<span class="footer-copy">© 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">© 2025
|
||||
ELMA365
|
||||
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="footer-list">
|
||||
|
||||
<li class="footer-item"><a href="https://elma365.com/ru/" target="_blank" class="footer-link" style="color: #0D4A75;"><img src="browse.svg" alt="browse icon" class="footer-img">elma365.com</a></li><li class="footer-item"><a href="https://www.youtube.com/user/ELMABPM" target="_blank" class="footer-link"><img src="yt.svg" alt="youtube icon" class="footer-img"></a></li><li class="footer-item"><a href="https://vk.com/elma_bpm" target="_blank" class="footer-link"><img src="vk.svg" alt="vk icon" class="footer-img"></a></li><li class="footer-item"><a href="https://t.me/elmaday" target="_blank" class="footer-link"><img src="tg.svg" alt="telegram icon" class="footer-img"></a></li><li class="footer-item"><a href="https://dzen.ru/elma" target="_blank" class="footer-link"><img src="dzen.svg" alt="dzen icon" class="footer-img"></a></li>
|
||||
|
||||
|
||||
<li class="footer-item">
|
||||
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
|
||||
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-wrap">
|
||||
|
||||
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
|
||||
|
||||
<div class="footer-flex-b">
|
||||
<span class="footer-copy">© 2025 BRIX</span>
|
||||
<ul class="footer-list">
|
||||
|
||||
<li class="footer-item">
|
||||
<a href="#" class="arrow-top" style="display: block;"></a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="arrow-top"></a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<!-- <script type="text/javascript" src="jquery1.min.js"></script>-->
|
||||
<iframe name="hmnavigation" style="display:none!important"></iframe>
|
||||
<!--<script src="./jquery-ui.js"></script> -->
|
||||
<script src="./jquery-ui.min.js"></script>
|
||||
<script src="./jquery-ui.js"></script>
|
||||
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
|
||||
<script src="./jquery.tocify.min.js"></script>
|
||||
<script src="./TypoReporter.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user