levis/help365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
Details

Browse Source
This commit is contained in:
koziavin
2025-05-29 16:42:45 +04:00
parent e217f89702
commit 00717a92fb
2681 changed files with 173810 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
platform/associated-items.html Normal file
View File

@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Associated items</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="By using the&nbsp;Associated items&nbsp;widget, you can display items of one app on the page of another app. For example, in the CRM workspace, a company’s page can show all orders 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 &gt; <a href="interface_settings.html">Set up interfaces</a> &gt; Widget types &gt; Data widgets / Associated items</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1" style="text-align: center; line-height: 1.20; margin: 19px 0 19px 0;"><span class="f_Heading1" style="font-size: 32px;">Associated items</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; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">By using the </span><span style="font-weight: bold;">Associated items</span><span style="color: #394149;"> widget, you can display items of one app on the page of another app. For example, </span><span style="font-size: 15px; font-family: Inter; color: #394149; background-color: #ffffff;">in the&nbsp;<a href="360012584940.html" class="topiclink">CRM workspace</a>, a company</span><span style="font-size: 15px; font-family: Inter;">’s page can show all orders the client made, so that you can easily open each one.</span></p>
<h2 class="p_Heading2"><span class="f_Heading2">Configure the widget</span></h2>
<p style="line-height: 1.20; background: #ffffff;"><span style="color: #394149;">The </span><span style="font-weight: bold;">Associated items</span><span style="color: #394149;"> widget can be set in any app.</span></p>
<p style="line-height: 1.20; background: #ffffff;"><span style="color: #394149;">For example, let’s link the custom </span><span style="font-weight: bold; color: #394149;">Orders</span><span style="color: #394149;"> app with the </span><span style="font-weight: bold; color: #394149;">Companies</span><span style="color: #394149;"> app so that a customer page displays all their orders. You can configure this in several steps.</span><span style="font-size: 15px; font-family: Inter; color: #394149; background-color: #ffffff;">&nbsp;</span></p>
<h3 class="p_Heading3"><a id="step-one" class="hmanchor"></a><span class="f_Heading3">Step 1. Add a link to the Companies app to the Orders app</span></h3>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">Switch to the </span><a href="360028941032.html" class="topiclink">Advanced Mode</a><span style="color: #394149;"> in the </span><span style="font-weight: bold; color: #394149;">Form Settings</span><span style="color: #394149;"> of the </span><span style="font-weight: bold; color: #394149;">Orders</span><span style="color: #394149;"> app. Add a new <a href="360009707032.html#app" class="topiclink">App</a> type field. Select the </span><span style="font-weight: bold; color: #394149;">Companies </span><span style="color: #394149;">app.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><img alt="AI1" width="843" height="576" style="margin:0;width:843px;height:576px;border:none" src="ai1.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">Make sure that you check the <a href="360028941112.html#searchandsortbyfield" class="topiclink">Search and Sort</a> box next to this field. Otherwise, you will not be able to use it in the settings of the </span><span style="font-weight: bold; color: #394149;">Associated items</span><span style="color: #394149;"> widget.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><img alt="AI2" width="804" height="521" style="margin:0;width:804px;height:521px;border:none" src="ai2.png"/></p>
<h3 class="p_Heading3"><span class="f_Heading3">Step 2. Add a new tab to the company page </span></h3>
<p style="line-height: 1.20; background: #ffffff;"><span style="color: #394149;">Open the view form of the </span><span style="font-weight: bold; color: #394149;">Companies</span><span style="color: #394149;"> app for editing. Please note that the </span><a href="360028941032.html" class="topiclink">Advanced Mode</a><span style="color: #394149;"> is the default editing mode for this form.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">In the builder, add a new <a href="tabs.html" class="topiclink">tab</a> by dragging it from the side panel or by clicking on the </span><span style="font-weight: bold; color: #394149;">+</span><span style="color: #394149;"> icon next to an existing tab. Let</span><span style="font-size: 15px; font-family: Inter;">’</span><span style="color: #394149;">s name the tab </span><span style="font-weight: bold; color: #394149;">Orders</span><span style="color: #394149;">.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><img alt="tabs_crt_page" width="596" height="339" style="margin:0;width:596px;height:339px;border:none" src="tabs_crt_page.png"/></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 a widget’s visibility and access to its data, define what happens, when the user moves or hovers the pointer over the widget, etc. Read more about it in <a href="common_widget_settings.html" class="topiclink">System widget settings</a><span style="font-size: 15px;">.</span></p>
<h3 class="p_Heading3"><span class="f_Heading3">Step 3. Add and configure the widget</span></h3>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">Drag the </span><span style="font-weight: bold; color: #394149;">Associated items</span><span style="color: #394149;"> widget to the new tab.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><img alt="AI4" width="880" height="463" style="margin:0;width:880px;height:463px;border:none" src="ai4.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">Set the widget settings in the opened window.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><img alt="associated-items-5" width="547" height="500" style="margin:0;width:547px;height:500px;border:none" src="associated-items-5.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">Fill in the fileds:</p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; background: #ffffff; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Associated app</span>. Select the app whose items will be displayed on the configured form. For example, specify the <span style="font-weight: bold;">Orders</span> app to display all the orders associated with the company on its page. &nbsp; &nbsp;</li><li style="line-height: 1.20; background: #ffffff; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Associated field</span>. Select an <a href="360009707032.html#app" class="topiclink">App</a> type field from the specified app. For example, the <span style="font-weight: bold;">Company</span> field added to the <span style="font-weight: bold;">Orders</span> app created at <a href="associated-items.html#step-one" class="topiclink">step 1</a>. </li><li style="line-height: 1.20; background: #ffffff; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Displayed fields</span>. Specify which fields of the app will be displayed on the configured form. To add a field, click the <span style="font-weight: bold;">+</span> icon.</li><li class="p_Normal"><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold; color: #374151;">Filter fields</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; color: #374151;">. Select the properties of the app that will be used to filter items. Users will be able to select values of these fields above the list of linked items. To add a property, click the </span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold; color: #374151;">+</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; color: #374151;"> icon.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Show the refresh button. </span>Enable this option to display a button above the list of app items that will be used to refresh the data.</li></ul>
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="font-size: 15px;">Save the settings. </span>To finish the configuration, click <span style="font-weight: bold;">Save </span>and <span style="font-weight: bold;">Publish</span> on the top panel of the interface designer.</p>
<h2 class="p_Heading2"><span class="f_Heading2">Widget in the interface</span></h2>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">After all the settings in our example, an additional <span style="font-weight: bold;">Orders</span> tab will appear on the company pages. This tab will display all items of the <span style="font-weight: bold;">Orders</span> app that have a particular company specified on their pages.</p>
<p class="p_Normal"><span style="font-size: 15px; color: #394149;">Also, if </span><span style="font-size: 15px; color: #394149;"><a href="mass_actions" class="weblink">bulk actions</a> are enabled for the </span><span style="font-weight: bold;">Orders</span><span style="font-size: 15px; color: #394149;"> app, you will be able to edit and delete the associated orders items, as well as change their statuses directly on a company page</span><span style="font-size: 15px; color: #394149;">.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><img alt="associated-items-6" width="845" height="415" style="margin:0;width:845px;height:415px;border:none" src="associated-items-6.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">You can change the width of any column in the table. To do this, place the cursor over its header and drag the appeared column border to the desired width. The customized width will be saved for all items and forms of the app.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">In the editing mode, you can delete the tabs you don’t want and move them around, and also arrange related items not in an additional tab, but directly on the page.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">Please note, that if you delete an order associated to a certain company, it will also be deleted from the company page.</span></p>
<h2 class="p_Heading2"><span class="f_Heading2">Associated items for working with customers</span></h2>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">Let’s take a look at how the <span style="font-weight: bold;">Associated items</span> widget is used in the <a href="360012584940.html" class="topiclink">CRM workspace</a>. There are two apps for storing information about customers here: <a href="360012584980.html" class="topiclink">Companies</a> and <a href="360012584960.html" class="topiclink">Contacts</a>. They can be part of ready-made solutions from the BRIX Store, in the components of which it is necessary to specify a client or a contact person, for example, the <span style="font-weight: bold;">Contract Management</span> solution. In this case, when importing the solution, the <span style="font-weight: bold;">Companies</span> and <span style="font-weight: bold;">Contacts</span> apps will be updated.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">Let's see how the <span style="font-weight: bold;">Contract Management</span> solution operates.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">When creating a new revenue contract, you will need to specify a contractor. Select the contractor from the list of all contractors stored in the <span style="font-weight: bold;">Company</span> app. If it is a new contractor, you can add them to the database directly from the contract page.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">The <span style="font-weight: bold;">Companies</span> app view form configured in the solution contains additional tabs. For example, on the <span style="font-weight: bold;">Contracts</span> tab, you can see associated items, the contracts where this company is listed as a contractor.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">When you install the solution, some settings are locked for the apps that are included in the solution. Thus, to change the settings of the app forms, you must first <a href="block_solution.html" class="topiclink">unlock</a> the solution.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;">Since <span style="font-weight: bold;">Company</span> and <span style="font-weight: bold;">Contacts</span> are system apps, you can export their associated apps without restrictions.</p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="doc_registration.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">doc_registration.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="settings-standart-form-widget.html">
<span class="bottom-nav__link">settings-standart-form-widget.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">&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>