koziavin
00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
200 lines
19 KiB
HTML
200 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Toolbar extension zone</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="The widget is used to display custom widgets of the toolbar extension zone type. Such widgets are only created in modules and are used to implement new capabilities in the..." />
|
||
<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 > Other widgets / Toolbar extension zone</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Toolbar extension zone</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;"><span style="font-size: 15px; color: #394149;">The widget is used to display</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"><a href="extention-widegets.html" class="topiclink">custom widgets</a> of the</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"><a href="extention-widegets.html#extension" class="topiclink">toolbar extension zone</a> type</span><span style="font-size: 15px; color: #394149;">. Such widgets are only created in </span><span style="font-size: 15px; color: #394149;"><a href="extentions.html" class="topiclink">modules</a> and are used to implement new capabilities in the system. For example, you can use them to add buttons for interacting with external systems integrated with</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;">BRIX.</span></p>
|
||
<p style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">The </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Toolbar extension zone</span><span style="font-size: 15px; color: #394149;"> widget is placed by default:</span></p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">On the top panel of the app view form. Here the custom widget will be displayed if you select Toolbar<a href="extension-zones.html#zone" class="topiclink"> extension zone group > Toolbar extension zone</a> when creating it in the module. You can also manually add the Toolbar</span><span style="font-size: 15px; font-weight: bold; color: #394149;"> extension zone</span><span style="font-size: 15px; color: #394149;"> widget to the create and edit forms.</span></li><li value="2" style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">On the top panel of the app page to the left of the gear, the custom widget will be displayed if you select <a href="extension-zones.html#item_list" class="topiclink">App item list > Toolbar extension zone</a> when creating it in the module.</span></li></ol>
|
||
<p style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 15px; color: #394149;">Using widgets with the Toolbar extension zone type is convenient because when creating or editing the widget you do not need to manually add it to each form. These widgets are displayed in the</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-weight: bold; color: #394149;">Toolbar extension zone</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;">automatically. To hide unused widgets from the zone, </span><span style="font-size: 15px; color: #394149;"><a href="extentions.html" class="topiclink">disable</a> the modules that they belong to</span><span style="font-size: 15px; color: #394149;">.</span></p>
|
||
<h2 style="line-height: 1.20;"><a id="add" class="hmanchor"></a></h2>
|
||
<p style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Add a widget to the app form</span></h2>
|
||
<h3 style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></h3>
|
||
<h3 style="line-height: 1.20;"><img alt="toolbar_widget" width="626" height="323" style="margin:0;width:626px;height:323px;border:none" src="toolbar_widget.png"/></h3>
|
||
<p style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">In the </span><span style="font-weight: bold; color: #394149;">Current item</span><span style="font-weight: bold; color: #ff0000;">*</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;">field on the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Main</span><span style="font-size: 15px; color: #394149;"> tab, click on</span><span style="font-size: 15px; color: #394149;"> </span><img alt="toolbar_3" title="toolbar_3" width="21" height="21" style="margin:0;width:21px;height:21px;border:none" src="toolbar_3.png"/><span style="font-size: 15px; color: #394149;">, then click </span><span style="font-weight: bold; color: #394149;"><Not defined></span><span style="font-size: 15px; color: #394149;"> and select </span><span style="font-weight: bold; color: #394149;">Link to the current item</span><span style="font-size: 15px; color: #394149;">.</span></p>
|
||
<p style="line-height: 1.20; margin: 7px 0 16px 0;">The <span style="font-weight: bold;">Events</span> and <span style="font-weight: bold;">System</span> tabs are for system settings that are the same for all the widgets. They allow you to configure widget visibility and access to its data, define what happens, when the user moves or hovers the pointer over the widget, etc. Find out more in <a href="common_widget_settings.html" class="topiclink">System widget settings</a>. </p>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">To complete the settings, click <span style="font-weight: bold;">Save</span>. To make the changes available to users, click <span style="font-weight: bold;">Save</span> and <span style="font-weight: bold;">Publish</span> in the top toolbar.</p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Delete the widget</span></h2>
|
||
<p style="line-height: 1.20;"><span style="font-size: 15px; color: #394149;">To delete a widget from a form, select it, click the trash can icon, and confirm the action.</span></p>
|
||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 15px; color: #394149;">You can add the widget back to the form as described</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-size: 15px; color: #394149;"><a href="toolbar-extension-zone.html#add" class="topiclink">above</a></span><span style="font-size: 15px; color: #394149;">.</span></p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Example</span></h2>
|
||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><span style="font-size: 15px; color: #394149;">In this example, on the app item page in the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Toolbar extension zone</span><span style="font-size: 15px; color: #394149;">, there is a button with a drop-down menu.</span></p>
|
||
<p style="line-height: 1.20; margin: 16px 0 0 0;"><img alt="toolbar_zone" width="632" height="460" style="margin:0;width:632px;height:460px;border:none" src="toolbar_zone.png"/></p>
|
||
<h2 style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></h2>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="process_launch_date_widget.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">process_launch_date_widget.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="instruction.html">
|
||
<span class="bottom-nav__link">instruction.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>
|