update
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s

This commit is contained in:
2025-05-29 16:42:45 +04:00
parent e217f89702
commit 00717a92fb
2681 changed files with 173810 additions and 0 deletions

266
platform/360029250931.html Normal file
View File

@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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="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="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 &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; line-height: 1.20; margin: 19px 0 19px 0;"><span class="f_Heading1" style="font-size: 32px;">Form templates</span></h1>
</div>
</header>
<section class="article__content">
<div class="scroll-top-inner">
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p class="p_Normal" 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="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="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="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="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="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 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">
<a id="prev-link" class="topic__navi_prev" href="360013448740.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">360013448740.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="360029574371.html">
<span class="bottom-nav__link">360029574371.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">&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>