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

update help elma

Browse Source
This commit is contained in:
koziavin
2025-05-27 21:32:35 +04:00
parent a6b05d6789
commit 898b22bf32
4500 changed files with 89372 additions and 120699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
platform/360029250931.html
View File

@ -1,20 +1,19 @@
<!DOCTYPE html>
<html lang="ru">
<html lang="en">
<head>
<title>Шаблон формы</title>
<title>Form templates</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="With form templates you can flexibly configure custom forms: change the layout, add new buttons and widgets, and use scripts. This allows you to set up:" />
<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 дизайнер &gt; <a href="create_form.html">Создание форм</a> / Шаблон формы</p>
<p>Low-code designer &gt; <a href="create_form.html">Custom forms</a> / Form templates</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1" style="text-align: center;"><span class="f_Heading1" style="font-size: 32px;">Шаблон формы</span></h1>
<div class="topic__title"><h1 class="p_Heading1" style="text-align: center; line-height: 1.20; margin: 19px 0 19px 0;"><span class="f_Heading1" style="font-size: 32px;">Form templates</span></h1>
</div>
</header>
@ -111,92 +109,94 @@
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-weight: bold;">Шаблон формы</span> позволяет гибко настроить внешний вид формы — добавить на неё дополнительные кнопки и виджеты, а также применить скрипт.</p>
<p class="p_Normal" style="margin: 14px 0 0 0;">Таким образом можно настроить:</p>
<p class="p_Normal" style="line-height: 1.20; margin: 14px 0 0 0;">With <span style="font-weight: bold;">form templates </span>you can flexibly configure custom forms: change the layout, add new buttons and widgets, and use scripts. This allows you to set up:</p>
<ul style="list-style-type:disc">
<li class="p_Normal" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">формы создания, просмотра, редактирования <a href="360009918011.html" class="topiclink">элемента приложения</a>;</li><li class="p_Normal">в бизнес-процессе — формы <a href="360012495611.html#form" class="topiclink">задачи</a>, <a href="360012496011.html#form_tab" class="topiclink">стартового события</a>, задачи <a href="360010366380.html#form" class="topiclink">согласования</a> и <a href="360010385600.html#form" class="topiclink">ознакомления</a>, а также <a href="360012498891.html#form" class="topiclink">карточки экземпляра</a> процесса.</li></ul>
<p class="p_Normal">Можно создать несколько шаблонов одной формы. Кроме того, исходные настройки формы сохраняются, вы всегда можете применить шаблон по умолчанию. </p>
<h2 class="p_Heading2"><a id="create_template" class="hmanchor"></a><span class="f_Heading2">Настроить шаблон в дизайнере</span></h2>
<p style="margin: 14px 0 0 0;">Шаблоны создаются в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a>. Чтобы открыть дизайнер:</p>
<li class="p_Normal" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">Forms for creating, viewing, and editing <a href="360009918011.html" class="topiclink">app items</a>.</li><li class="p_Normal" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">In a <a href="360008121732.html" class="topiclink">business process</a>: forms of a <a href="360012495611.html#form" class="topiclink">task</a>, <a href="360012496011.html" class="topiclink">start event</a>, <a href="360010366380.html#form" class="topiclink">approval</a> and <a href="360010366380.html#form" class="topiclink">information</a> tasks, as well as <a href="360012498891.html#form" class="topiclink">process instance</a> pages.</li></ul>
<p class="p_Normal" style="line-height: 1.20; margin: 14px 0 0 0;">&nbsp;</p>
<h2 class="p_Heading2"><span class="f_Heading2">Set up a template in interface designer</span></h2>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">Templates are created in the </span><span style="font-size: 15px; color: #394149;"><a href="interface_designer.html" class="topiclink">interface designer</a></span><span style="font-size: 15px; color: #394149;">. To open the designer:</span></p>
<ol style="list-style-type:upper-roman">
<li value="1" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">Перейдите к настройкам шаблона:</li></ol>
<li value="1" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">First, open the template settings:</span></li></ol>
<ul style="list-style-type:disc">
<li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">для настройки формы приложения откройте раздел и нажмите на значок шестерёнки рядом с названием приложения. Выберите пункт <span style="font-weight: bold;">Настройка формы</span>. Затем перейдите в <a href="360028941032.html" class="topiclink">расширенный режим настройки форм</a> и откройте вкладку нужной формы: <span style="font-weight: bold;">Создание</span>, <span style="font-weight: bold;">Просмотр</span>, <span style="font-weight: bold;">Редактирование</span>;</li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">если вы создаёте форму задачи, стартового события, задачи согласования или ознакомления в бизнес-процессе, дважды нажмите на элемент на схеме процесса и перейдите на вкладку <a href="360012495991.html#create-tamplate" class="topiclink">Форма</a>.</li></ul>
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">For an app item form, click on the gear icon next the app name in the workspace menu. Select </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Form settings</span><span style="font-size: 15px; color: #394149;">. Then switch to the </span><span style="font-size: 15px; color: #394149;"><a href="360028941032.html" class="topiclink">advanced mode</a></span><span style="font-size: 15px; color: #394149;"> and open a tab that corresponds to the form you wish to set up: </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Create</span><span style="font-size: 15px; color: #394149;">, </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">View</span><span style="font-size: 15px; color: #394149;">, or </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Edit</span><span style="font-size: 15px; color: #394149;">.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">For a process task, start event form, or </span> <a href="360010366380.html#form" class="topiclink">approval</a> and <a href="360010366380.html#form" class="topiclink">information</a><span style="font-size: 15px; color: #394149;"> task form, double click on the </span><span style="font-size: 15px; color: #394149;"><a href="360012265552.html" class="topiclink">element</a> on the process diagram and go the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Form</span><span style="font-size: 15px; color: #394149;"> tab</span><span style="font-size: 15px; color: #394149;">.</span></li></ul>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><a id="edit_tab" class="hmanchor"></a></p>
<ol style="list-style-type:upper-roman" start="2">
<li value="2" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><a id="edit_tab" class="hmanchor"></a>Нажмите <span style="font-weight: bold;">&lt;По умолчанию&gt;</span>, затем кнопку <span style="font-weight: bold;">+</span> <span style="font-weight: bold;">Создать форму</span>, чтобы перейти в дизайнер интерфейсов.</li></ol>
<p class="p_Normal"><img alt="form-template-2" width="893" height="454" style="margin:0;width:893px;height:454px;border:none" src="form-template-2.png"/></p>
<p class="p_Normal">При создании формы приложения откроется окно, в котором можно ввести название нового шаблона, добавить описание и выбрать иконку. </p>
<li value="2" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">Click the</span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;"> Default</span><span style="font-size: 15px; color: #394149;"> link. The </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Create form</span><span style="font-size: 15px; color: #394149;"> button appears; click on it to open the </span><span style="font-size: 15px; color: #394149;"><a href="https://brix365.com/en/products/low-code/" target="_blank" class="weblink">low-code designer</a></span><span style="font-size: 15px; color: #394149;">. If you are configuring an app form, a window opens for you to edit the default name of the form if necessary.</span><img alt="form-template-1" width="1053" height="525" style="margin:0;width:1053px;height:525px;border:none" src="form-template-1.png"/></li><li value="3" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="color: #394149;">To edit an already existing template, click </span><span style="font-weight: bold; color: #394149;">Edit form</span><span style="color: #394149;"> on the desired tab</span><span style="font-size: 15px; color: #394149;">.</span></li></ol>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">You can also access the created template by selecting </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Interfaces</span><span style="font-size: 15px; color: #394149;"> from the workspace or app menu, or in </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Administration</span><span style="font-size: 15px; color: #394149;"> &gt; </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Interfaces</span><span style="font-size: 15px; color: #394149;">. Then click the name of the form.</span></p>
<p class="p_Normal" style="line-height: 1.20; margin: 14px 0 0 0;"><a id="form_template" class="hmanchor"></a></p>
<h2 class="p_Heading2"><span class="f_Heading2">Designer tabs</span></h2>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">The low-code designer where forms are configured has several tabs: </span><span style="font-weight: bold; color: #394149;">Template</span><span style="font-size: 15px; color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Context</span><span style="font-size: 15px; color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Scripts</span><span style="font-size: 15px; color: #394149;">, </span><span style="font-weight: bold; color: #394149;">History</span><span style="font-size: 15px; color: #394149;">, </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Settings</span><span style="font-size: 15px; color: #394149;">, and </span><span style="font-weight: bold; color: #394149;">Files</span><span style="font-size: 15px; color: #394149;">.</span></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Template</span><span style="font-size: 15px; color: #394149;">. Here you can configure your form: edit the header, change the layout of elements, and add new buttons, widgets, and properties. You can make the form dynamic. In this case, the fields will be hidden or shown to the users depending on the data they enter. You can learn more in </span><span style="font-size: 15px; color: #394149;"><a href="360029574371.html" class="topiclink">Dynamic forms</a></span><span style="font-size: 15px; color: #394149;">.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Context</span><span style="font-size: 15px; color: #394149;">. Here you can add properties that will be used in the template and </span><span style="font-size: 15px; color: #394149;"><a href="client_server_scripts.html" class="topiclink">scripts</a></span><span style="font-size: 15px; color: #394149;">. To add a new property, click </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">+Add</span><span style="font-size: 15px; color: #394149;"> and specify its parameters.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Scripts</span><span style="font-size: 15px; color: #394149;">. Here you can write a script to determine the widget's behavior, for example, to display a pop-up when the user hovers the mouse over a certain area of the form or page. You can learn more in </span><span style="font-size: 15px; color: #394149;"><a href="client_server_scripts.html" class="topiclink">Scripts in widgets</a> and <a href="https://tssdk.brix365.com/en/index.html" target="_blank" class="weblink">BRIX TS SDK</a></span><span style="font-size: 15px; color: #394149;">.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">History</span><span style="font-size: 15px; color: #394149;">. This tab</span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;"> </span><span style="font-size: 15px; color: #394149;">displays all the published versions of a configured app, task, or start event form. You can view the time, author, and comment left upon publication, as well as restore one of the old versions. To do that, select the version in the list and click </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Apply version</span><span style="font-size: 15px; color: #394149;">, then confirm your action. The current draft will be replaced. The changes that you have saved but haven't yet published will be lost. To make this restored version available to users, publish it. When working with a task form template, you need to publish the business process that the task belongs to.</span></li></ul>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Settings</span><span style="font-size: 15px; color: #394149;">. </span><span style="font-size: 15px; color: #394149;">Here you can </span></li></ul>
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
<li style="text-align: justify; line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">Disable display of the widget with validation errors in case of incorrect filling of fields on the form.</span></li><li style="text-align: justify; line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">Allow placing a custom widget on the top or sidebar and configure widget display in the interface designer.</span></li><li style="text-align: justify; line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">Specify script functions that you want to apply when a widget is initialized, when conditions for its display are checked, or when the form is validated. The default functions for displaying a widget are </span><code><b>onInit()</b></code><span style="font-size: 15px; color: #394149;">, </span><code><b>canRender()</b></code><span style="font-weight: bold; color: #394149;"> </span><span style="color: #394149;">and </span><code><b>onLoad()</b></code><span style="color: #394149;">,</span><span style="font-weight: bold; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"> but you can replace them with other functions.</span></li><li style="text-align: justify; line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">Allow global constants and widgets from system workspaces to be used in scripts.</span></li></ul></li></ul>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Files</span><span style="font-size: 15px; color: #394149;">. Here you can add libraries and custom functions in </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Javascript </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">to use them in your scripts</span><span style="font-size: 15px; color: #394149;">.</span></li></ul>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">You can learn more about each tab in </span><span style="font-size: 15px; color: #394149;"><a href="designer-tabs.html" class="topiclink">Designer tabs</a></span><span style="font-size: 15px; color: #394149;">.</span></p>
<h2 style="line-height: 1.20;"><a id="addingawidgettothetemplate" class="hmanchor"></a><span style="font-weight: bold; color: #0a141e;">Add a widget to the form</span></h2>
<p style="line-height: 1.20; margin: 19px 0 0 0;"><span style="color: #394149;">A</span><span style="font-weight: bold; color: #394149;"> widget</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;">is an interface element with particular functionality for such activities as uploading a file, displaying instructions, activity streams, user lists, etc. Widgets help create user-friendly forms. They allow you to design the layout of fields, add buttons, and set up interface behavior for user interactions.</span></p>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">To add a widget to your form, go to the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Template</span><span style="font-size: 15px; color: #394149;"> tab. You ca place a widget:</span></p>
<ul style="list-style-type:disc">
<li class="p_Normal" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">In the main part of the form. Drag the widget from the right panel onto the form template. </span></li></ul>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="page-widget9" width="1512" height="817" style="margin:0;width:1512px;height:817px;border:none" src="page-widget9.png"/></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">On the sidebar. Drag the widget to the sidebar or click +</span><span style="font-size: 15px; font-weight: bold; color: #394149;">Widget</span><span style="font-size: 15px; color: #394149;">. <a href="designer-tabs.html#system-functions" class="topiclink">Placing a custom widget on the sidebar</a> is enabled when you create it.</span></li></ul>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="form_tmplt_7" width="815" height="394" style="margin:0;width:815px;height:394px;border:none" src="form_tmplt_7.png"/></p>
<ul style="list-style-type:disc">
<li class="p_Normal" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">On the top panel. Drag the widget to the top panel or press + </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Button</span><span style="font-size: 15px; color: #394149;">. <a href="designer-tabs.html#system-functions" class="topiclink">Placing a custom widget on the top panel</a> can be enabled when creating it.</span></li></ul>
<p class="p_Normal" style="margin: 14px 0 0 0;"><img alt="form_tempaltes_01" width="822" height="670" style="margin:0;width:822px;height:670px;border:none" src="form_tempaltes_01.png"/></p>
<p class="p_Normal" style="margin: 14px 0 0 0;">&nbsp;</p>
<ul style="list-style-type:disc">
<li class="p_Normal" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">The widget settings will open. You can read more about the configuration of each widget in </span><span style="font-size: 15px; color: #394149;"><a href="360028901811.html" class="topiclink">Widget types</a></span><span style="font-size: 15px; color: #394149;">.</span></li></ul>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">When working with widgets you can use the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Undo</span><span style="font-size: 15px; color: #394149;"> and </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Redo</span><span style="font-size: 15px; color: #394149;"> buttons available in the top toolbar.</span></p>
<p class="p_Normal" style="margin: 14px 0 0 0;"><img alt="page-widget11" width="128" height="56" style="margin:0;width:128px;height:56px;border:none" src="page-widget11.png"/></p>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">The </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Undo</span><span style="font-size: 15px; color: #394149;"> button cancels you last action such as adding, moving, deleting a widget, or changing its settings. The </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Redo</span><span style="font-size: 15px; color: #394149;"> button repeats the canceled action.</span></p>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">If you are configuring a complex interface with a large number of widgets, you can use </span><span style="font-size: 15px; color: #394149;"><a href="canvas-navigation.html" class="topiclink">navigation</a> to find the required item fast</span><span style="font-size: 15px; color: #394149;">.</span><a id="hide-side-panel" class="hmanchor"></a></p>
<h3 class="p_Heading3"><span class="f_Heading3">Hide the side panel from the template</span></h3>
<p class="p_Normal" style="margin: 7px 0 0 0;"><span style="font-size: 15px; color: #394149;">Every template has a default <a href="right-side-panel.html" class="topiclink">sidebar</a>. To hide it, click on an empty space on the canvas: the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Modal window</span><span style="font-size: 15px; color: #394149;"> label will appear in the top tight corner. Click on the gear icon on the label and disable the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Show sidebar</span><span style="font-size: 15px; color: #394149;"> option in the settings. Save the changes. The sidebar will no longer be displayed.</span></p>
<p class="p_Normal" style="line-height: 1.36; margin: 16px 0 0 0;"><img alt="page-widget12" width="1125" height="635" style="margin:0;width:1125px;height:635px;border:none" src="page-widget12.png"/></p>
<p style="line-height: 1.20; margin: 11px 0 16px 0;"><span style="font-size: 15px; color: #394149;">You can also bind the sidebar visibility to a context variable. It will then be shown or hidden depending on the variable value. You can read more about it in</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"><a href="common_widget_settings.html" class="topiclink">System widget settings</a></span><span style="font-size: 15px; color: #394149;">.</span></p>
<h2 class="p_Heading2"><a id="addingpropertytotheform" class="hmanchor"></a><span class="f_Heading2">Add a property to the form</span><span class="f_Heading3" style="font-size: 19px;"> </span></h2>
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">You can fill a template with app or process properties, system properties of widgets, as well as variables added on the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Context</span><span style="font-size: 15px; color: #394149;"> tab. For the variable of the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">App</span><span style="font-size: 15px; color: #394149;"> or </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Users</span><span style="font-size: 15px; color: #394149;"> type with the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">One</span><span style="font-size: 15px; color: #394149;"> subtype, you can use nested fields.</span></p>
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">Go to the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Properties</span><span style="font-size: 15px; color: #394149;"> panel on the right-hand side of the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Template</span><span style="font-size: 15px; color: #394149;"> tab. Then drag a property to the main canvas or the side panel.</span></p>
<p class="p_Normal"><img alt="page-widget-14" width="1092" height="407" style="margin:0;width:1092px;height:407px;border:none" src="page-widget-14.png"/></p>
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">When dragged to the canvas, properties are placed into a container called </span><span style="font-size: 15px; color: #394149;"><a href="form_line_widget.html" class="topiclink">Field</a></span><span style="font-size: 15px; color: #394149;">. A </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Field</span><span style="font-size: 15px; color: #394149;"> can be placed inside other elements.</span></p>
<h3 class="p_Heading3"><span class="f_Heading3">Hide property name</span></h3>
<p class="p_Normal" style="margin: 7px 0 0 0;"><span style="font-size: 15px; color: #394149;">In order to make the form more lightweight, you can hide:</span></p>
<ul style="list-style-type:disc">
<li class="p_Normal" style="margin-top: 7px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">names of properties, leaving just the fields;</span></li><li class="p_Normal" style="margin-top: 7px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">empty fields that are read-only.</span></li></ul>
<p class="p_Normal" style="margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">To do that:</span></p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-size: 15px; color: #394149;">Select the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Field</span><span style="font-size: 15px; color: #394149;"> that contains the property that you have added to the form. Then click on the gear icon.</span></li></ol>
<p class="p_Normal" style="margin: 14px 0 0 0;"><img alt="page-widget7" width="960" height="371" style="margin:0;width:960px;height:371px;border:none" src="page-widget7.png"/></p>
<ol style="list-style-type:upper-roman" start="2">
<li value="2" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-size: 15px; color: #394149;">In the window that opens:</span></li></ol>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-size: 15px; color: #394149;"> deselect the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Show name on form</span><span style="font-size: 15px; color: #394149;"> box if you want to display the field without a </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; color: #394149;">label</span><span style="font-size: 15px; color: #394149;">;</span></li><li style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;"> select the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Hide if the field is empty</span><span style="font-size: 15px; color: #394149;"> box if you want to hide an empty field marked as Read Only.</span><span style="font-size: 15px; color: #394149;"> </span></li></ul>
<p class="p_Normal" style="margin: 7px 0 0 0;"><img alt="form_tmplt_6" width="968" height="476" style="margin:0;width:968px;height:476px;border:none" src="form_tmplt_6.png"/></p>
<ol style="list-style-type:upper-roman" start="3">
<li value="3" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">Для перехода к настройке уже существующего шаблона выберите его название и нажмите кнопку <span style="font-weight: bold;">Редактировать форму</span> на соответствующей вкладке.</li></ol>
<p style="margin: 14px 0 0 0;">Также перейти к созданному шаблону можно, выбрав в меню раздела или приложения пункт <span style="font-weight: bold;">Интерфейсы</span>, или в разделе <span style="font-weight: bold;">Администрирование &gt; Интерфейсы</span>. Затем нажмите на название формы.</p>
<p style="margin: 14px 0 0 0;"><img alt="360029250931-2" width="654" height="146" style="margin:0;width:654px;height:146px;border:none" src="360029250931-2.png"/></p>
<h3 class="p_Heading3"><a id="designer-tabs" class="hmanchor"></a><span class="f_Heading3">Вкладки дизайнера</span></h3>
<p style="margin: 14px 0 0 0;">Low-code дизайнер, в котором происходит настройка формы, состоит из нескольких вкладок: <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> и <span style="font-weight: bold;">Файлы</span>.</p>
<li value="3" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-size: 15px; color: #394149;">Click </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Save</span><span style="font-size: 15px; color: #394149;">.</span></li></ol>
<p class="p_Normal" style="margin: 7px 0 7px 0;"><span style="font-size: 15px; color: #394149;">Please note that this option is only available for the properties that you dragged from the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Properties</span><span style="font-size: 15px; color: #394149;"> panel and placed in the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Field</span><span style="font-size: 15px; color: #394149;"> container. </span></p>
<h2 class="p_Heading2"><span class="f_Heading2">Check and apply a template</span></h2>
<p class="p_Normal" style="line-height: 1.36;"><span style="font-size: 15px; color: #394149;">The top toolbar has controls for working with a completed template:</span></p>
<ul style="list-style-type:disc">
<li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Шаблон</span> — здесь вы можете полностью настроить форму: отредактировать её заголовок, изменить кнопки или создать новые, а также добавить виджеты и свойства. Форму можно сделать динамической — поля на форме будут показываться или скрываться в зависимости от введённых пользователем данных. Подробнее об этом читайте в статье <a href="360029574371.html" class="topiclink">«Динамические формы»</a>;</li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Контекст</span> — здесь<span style="font-weight: bold;"> </span>добавляются свойства, которые можно выносить на поле шаблона, а также использовать при написании <a href="client_server_scripts.html" class="topiclink">скриптов</a>. Чтобы создать свойство, нажмите кнопку <span style="font-weight: bold;">+ Добавить</span> и укажите его параметры;</li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Скрипты</span> — на этой вкладке<span style="font-weight: bold;"> </span>вы можете написать скрипт, чтобы настроить поведение виджетов, например, показать всплывающее окно при наведении курсора на определенную область формы или страницы. Подробнее об этом читайте в статье <a href="https://elma365.com/ru/help/client_server_scripts.html" target="_blank" class="weblink">«Скрипты в виджетах»</a> и в <a href="https://tssdk.elma365.com/ru/latest/index.html" target="_blank" class="weblink">справке ELMA365 TS SDK</a>;</li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">История </span>— на этой вкладке отображаются все опубликованные версии настроенной формы приложения<span style="font-family: Inter;">, задачи или стартового события</span>. Вы можете посмотреть время, автора и комментарий, оставленный при публикации, а также восстановить одну из предыдущих версий формы. Для этого выберите версию в списке, нажмите кнопку <span style="font-weight: bold;">Применить версию</span> и подтвердите действие. Текущий черновик формы будет заменён. Все сохранённые, но не опубликованные изменения будут утеряны. Чтобы восстановленная версия стала доступна пользователям, снова опубликуйте форму приложения. При работе с шаблоном формы задачи необходимо снова опубликовать бизнес-процесс, к которому относится задача;</li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Настройки</span> — здесь можно:<ul style="list-style-type:circle">
<li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">отключить отображение виджета с ошибками валидации при некорректном заполнении полей на форме;</span></li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">разрешить размещение пользовательского виджета на верхней или боковой панели и настроить отображение виджета в дизайнере интерфейсов;</li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">указать функции из скриптов, которые вы хотите применять при отображении виджета и валидации формы. По умолчанию в процессе отображения виджета выполняются функции</span><span style="font-family: 'Courier New',Courier,monospace; font-weight: bold;"> </span><code><b>onInit()</b></code><span style="font-family: Inter;">, </span><code><b>canRender()</b></code><span style="font-family: Inter;"> и </span><code><b>onLoad()</b></code><span style="font-family: Inter;">, но вы можете заменить их другими функциями;</span></li><li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">разрешить использовать в скриптах глобальные константы и виджеты из разделов системы;</span></li></ul>
<li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Файлы</span> — на этой вкладке вы можете добавить библиотеки и пользовательские функции на языке Javascript, чтобы обращаться к ним в клиентских скриптах.</li></ul>
<p style="margin: 14px 0 0 0;">Подробнее о каждой вкладке читайте в статье <a href="designer-tabs.html" class="topiclink">«Вкладки дизайнера»</a>.</p>
<h2 class="p_Heading2"><a id="add-widget" class="hmanchor"></a><span class="f_Heading2">Добавление виджета на форму</span></h2>
<p class="p_Normal" style="margin: 19px 0 0 0;"><span style="font-weight: bold;">Виджет</span> — это элемент интерфейса с определёнными функциональными возможностями для решения таких задач, как загрузка файла, отображение инструкции, ленты, списка пользователей и т. д. Виджеты позволяют создать максимально удобную для работы форму — наглядно разместить поля, добавить кнопки и настроить взаимодействие пользователя с интерфейсом.</p>
<p style="margin: 14px 0 0 0;">Чтобы добавить виджет на форму, перейдите на вкладку <span style="font-weight: bold;">Шаблон</span>. <span style="font-family: Inter;">Вы можете разместить виджет:</span></p>
<ul style="list-style-type:disc">
<li style="margin-top: 19px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">в основной части формы — перетащите виджет с правой панели на шаблон формы;</span></li></ul>
<p class="p_Normal" style="margin: 14px 0 0 34px;"><img alt="template1" width="1390" height="708" style="margin:0;width:1390px;height:708px;border:none" src="template1.png"/></p>
<ul style="list-style-type:disc">
<li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">на боковой панели — перетащите виджет на боковую панель или нажмите на ссылку </span><span style="font-family: Inter; font-weight: bold;">+ Виджет</span><span style="font-family: Inter;">. </span><span style="font-family: Inter; color: #0000ff;"><a href="designer-tabs.html#show-on-sidebar" class="topiclink">Размещение пользовательского виджета на боковой панели</a></span><span style="font-family: Inter;"> включается при его создании;</span></li></ul>
<p class="p_Normal" style="margin: 14px 0 0 34px;"><img alt="form-template-3" width="918" height="545" style="margin:0;width:918px;height:545px;border:none" src="form-template-3.png"/></p>
<ul style="list-style-type:disc">
<li style="margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">на верхней панели — перенесите виджет на верхнюю панель или нажмите </span><span style="font-family: Inter; font-weight: bold;">+ Кнопка</span><span style="font-family: Inter;">. </span><span style="font-family: Inter; color: #0000ff;"><a href="designer-tabs.html#show-on-top-toolbar" class="topiclink">Размещение пользовательского виджета на верхней панели</a></span><span style="font-family: Inter;"> можно разрешить при его создании.</span></li></ul>
<p style="margin: 14px 0 0 34px;"><img alt="form-template-5" width="975" height="534" style="margin:0;width:975px;height:534px;border:none" src="form-template-5.png"/></p>
<p style="margin: 14px 0 0 0;">Откроется окно настройки виджета. Подробнее о каждом виджете вы можете прочитать в разделе <a href="tabs.html" class="topiclink">«Типы виджетов»</a>.</p>
<p style="margin: 14px 0 0 0;">При работе с виджетами вы можете использовать кнопки <span style="font-weight: bold;">Отменить</span> и <span style="font-weight: bold;">Повторить</span>, расположенные на верхней панели инструментов.</p>
<p style="margin: 14px 0 0 0;"><img alt="undo_redo" width="136" height="52" style="margin:0;width:136px;height:52px;border:none" src="undo_redo.png"/></p>
<p style="margin: 14px 0 0 0;">Кнопка <span style="font-weight: bold;">Отменить </span>позволяет отменить последнее ваше действие (добавление, перемещение или удаление виджета, изменение его настроек). Кнопка <span style="font-weight: bold;">Повторить</span> выполняет отмененное действие повторно.</p>
<p style="margin: 14px 0 0 0;">Если вы настраиваете сложный интерфейс с большим количеством виджетов, вы можете воспользоваться функцией <a href="canvas-navigation.html" class="topiclink">навигации по полю для моделирования</a>, чтобы быстро найти нужный элемент формы.</p>
<h3 class="p_Heading3"><a id="hide-side-panel" class="hmanchor"></a><span class="f_Heading3">Скрыть боковую панель на шаблоне формы</span></h3>
<p style="margin: 7px 0 16px 0;">По умолчанию на шаблоны добавлен виджет <a href="right-side-panel.html" class="topiclink">Правая боковая панель</a>. Чтобы скрыть боковую панель, нажмите на свободное от виджетов место на поле для моделирования. В правом верхнем углу появится ссылка <span style="font-weight: bold;">Модальное окно</span>. Нажмите на значок шестеренки и в открывшемся окне выключите опцию <span style="font-weight: bold;">Показывать боковую панель</span>. Сохраните настройки. Боковая панель будет скрыта.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="hide-side-panel-1" width="704" height="351" style="margin:0;width:704px;height:351px;border:none" src="hide-side-panel-1.png"/></p>
<p class="p_Normal">Кроме того, вы можете связать видимость панели с контекстной переменной. Она будет показываться при определенном значении переменной. Подробнее о том, как это сделать, читайте в статье <a href="common_widget_settings.html" class="topiclink">«Системные настройки виджетов»</a>.</p>
<h2 class="p_Heading2"><a id="add_property" class="hmanchor"></a><span class="f_Heading2">Добавление свойств на форму</span></h2>
<p style="margin: 19px 0 0 0;">Вы можете выносить на шаблон свойства приложения или бизнес-процесса, системные свойства виджетов, а также переменные, добавленные на вкладке <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 style="line-height: 1.28; margin: 0 0 11px 0;">На правой панели вкладки <span style="font-weight: bold;">Шаблон</span> перейдите на вкладку <span style="font-weight: bold;">Свойства</span>. Затем перетащите свойство на основную область формы или на боковую панель.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="template2" width="942" height="471" style="margin:0;width:942px;height:471px;border:none" src="template2.png"/></p>
<p style="margin: 14px 0 0 0;">При перетаскивании на форму свойства помещаются в виджет-контейнер, который называется <a href="form_line_widget.html" class="topiclink">Строка формы</a>. В свою очередь <span style="font-weight: bold;">Строка формы</span> может размещаться внутри других виджетов.</p>
<h3 class="p_Heading3"><a id="hide-property-name" class="hmanchor"></a><span class="f_Heading3">Скрыть название свойства или пустое поле</span></h3>
<p style="margin: 7px 0 7px 0;">Чтобы не перегружать рабочую область, вы можете скрывать на форме:</p>
<ul style="list-style-type:disc">
<li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">названия добавленных свойств, оставив только содержимое полей;</li><li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">пустые поля.</li></ul>
<p style="margin: 14px 0 0 0;">Для этого:</p>
<ol style="list-style-type:upper-roman">
<li value="1" style="margin-top: 14px; margin-right: 0; margin-bottom: 0;">Выделите элемент <span style="font-weight: bold;">Строка формы</span>, в котором размещаются вынесенные на форму свойства. Затем нажмите на значок шестерёнки.</li></ol>
<p style="margin: 14px 0 0 0;"><img alt="form-template-6" width="794" height="338" style="margin:0;width:794px;height:338px;border:none" src="form-template-6.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="2" style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">В открывшемся окне:</li></ol>
<ul style="list-style-type:disc">
<li class="p_Normal">чтобы отобразить на форме только содержимое поля без его названия, снимите флажок <span style="font-weight: bold;">Показывать название на форме</span>;</li></ul>
<ul style="list-style-type:disc">
<li class="p_Normal">чтобы скрыть на форме пустое поле, установите флажок <span style="font-weight: bold;">Скрывать, если не заполнено</span>.</li></ul>
<p style="margin: 7px 0 7px 34px;"><img alt="form-template-7" width="705" height="641" style="margin:0;width:705px;height:641px;border:none" src="form-template-7.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="3" style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Нажмите <span style="font-weight: bold;">Сохранить</span>.</li></ol>
<p style="margin: 7px 0 7px 0;">Обратите внимание, эти опции доступны только для полей, добавленных на форму с вкладки <span style="font-weight: bold;">Свойства</span> и располагающихся в виджете <span style="font-weight: bold;">Строка формы</span>.</p>
<h2 class="p_Heading2"><a id="save-publish" class="hmanchor"></a><span class="f_Heading2">Проверить и применить настроенный шаблон</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">На верхней панели дизайнера располагаются кнопки для работы с настроенным шаблоном:</p>
<ul style="list-style-type:disc">
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Проверить</span> — кнопка проверки настроенных виджетов на наличие ошибок в составлении;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Отладить </span>— кнопка доступна при настройке шаблона формы приложения. Нажав на нее, вы можете проверить, как будет выглядеть форма для пользователей. Подробнее об этом читайте в статье <a href="interface-debug.html" class="topiclink">«Отладить интерфейс в дизайнере»</a>.</li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы применить настроенный шаблон нажмите кнопку <span style="font-weight: bold;">Сохранить </span>на верхней панели. Если вы работаете с формой приложения, дополнительно нажмите кнопку <span style="font-weight: bold;">Опубликовать</span>, чтобы виджеты отобразились на формах и стали доступны пользователям. При публикации вы можете оставить комментарий.</p>
<p style="margin: 0 0 11px 0;">Каждая опубликованная версия шаблона будет отображаться в дизайнере интерфейсов на вкладке <span style="font-weight: bold;">История</span>. Вы можете посмотреть краткую информацию о версии, а также восстановить одну из предыдущих версий настроенного шаблона. Подробнее читайте в статье <a href="interface_designer.html" class="topiclink">«Дизайнер интерфейсов»</a>.</p>
<h2 class="p_Heading2"><a id="reuse-template" class="hmanchor"></a><span class="f_Heading2" style="font-size: 24px;">Повторное использование шаблона</span></h2>
<p class="p_Normal" style="margin: 19px 0 0 0;">Настроенную форму можно использовать повторно. Так, шаблон, который вы настроили для формы создания, можно использовать повторно на форме редактирования. Просто выберите его в выпадающем списке.</p>
<p class="p_Normal" style="margin: 14px 0 0 0;"><img alt="form-template-11" width="773" height="405" style="margin:0;width:773px;height:405px;border:none" src="form-template-11.png"/></p>
<p class="p_Normal" style="margin: 14px 0 0 0;">Теперь такие элементы, как виджеты, кнопки и заголовки, добавленные в шаблон создания, отобразятся на форме редактирования.</p>
<p class="p_Normal" style="margin: 14px 0 0 0;">Однако если список полей на вкладке <span style="font-weight: bold;">Редактирование</span> отличается от списка полей на вкладке <span style="font-weight: bold;">Создание</span>, поля на формах будут отличаться, несмотря на то что вы выбрали тот же шаблон.</p>
<p class="p_Normal" style="margin: 14px 0 0 0;">Чтобы набор полей на форме создания и редактирования был одинаковым, измените шаблон. Для этого нажмите <span style="font-weight: bold;">Редактировать форму</span> и удалите виджет <a href="element_standart_form_widget.html" class="topiclink">Стандартная форма элемента</a>, который отвечает за отображение полей на вкладках <span style="font-weight: bold;">Создание</span> и <span style="font-weight: bold;">Редактирование</span>.</p>
<p class="p_Normal" style="margin: 14px 0 0 0;"><img alt="form-template-1" width="637" height="324" style="margin:0;width:637px;height:324px;border:none" src="form-template-1.png"/></p>
<p style="margin: 14px 0 0 0;">Затем перейдите на вкладку <span style="font-weight: bold;">Свойства</span> и <a href="360029250931.html#add_property" class="topiclink">добавьте</a> нужные поля на поле для моделирования. Тогда и на форме создания, и на форме редактирования будет показан одинаковый набор полей.</p>
<p class="p_Normal" style="margin: 14px 0 0 0;">Аналогичным образом вы можете использовать настроенный шаблон процессной задачи в других задачах этого процесса.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Настроив один шаблон для нескольких форм приложения, вы можете <a href="display-widgets-in-reusable-template.html" class="topiclink">задать разные условия отображения виджетов</a> на этих формах с помощью скрипта.</p>
<li class="p_Normal" style="margin-top: 11px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold; color: #394149;">Check</span><span style="color: #394149;">. You can check the customized widgets for errors</span><span style="font-size: 15px; color: #394149;">;</span></li><li class="p_Normal" style="margin-top: 11px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold; color: #394149;">Debug</span><span style="color: #394149;">.</span><span style="font-weight: bold; color: #394149;"> </span><span style="font-size: 15px; color: #394149;">This control is available only for app form templates. It allows you to check what the form will look like in the interface. You can learn more in </span><span style="font-size: 15px; color: #394149;"><a href="interface-debug.html" class="topiclink">Debugging an interface</a></span><span style="font-size: 15px; color: #394149;">;</span></li></ul>
<p class="p_Normal" style="line-height: 1.36; margin: 11px 0 0 0;"><span style="font-size: 15px; color: #394149;">To apply the template that you have configured, click </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Save</span><span style="font-size: 15px; color: #394149;"> in the top toolbar.</span></p>
<p class="p_Normal" style="line-height: 1.36; margin: 11px 0 0 0;"><span style="font-size: 15px; color: #394149;">For app forms, additionally click </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Publish</span><span style="font-size: 15px; color: #394149;"> so that widgets become available to users. When publishing, you can leave a comment about the changes that you have made.</span></p>
<p class="p_Normal" style="margin: 11px 0 0 0;"><span style="font-size: 15px; color: #394149;">Each published version is shown on the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">History</span><span style="font-size: 15px; color: #394149;"> tab of the interface designer. Here you can see brief information about each version and restore one of the versions. Read more in </span><span style="font-size: 15px; color: #394149;"><a href="interface_designer.html" class="topiclink">Interface designer</a></span><span style="font-size: 15px; color: #394149;">.</span></p>
<h2 style="line-height: 1.20;"><a id="reuse-template" class="hmanchor"></a></h2>
<h2 class="p_Heading2"><span class="f_Heading2">Reuse a template</span></h2>
<p style="line-height: 1.20; margin: 19px 0 0 0;"><span style="font-size: 15px; color: #394149;">You can reuse a template multiple times. For example, a template configured for the view form can be used for the edit form as well. To reuse a template simply select it in the drop-down list.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="template-widget13" width="1183" height="681" style="margin:0;width:1183px;height:681px;border:none" src="template-widget13.png"/></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">After that, such elements as widgets, buttons, and headers added to the view form will be displayed on the edit form as well.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">However, if the lists of fields on the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Create</span><span style="font-size: 15px; color: #394149;"> and </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Edit</span><span style="font-size: 15px; color: #394149;"> tabs are different, the fields on the forms will also differ even if the same template is used.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">If you want to use the same set of fields on both the Create and Edit forms, edit the template. Click Edit form and delete the</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"><a href="element_standart_form_widget.html" class="topiclink">Standard form widget</a></span><span style="font-size: 15px; color: #394149;"> </span>since it is the one that displays the fields from the <span style="font-weight: bold;">Create</span> and <span style="font-weight: bold;">Edit</span> tabs.</p>
<p class="p_Normal" style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="FT12" width="576" height="274" style="margin:0;width:576px;height:274px;border:none" src="ft12.png"/></p>
<p class="p_Normal" style="line-height: 1.20; margin: 14px 0 0 0;">Then open the <span style="font-weight: bold;">Properties</span> tab and <a href="360029250931.html#addingpropertytotheform" class="topiclink">add</a> the fields that you need to the canvas. With such settings, both the Create and Edit forms will feature the same set of fields.</p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-size: 15px; color: #394149;">In a similar way, you can reuse a process task template in other tasks of the process.</span></p>
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">By creating one template for several app forms you can use a script to set different conditions for displaying widgets on these forms.</span></p>
<div class="bottom-nav">
@ -213,7 +213,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>
@ -221,7 +221,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>
@ -232,63 +232,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">&copy; 2025
ELMA365
</span>
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</div>
<div class="footer-line">
<div class="footer-line-copy">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
</div>
<ul class="footer-list">
<li class="footer-item"><a href="https://elma365.com/ru/" target="_blank" class="footer-link" style="color: #0D4A75;"><img src="browse.svg" alt="browse icon" class="footer-img">elma365.com</a></li><li class="footer-item"><a href="https://www.youtube.com/user/ELMABPM" target="_blank" class="footer-link"><img src="yt.svg" alt="youtube icon" class="footer-img"></a></li><li class="footer-item"><a href="https://vk.com/elma_bpm" target="_blank" class="footer-link"><img src="vk.svg" alt="vk icon" class="footer-img"></a></li><li class="footer-item"><a href="https://t.me/elmaday" target="_blank" class="footer-link"><img src="tg.svg" alt="telegram icon" class="footer-img"></a></li><li class="footer-item"><a href="https://dzen.ru/elma" target="_blank" class="footer-link"><img src="dzen.svg" alt="dzen icon" class="footer-img"></a></li>
<li class="footer-item">
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</li>
</ul>
</div>
</div>
<div class="footer-wrap">
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
<div class="footer-flex-b">
<span class="footer-copy">&copy; 2025 BRIX</span>
<ul class="footer-list">
<li class="footer-item">
<a href="#" class="arrow-top" style="display: block;"></a>
</li>
</ul>
</div>
</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>