koziavin
00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
213 lines
22 KiB
HTML
213 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Display widgets in reusable 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="Let's say you need to create similar forms for creating, editing and viewing app items, with different conditions for displaying a widget. For example, the widget has to be..." />
|
||
<meta name="picture" content="" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
|
||
<meta property="og:url" content="https://brix365.com/en/help" />
|
||
<meta property="og:image" content="" />
|
||
<link rel="icon" href="favicon.png" type="image/png" />
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="./jquery-ui.min.css" />
|
||
<link rel="stylesheet" href="default.css" />
|
||
<link rel="stylesheet" href="./search-yandex.css" />
|
||
<link rel="stylesheet" href="./article.css" />
|
||
<link rel="stylesheet" href="./glossary.css" />
|
||
<link rel="stylesheet" href="./theme.css" />
|
||
<script type="text/javascript" src="jquery.js"></script>
|
||
<script type="text/javascript" src="helpman_settings.js"></script>
|
||
<script type="text/javascript" src="helpman_topicinit.js"></script>
|
||
|
||
<script type="text/javascript" src="highlight.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){highlight();});
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
|
||
|
||
<header class="header elma-365">
|
||
<div class="container">
|
||
<a class="header__logo" href="https://brix365.com/en/help">
|
||
<img src="./logo-en.svg" alt="header logo">
|
||
</a>
|
||
<!-- <div class="hero__search-form" id="search-panel">
|
||
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
|
||
<label class="search-form__label">
|
||
<span id="reset-search" class="search__icon"></span>
|
||
<input class="search-form__input" type="text">
|
||
</label>
|
||
<input class="search-form__submit" type="submit" value="Submit">
|
||
</form>
|
||
</div> -->
|
||
|
||
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
|
||
<div class="hero__search">
|
||
<a href="#" id="search-icon" class="hero__search-icon">
|
||
<img src="search-icon-white.svg" alt="search string">
|
||
</a>
|
||
<a href="#" id="side-menu-icon" class="hero__side-icon">
|
||
<img src="side_menu.svg" alt="side menu">
|
||
</a>
|
||
</div>
|
||
<div class="header__navi">
|
||
|
||
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<main class="main container">
|
||
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar__header">
|
||
<a class="header__logo" href="https://brix365.com/en/help">
|
||
<img src="./logo-light-en.svg">
|
||
</a>
|
||
<span class="sidebar__close elma-365-close" id="close"></span>
|
||
</div>
|
||
<div class="sidebar__wrapper" id="side-menu">
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
<article class="article" id="article">
|
||
<div class="article-inner">
|
||
<div class="content">
|
||
<header class="article__header">
|
||
<div class="article__bread" style="display:flex; gap:10px;">
|
||
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
|
||
|
||
<div class="topic__breadcrumbs">
|
||
<p>Low-code designer > <a href="create_form.html">Custom forms</a> > <a href="360029250931.html">Form templates</a> / Display widgets in reusable templates</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Display widgets in reusable 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">Let's say you need to create similar forms for creating, editing and viewing app items, with different conditions for displaying a widget. For example, the widget has to be available for editing on one of the forms, while it should be read-only on the other forms.</p>
|
||
<p class="p_Normal">You do not need to create separate forms from scratch. Instead, set up a <a href="360029250931.html#reuse-template" class="topiclink">reusable template</a> and specify widget display conditions for each of the forms.</p>
|
||
<p class="p_Normal"><span style="font-weight: bold;">Important</span>: the settings described in this article are only applicable for app forms.</p>
|
||
<p class="p_Normal">To illustrate how this works, let's create a template for the <span style="font-weight: bold;">Orders</span> app and set up display conditions for the <span style="font-weight: bold;">Information box</span> widget that will store instructions for filling out an order request. This widget has to be displayed on create and edit forms, and has to be hidden from the view form.</p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Create a reusable template for all app forms</span></h2>
|
||
<p class="p_Normal">Got to the app <span style="font-weight: bold;">Form Settings</span> and create a <a href="360029250931.html#form_template" class="topiclink">new template</a> on either of the form tabs. Then, select this template for all of the other forms.</p>
|
||
<p class="p_Normal">Let's create such a template in <span style="font-weight: bold;">Order</span> app settings, on the <span style="font-weight: bold;">Create</span> tab, and name it <span style="font-weight: bold;">Basic form</span>. Then, select this form on the <span style="font-weight: bold;">View</span> and <span style="font-weight: bold;">Edit</span> tabs.</p>
|
||
<p class="p_Normal"><img alt="basic_form_edit" width="888" height="469" style="margin:0;width:888px;height:469px;border:none" src="basic_form_edit.png"/></p>
|
||
<p class="p_Normal">Next, open the template in interface designer and <a href="360029250931.html#addingawidgettothetemplate" class="topiclink">add</a> the <span style="font-weight: bold;">Information box</span> widget to the form.</p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Configure widget display conditions</span></h2>
|
||
<p class="p_Normal">To configure the widget's behavior on different app forms, do the following:</p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" class="p_Normal">In the <a href="designer-tabs.html#context" class="topiclink">template's context</a> create variables that will store the type of the form opened by the user. For example, create a <span style="font-weight: bold;">Create form?</span> variable of the <span style="font-weight: bold;">Yes/No switch</span> type.</li><li value="2" class="p_Normal">Go to the <a href="designer-tabs.html#scripts" class="topiclink">Scripts</a> tab and add a Client script that will write the <span style="font-weight: bold;">Yes</span> or <span style="font-weight: bold;">No</span> value to the variable. This code uses the <code><b>formType</b></code> system form property. This property is automatically given the <span style="font-weight: bold;">create</span>, <span style="font-weight: bold;">edit</span> or <span style="font-weight: bold;">view</span> value depending on the type of app form the the user has opened. Code example:</li></ol>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">async</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">function</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">onInit():</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">Promise<</span><span class="f_CodeExample" style="font-weight: bold;">void</span><span class="f_CodeExample">></span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">{</span><br />
|
||
<span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.isFormCreate</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">=</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.__formType?.code</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">===</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">'create';</span><br />
|
||
<span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.isFormEdit</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">=</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.__formType?.code</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">===</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">'edit';</span><br />
|
||
<span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.isFormView</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">=</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.__formType?.code</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">===</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">'view';</span><br />
|
||
<span class="f_CodeExample">}</span></p>
|
||
<p class="p_Normal">When the script runs after user opens the <span style="font-weight: bold;">Create</span> form, the following happens:</p>
|
||
<ul style="list-style-type:disc">
|
||
<li class="p_Normal"><span style="font-weight: bold;">Yes</span> is written to the <code><b>isFormCreate</b></code> (<span style="font-weight: bold;">Create form?</span>) variable;</li></ul>
|
||
<ul style="list-style-type:disc">
|
||
<li class="p_Normal"><span style="font-weight: bold;">No</span> is written to the similar <code><b>isFormEdit</b></code> (<span style="font-weight: bold;">Edit form?</span>) and <code><b>isFormView</b></code> (<span style="font-weight: bold;">View form?</span>) variables.</li></ul>
|
||
<ol style="list-style-type:upper-roman" start="3">
|
||
<li value="3" class="p_Normal">In widget settings, on the <a href="common_widget_settings.html" class="topiclink">System</a> tab, in the <span style="font-weight: bold;">Hide</span> field click either <span style="font-weight: bold;">Show on condition</span> or <span style="font-weight: bold;">Hide on condition</span> and select a corresponding variable.</li></ol>
|
||
<p class="p_Normal">Let's configure this behavior for the <span style="font-weight: bold;">Orders</span> app form:</p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" class="p_Normal">Open the basic form template in interface designer. Go to the <span style="font-weight: bold;">Context </span>tab and create<span style="font-weight: bold;"> </span>the<span style="font-weight: bold;"> View form?</span> variable of the <span style="font-weight: bold;">Yes/No Switch</span> type.</li><li value="2" class="p_Normal">On the <span style="font-weight: bold;">Scripts</span> tab, add the following Client script:</li></ol>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">ViewContext.data.isFormView</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">=</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">ViewContext.data.__formType?.code</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">===</span><span class="f_CodeExample" style="color: #ffffff;"> </span><span class="f_CodeExample">'view';</span></p>
|
||
<ol style="list-style-type:decimal" start="3">
|
||
<li value="3" class="p_Normal">In the settings of the <span style="font-weight: bold;">Information box</span> widget go to the <span style="font-weight: bold;">System</span> tab. In the <span style="font-weight: bold;">Hide</span> field, click on <span style="font-weight: bold;">Hide on condition</span> and select the <span style="font-weight: bold;">View form?</span> variable.</li></ol>
|
||
<p class="p_Normal"><img alt="hide_view_template" width="965" height="475" style="margin:0;width:965px;height:475px;border:none" src="hide_view_template.png"/></p>
|
||
<p class="p_Normal">Now, when a user opens an order's view form, the information box with instructions is not shown, because the the <span style="font-weight: bold;">Yes</span> value is written to the <span style="font-weight: bold;">View form?</span> variable, and the <span style="font-weight: bold;">Information box</span> widget activates the <span style="font-weight: bold;">Hide on condition</span> option.</p>
|
||
<p class="p_Normal">If the user opens the create or edit form, the instructions are displayed, because the <span style="font-weight: bold;">No</span> value is written to the <span style="font-weight: bold;">View form?</span> variable, and the <span style="font-weight: bold;">Hide on condition</span> option is not activated in the widget.</p>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="360029574371.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">360029574371.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="interface_settings.html">
|
||
<span class="bottom-nav__link">interface_settings.html</span> <span
|
||
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
|
||
</a>
|
||
|
||
</div>
|
||
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
|
||
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
|
||
|
||
</section>
|
||
</div>
|
||
<aside class="article__sidebar" style="display:none">
|
||
<input type="checkbox" />
|
||
<div class="article__arrow"></div>
|
||
<div class="table-of-contents elma365-right" id="toc2Content">
|
||
<h3 class="h3-toc">In this topic</h3>
|
||
<nav id="toc2"></nav>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
<footer class="footer">
|
||
<div class="footer-container">
|
||
<div class="footer-mobile">
|
||
|
||
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
|
||
|
||
|
||
</div>
|
||
<div class="footer-wrap">
|
||
|
||
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
|
||
|
||
<div class="footer-flex-b">
|
||
<span class="footer-copy">© 2025 BRIX</span>
|
||
<ul class="footer-list">
|
||
|
||
<li class="footer-item">
|
||
<a href="#" class="arrow-top" style="display: block;"></a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
<iframe name="hmnavigation" style="display:none!important"></iframe>
|
||
<script src="./jquery-ui.js"></script>
|
||
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
|
||
<script src="./jquery.tocify.min.js"></script>
|
||
<script src="./TypoReporter.min.js"></script>
|
||
<script src="./google-search.js"></script>
|
||
<script src="./main.js"></script>
|
||
</body>
|
||
|
||
</html>
|