217 lines
22 KiB
HTML
217 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Navigator</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 generates a URL address that can be placed on the page as a link or button. When the user clicks on the link, the content of another widget is displayed. The user..." />
|
||
<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> / Navigator</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Navigator</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: 0 0 11px 0;">The widget generates a URL address that can be placed on the page as a link or button. When the user clicks on the link, the content of another widget is displayed. The user can also enter the link directly in the address bar of the browser.</p>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 0 0 11px 0;">The <span style="font-weight: bold;">Navigator</span> widget is convenient to use to customize navigation on a single page without switching between several pages. This approach is used by default in the <a href="portal_navigation_widget.html" class="topiclink">Portal navigation widget</a>, so that the data of the <a href="portal-setting.html#template" class="topiclink">portal page by template</a> is displayed on other pages according to the template.</p>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 0 0 11px 0;">For example, let’s customize a dynamic page of an external portal using the <span style="font-weight: bold;">Navigator</span> widget. When clicking on the links in the left menu, the page will display different content:</p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Useful information.</li><li style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">User tasks.</li><li style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Processes that the user can run.</li></ul>
|
||
<p style="line-height: 1.20; margin: 0 0 11px 0;">To do this:</p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Let’s add the <span style="font-weight: bold;">Navigator</span> widget to the portal page. In its settings, we will create three URL addresses and bind three widgets (information, tasks, processes) to them.</li><li value="2" style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the left menu of the portal page, we will place the addresses as links.</li></ol>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 0 0 11px 0;">Then when a user clicks on a link in the left menu of the page, they will see the content of the widget bound to this link in the navigator settings. The content will be displayed in the part of the page where the <span style="font-weight: bold;">Navigator</span> widget is placed.</p>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 0 0 11px 0;"><img alt="navigator01" width="658" height="225" style="margin:0;width:658px;height:225px;border:none" src="navigator01.png"/></p>
|
||
<p class="p_Normal">Let’s take a closer look at this example where a portal <a href="service-portal.html#create-portal" class="topiclink">created from a template</a> in the <span style="font-weight: bold;">Orders</span> workspace is used.</p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Set up the widget</span></h2>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" class="p_Normal">Beforehand, in the <span style="font-weight: bold;">Orders</span> workspace, <a href="interface_settings.html#widgets" class="topiclink">create widgets</a> whose content will be dynamically displayed on the portal. Set their settings, and publish them.</li></ol>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="navigator02" width="678" height="207" style="margin:0;width:678px;height:207px;border:none" src="navigator02.png"/></p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="2" class="p_Normal">In the <span style="font-weight: bold;">Orders</span> workspace menu, select <span style="font-weight: bold;">Portal</span>. To place the <span style="font-weight: bold;">Navigator</span> widget on the home page of the portal, open its template in the interface designer. To do this, click on the name of the home page.</li><li value="3" class="p_Normal"><a href="360029250931.html#addingawidgettothetemplate" class="topiclink">Add</a> the <span style="font-weight: bold;">Navigator</span> widget to the main part of the page, where the user will see the contents of the widgets created earlier. A <a href="common_widget_settings.html" class="topiclink">system settings</a> window will open that can be customized later. Click <span style="font-weight: bold;">Save</span>.</li></ol>
|
||
<p class="p_Normal"><img alt="navigator03" width="669" height="251" style="margin:0;width:669px;height:251px;border:none" src="navigator03.png"/></p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="4" class="p_Normal">On the field of the <span style="font-weight: bold;">Navigator</span> widget, you will see the keyword <span style="font-weight: bold;">path1</span>, which can be used to <a href="navigator.html#collect-address" class="topiclink">collect a URL address</a>. For illustration, let’s create three addresses with the following keywords: <span style="font-weight: bold;">information</span>, <span style="font-weight: bold;">tasks</span>, and <span style="font-weight: bold;">processes</span>, to which we will bind the corresponding widgets.</li></ol>
|
||
<p class="p_Normal">To add an address to the widget field, click the <span style="font-weight: bold;">+</span> icon at the top of the widget. The route settings window will open, where you can specify a keyword for the new URL address.</p>
|
||
<p class="p_Normal"><img alt="navigator04" width="489" height="204" style="margin:0;width:489px;height:204px;border:none" src="navigator04.png"/></p>
|
||
<p class="p_Normal">Configure the <span style="font-weight: bold;">information</span>, <span style="font-weight: bold;">tasks</span>, and <span style="font-weight: bold;">processes</span> routes.</p>
|
||
<p class="p_Normal"><img alt="navigator05" width="597" height="223" style="margin:0;width:597px;height:223px;border:none" src="navigator05.png"/></p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="5" class="p_Normal">Add the widgets you created earlier to each route tab. Then when the user goes to the created address, they will see the content of the widget you placed on the corresponding tab of the route.</li><li value="6" class="p_Normal">Save the <span style="font-weight: bold;">Navigator</span> widget settings and publish the changes.</li><li value="7" class="p_Normal"><a id="collect-address" class="hmanchor"></a>Now you can generate addresses to display the contents of widgets bound to them. The address consists of the URL address of the page where the <span style="font-weight: bold;">Navigator</span> widget is placed and the keyword you specified in the route. Copy the URL address of the page in its <a href="360009924451.html#settings" class="topiclink">settings</a>. In our example, we will get three URL addresses:</li></ol>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li class="p_Normal"><span style="font-weight: bold;">/_portal/orders/_start_page/ info</span>.</li><li class="p_Normal"><span style="font-weight: bold;">/_portal/orders/_start_page/tasks</span>.</li><li class="p_Normal"><span style="font-weight: bold;">/_portal/orders/_start_page/processes</span>.</li></ul></li></ul>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало примечание</span></p>
|
||
<p class="p_Normal"><span style="font-weight: bold;">Important</span></p>
|
||
<p class="p_Normal">In the <span style="font-weight: bold;">Navigator</span> widget, you can work with portal pages using TypeScript methods. Read more about it in <a href="https://tssdk.brix365.com/en/latest/interfaces/_02_types_.navigator.html" target="_blank" class="weblink">BRIX TS SDK</a>.</p>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец примечание</span></p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Customize following the URLs</span></h2>
|
||
<p class="p_Normal">Now let’s place the created addresses in the left menu of the home page of the portal. The user will click on the link and see the content of the widget bound to this link in the navigator settings. In our example, we will customize the links using the <a href="text_widget.html" class="topiclink">Text</a> widget. To do this:</p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" class="p_Normal">Place the <span style="font-weight: bold;">Text</span> widget in the part of the page template where the user will see the links. In our example, this is the left menu of the home page.</li><li value="2" class="p_Normal">In the <span style="font-weight: bold;">Text</span> widget settings, specify three URL addresses created in the <span style="font-weight: bold;">Navigator</span> widget settings.<br />
|
||
<img alt="navigator06" width="718" height="416" style="margin:0;width:718px;height:416px;border:none" src="navigator06.png"/></li><li value="3" class="p_Normal">Save the <span style="font-weight: bold;">Text</span> widget settings. Then save and publish the home-page settings in the interface designer.</li></ol>
|
||
<p class="p_Normal">Now on the home page of the portal, you can follow the links configured in the left menu. At the same time, the main part of the page, where the <span style="font-weight: bold;">Navigator</span> widget is placed, will display the information the user needs.</p>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="modal_window.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">modal_window.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="widget-lay-out-zone.html">
|
||
<span class="bottom-nav__link">widget-lay-out-zone.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>
|