koziavin
00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
287 lines
37 KiB
HTML
287 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<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="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="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
|
||
<meta property="og:url" content="https://brix365.com/en/help" />
|
||
<meta property="og:image" content="" />
|
||
<link rel="icon" href="favicon.png" type="image/png" />
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="./jquery-ui.min.css" />
|
||
<link rel="stylesheet" href="default.css" />
|
||
<link rel="stylesheet" href="./search-yandex.css" />
|
||
<link rel="stylesheet" href="./article.css" />
|
||
<link rel="stylesheet" href="./glossary.css" />
|
||
<link rel="stylesheet" href="./theme.css" />
|
||
<script type="text/javascript" src="jquery.js"></script>
|
||
<script type="text/javascript" src="helpman_settings.js"></script>
|
||
<script type="text/javascript" src="helpman_topicinit.js"></script>
|
||
|
||
<script type="text/javascript" src="highlight.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){highlight();});
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
|
||
|
||
<header class="header elma-365">
|
||
<div class="container">
|
||
<a class="header__logo" href="https://brix365.com/en/help">
|
||
<img src="./logo-en.svg" alt="header logo">
|
||
</a>
|
||
<!-- <div class="hero__search-form" id="search-panel">
|
||
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
|
||
<label class="search-form__label">
|
||
<span id="reset-search" class="search__icon"></span>
|
||
<input class="search-form__input" type="text">
|
||
</label>
|
||
<input class="search-form__submit" type="submit" value="Submit">
|
||
</form>
|
||
</div> -->
|
||
|
||
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
|
||
<div class="hero__search">
|
||
<a href="#" id="search-icon" class="hero__search-icon">
|
||
<img src="search-icon-white.svg" alt="search string">
|
||
</a>
|
||
<a href="#" id="side-menu-icon" class="hero__side-icon">
|
||
<img src="side_menu.svg" alt="side menu">
|
||
</a>
|
||
</div>
|
||
<div class="header__navi">
|
||
|
||
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<main class="main container">
|
||
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar__header">
|
||
<a class="header__logo" href="https://brix365.com/en/help">
|
||
<img src="./logo-light-en.svg">
|
||
</a>
|
||
<span class="sidebar__close elma-365-close" id="close"></span>
|
||
</div>
|
||
<div class="sidebar__wrapper" id="side-menu">
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
<article class="article" id="article">
|
||
<div class="article-inner">
|
||
<div class="content">
|
||
<header class="article__header">
|
||
<div class="article__bread" style="display:flex; gap:10px;">
|
||
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
|
||
|
||
<div class="topic__breadcrumbs">
|
||
<p>Low-code designer > <a href="interface_settings.html">Set up interfaces</a> > <a href="client_server_scripts.html">Scripts in widgets</a> / Set up custom validation</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Set up custom validation</span></h1>
|
||
</div>
|
||
|
||
</header>
|
||
<section class="article__content">
|
||
<div class="scroll-top-inner">
|
||
<a href="#h1-article" class="scroll-top"></a>
|
||
</div>
|
||
<!-- Placeholder for topic body. -->
|
||
<p 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 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" 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" 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 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 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 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 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 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" 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" 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" 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" 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">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="widget_functions.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">widget_functions.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="widget-scripts.html">
|
||
<span class="bottom-nav__link">widget-scripts.html</span> <span
|
||
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
|
||
</a>
|
||
|
||
</div>
|
||
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
|
||
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
|
||
|
||
</section>
|
||
</div>
|
||
<aside class="article__sidebar" style="display:none">
|
||
<input type="checkbox" />
|
||
<div class="article__arrow"></div>
|
||
<div class="table-of-contents elma365-right" id="toc2Content">
|
||
<h3 class="h3-toc">In this topic</h3>
|
||
<nav id="toc2"></nav>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
<footer class="footer">
|
||
<div class="footer-container">
|
||
<div class="footer-mobile">
|
||
|
||
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
|
||
|
||
|
||
</div>
|
||
<div class="footer-wrap">
|
||
|
||
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
|
||
|
||
<div class="footer-flex-b">
|
||
<span class="footer-copy">© 2025 BRIX</span>
|
||
<ul class="footer-list">
|
||
|
||
<li class="footer-item">
|
||
<a href="#" class="arrow-top" style="display: block;"></a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
<iframe name="hmnavigation" style="display:none!important"></iframe>
|
||
<script src="./jquery-ui.js"></script>
|
||
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
|
||
<script src="./jquery.tocify.min.js"></script>
|
||
<script src="./TypoReporter.min.js"></script>
|
||
<script src="./google-search.js"></script>
|
||
<script src="./main.js"></script>
|
||
</body>
|
||
|
||
</html>
|