This commit is contained in:
201
platform/widget-lay-out-zone.html
Normal file
201
platform/widget-lay-out-zone.html
Normal file
@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Widget container</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="Use the Widget container on forms of apps, tasks, and pages when configuring a custom solution or module. The container serves for laying out other objects and itself is not..." />
|
||||
<meta name="picture" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
|
||||
<meta property="og:url" content="https://brix365.com/en/help" />
|
||||
<meta property="og:image" content="" />
|
||||
<link rel="icon" href="favicon.png" type="image/png" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./jquery-ui.min.css" />
|
||||
<link rel="stylesheet" href="default.css" />
|
||||
<link rel="stylesheet" href="./search-yandex.css" />
|
||||
<link rel="stylesheet" href="./article.css" />
|
||||
<link rel="stylesheet" href="./glossary.css" />
|
||||
<link rel="stylesheet" href="./theme.css" />
|
||||
<script type="text/javascript" src="jquery.js"></script>
|
||||
<script type="text/javascript" src="helpman_settings.js"></script>
|
||||
<script type="text/javascript" src="helpman_topicinit.js"></script>
|
||||
|
||||
<script type="text/javascript" src="highlight.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){highlight();});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
|
||||
|
||||
<header class="header elma-365">
|
||||
<div class="container">
|
||||
<a class="header__logo" href="https://brix365.com/en/help">
|
||||
<img src="./logo-en.svg" alt="header logo">
|
||||
</a>
|
||||
<!-- <div class="hero__search-form" id="search-panel">
|
||||
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
|
||||
<label class="search-form__label">
|
||||
<span id="reset-search" class="search__icon"></span>
|
||||
<input class="search-form__input" type="text">
|
||||
</label>
|
||||
<input class="search-form__submit" type="submit" value="Submit">
|
||||
</form>
|
||||
</div> -->
|
||||
|
||||
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
|
||||
<div class="hero__search">
|
||||
<a href="#" id="search-icon" class="hero__search-icon">
|
||||
<img src="search-icon-white.svg" alt="search string">
|
||||
</a>
|
||||
<a href="#" id="side-menu-icon" class="hero__side-icon">
|
||||
<img src="side_menu.svg" alt="side menu">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__navi">
|
||||
|
||||
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<main class="main container">
|
||||
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<a class="header__logo" href="https://brix365.com/en/help">
|
||||
<img src="./logo-light-en.svg">
|
||||
</a>
|
||||
<span class="sidebar__close elma-365-close" id="close"></span>
|
||||
</div>
|
||||
<div class="sidebar__wrapper" id="side-menu">
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<article class="article" id="article">
|
||||
<div class="article-inner">
|
||||
<div class="content">
|
||||
<header class="article__header">
|
||||
<div class="article__bread" style="display:flex; gap:10px;">
|
||||
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
|
||||
|
||||
<div class="topic__breadcrumbs">
|
||||
<p>Low-code designer > <a href="interface_settings.html">Set up interfaces</a> > Widget types > <a href="360028901811.html">Element layout</a> / Widget container</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Widget container</span></h1>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<section class="article__content">
|
||||
<div class="scroll-top-inner">
|
||||
<a href="#h1-article" class="scroll-top"></a>
|
||||
</div>
|
||||
<!-- Placeholder for topic body. -->
|
||||
<p style="line-height: 1.20;">Use the <span style="font-weight: bold;">Widget container</span> on forms of apps, tasks, and pages when configuring a custom solution or module. The container serves for laying out other objects and itself is not displayed in the user interface. The widget container can hold standard and custom widgets as well as app context properties.</p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;">When a custom solution or module is installed to another company, the widget container can be used to expand the functionality. For example, inside the container, you can place additional data entry fields, different <a href="button_widget.html" class="topiclink">buttons</a> for search and processing data, <a href="tabs.html" class="topiclink">tabs</a> for better layout of information.</p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;">Widget containers help avoid issues with update of downloaded components. The widgets and fields placed in a widget container are saved on the app form when the solution or module is updated. If the widget container has not been in use, the data will be lost.</p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;">The widget container is useful for creating components distributed as <span style="font-weight: bold;">.e365</span> files or via <span style="font-weight: bold;">BRIX Store</span>.</p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Add widget</span></h2>
|
||||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="color: #394149;">To configure the widget, drag it to the canvas from the right panel of the <a href="interface_designer.html" class="topiclink">interface designer</a> or click </span><span style="font-weight: bold; color: #394149;">+Widget</span><span style="color: #394149;">. </span><span style="font-size: 15px; color: #394149; background-color: #ffffff;">To learn more, see </span><span style="font-size: 15px; color: #394149;"><a href="360029250931.html" class="topiclink">Form templates</a> and <a href="360027211631.html" class="topiclink">Add a widget to a page</a></span><span style="font-size: 15px; color: #394149; background-color: #ffffff;">.</span></p>
|
||||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="font-size: 15px; color: #394149; background-color: #ffffff;">Fill out the settings in the pop-up.</span></p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 16px 0;"><img alt="container_wdgt" width="547" height="318" style="margin:0;width:547px;height:318px;border:none" src="container_wdgt.png"/></p>
|
||||
<p style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">In the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">ID</span><span style="font-size: 15px; color: #394149;"> field, enter a name for the widget container. The IDs are used in the system for identification of unique containers. </span></p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 15px; color: #394149;">If later on you change the ID, all the objects stored in the container will be removed from app forms and pages. However, they will still remain available on the canvas in the interface designer, and will be highlighted red. To continue working with such objects, go to the interface designer and place them into the widget container once again.</span></p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 15px; color: #394149;">Since the widget container is not displayed on pages and app forms, you do not need to configure the settings on the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Events</span><span style="font-size: 15px; color: #394149;"> and </span><span style="font-size: 15px; font-weight: bold; color: #394149;">System</span><span style="font-size: 15px; color: #394149;"> tabs.</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">To apply the changes, click </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Save</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> and </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Publish</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> in the designer's toolbar.</span></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Delete widget</span></h2>
|
||||
<p style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">To delete a widget container from a page or form, select it on the canvas and click on the recycle bin icon. A deleted widget can be placed back on the canvas as described above.</span></p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 15px; color: #394149;">After a container is deleted, the objects that it stored will no longer be shown in the interface, but they will still be available in the interface designer and will be highlighted red. To make them available to the users again, place them inside a different widget container.</span></p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Use case</span></h2>
|
||||
<p style="line-height: 1.20; margin: 0 0 16px 0;"><span style="font-size: 15px; color: #394149;">Let's say a user has installed a solution that contains the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Contractors</span><span style="font-size: 15px; color: #394149;"> app. On the view form of the app there are two widget containers.</span></p>
|
||||
<p style="line-height: 1.20; margin: 0 0 16px 0;"><img alt="use_case1" width="990" height="469" style="margin:0;width:990px;height:469px;border:none" src="use_case1.png"/></p>
|
||||
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">The </span><span style="font-size: 15px;"><a href="360006871932.html#administrator" class="topiclink">Administrator</a></span><span style="font-size: 15px; color: #394149;"> can add any widgets from the right panel of the designer to these containers, for example, the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Blacklist</span><span style="font-size: 15px; color: #394149;"> and </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Verify contractor</span><span style="font-size: 15px; color: #394149;"> buttons</span><span style="font-size: 15px; color: #394149;">.</span></p>
|
||||
<p class="p_Normal"><img alt="use_case2" width="997" height="435" style="margin:0;width:997px;height:435px;border:none" src="use_case2.png"/></p>
|
||||
<p style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">After the form is saved, these added buttons will be displayed on the app form.</span></p>
|
||||
<p style="line-height: 1.20; margin: 16px 0 16px 0;"><span style="font-size: 15px; color: #394149;">If the developer of the solution decides to introduce changes into other components of the form, after the solution is updated, the widgets located in the widget container will remain unchanged. However, if the developer changes the ID of the widget container or deletes it, the objects stored in it will be removed from app item forms. They will still be available on the modeling canvas in the interface designer, and will be highlighted red. To make them available to users again, place them into another widget container.</span></p>
|
||||
|
||||
<div class="bottom-nav">
|
||||
|
||||
<a id="prev-link" class="topic__navi_prev" href="navigator.html">
|
||||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||||
class="bottom-nav__link">navigator.html</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a id="next-link" class="topic__navi_next" href="panel_with_heading.html">
|
||||
<span class="bottom-nav__link">panel_with_heading.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>
|
||||
Reference in New Issue
Block a user