koziavin
00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
203 lines
21 KiB
HTML
203 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Extension zones</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="When creating a widget in a module, you can select an extension zone that matches its purpose. An extension zone can define:" />
|
||
<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><a href="360024498352.html">Modules</a> > <a href="extentions.html">Custom modules</a> / Extension zones</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Extension zones</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="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">When creating a widget in a module, you can select an extension zone that matches its purpose. An extension zone can define:</p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">The place in the system interface where the content of the new widget will be displayed.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">An activity in the system that will execute the script of your widget.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">An activity that can be performed with the help of the widget you are creating.</li></ul>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">We will look more closely at the extension zones available in the <span style="color: #0000ff;"><a href="extention-widegets.html#extension" class="topiclink">widget creation</a></span> settings:</p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">User extension zone group</span>. Select a zone of this group if the widget you are creating will display information about employees. The content of your widget will replace the information the user sees in the selected default zone:</li></ol>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Popover with brief information</span>.</li></ul></li></ul>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 34px;"><img alt="ex_zones_01" width="270" height="302" style="margin:0;width:270px;height:302px;border:none" src="ex_zones_01.png"/></p>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">User profile</span>.</li></ul></li></ul>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 34px;"><img alt="ex_zones_02" width="1230" height="451" style="margin:0;width:1230px;height:451px;border:none" src="ex_zones_02.png"/></p>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">User profile settings</span>. To save changes in this zone, add a call to the <span style="font-size: 13px; font-weight: bold;">save()</span> method in the widget script. This method can be applied to a field with the <span style="color: #0000ff;"><a href="360009707032.html#users" class="topiclink">Users</a></span> type or an item in the <span style="color: #0000ff;"><a href="system_objects.html" class="topiclink">Employees</a></span> directory, depending on which data changes are configured in the widget. If you want to display a message that the data was saved successfully, set the <code><b>isSavedSuccessfully</b></code> variable to <code><b>true</b></code><span style="font-size: 13px;">.</span><a id="zone" class="hmanchor"></a></li></ul></li></ul>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 34px;"><img alt="ex_zones_03" width="685" height="527" style="margin:0;width:685px;height:527px;border:none" src="ex_zones_03.png"/></p>
|
||
<ol style="list-style-type:upper-roman" start="2">
|
||
<li value="2" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Toolbar extension zone group</span> <span style="font-weight: bold;">> Toolbar extension zone</span>. The widget you are creating will be displayed by default on the top panel of the app view form in the <span style="font-weight: bold;">Toolbar extension zone</span> widget. For example, in this way, you can display additional buttons on the app form. Read more about it in <span style="color: #0000ff;"><a href="toolbar-extension-zone.html" class="topiclink">Toolbar extension zone</a></span>.<br />
|
||
<img alt="ex_zones_04" width="1212" height="251" style="margin:0;width:1212px;height:251px;border:none" src="ex_zones_04.png"/></li><li value="3" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Hierarchical structure > Structure item menu</span>. The content of the widget you are creating will be displayed where the <span style="font-weight: bold;">Hierarchical structure</span> widget is placed and will automatically replace the information displayed by default.</li><li value="4" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Main > Root component</span>. The widget you are creating is initialized and its <span style="color: #0000ff;"><a href="client_server_scripts.html" class="topiclink">script</a></span> will be executed at system boot. In the widget script, add <span style="font-size: 13px; font-weight: bold;">async function onInit () </span>and in this function add a call to the method to be executed. For example, you can set metrics for page traffic to the system by tracking URL changes in the script.</li></ol>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало внимание</span></p>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 7px 0;"><span style="color: #0000ff;"><a href="global-constants.html" class="topiclink">Using the Global constant</a></span> prevents further export of the module. If <code><b>Global</b></code><span style="font-size: 13px;"> </span>is used in a widget script, a module with this widget cannot be exported.</p>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец внимание</span></p>
|
||
<ol style="list-style-type:upper-roman" start="2">
|
||
<li value="5" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Sign app item > Sign app item</span> <span style="font-weight: bold;">on the view form</span>. Using the widget you are creating, you can add a new provider to sign documents in the <span style="color: #0000ff;"><a href="app-signature.html" class="topiclink">Sign app item</a></span> widget window.<br />
|
||
<img alt="ex_zones_05" width="665" height="371" style="margin:0;width:665px;height:371px;border:none" src="ex_zones_05.png"/></li><li value="6" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><a id="preview-page" class="hmanchor"></a><span style="font-weight: bold;">File preview > Preview page</span>. The widget you are creating will allow viewing and editing documents uploaded via the viewer in the BRIX interface. By default, the widget is added to the OnlyOffice module. If another viewer is connected, create a widget with this extension in the integration module. Please note, that this widget can be kept empty in the interface designer. For an example of creating a module with such a widget, see <span style="color: #0000ff;"><a href="external_viewer_intergation.html" class="topiclink">Custom file viewing and editing module</a></span>.</li><li value="7" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">App items list > Toolbar extension zone. </span>The widget you are creating will be displayed on the top panel of the app page in the <span style="color: #0000ff;"><a href="toolbar-extension-zone.html" class="topiclink">Toolbar extension zone</a></span><a id="item_list" class="hmanchor"></a> widget.</li></ol>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="extention-widegets.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">extention-widegets.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="extention-api.html">
|
||
<span class="bottom-nav__link">extention-api.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>
|