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

This commit is contained in:
2025-05-29 16:42:45 +04:00
parent e217f89702
commit 00717a92fb
2681 changed files with 173810 additions and 0 deletions

View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Product widget for the product catalog</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 Select Product widget is used to work with items of the Product Catalog app from the Product Catalog workspace. This widget helps to select a product of interest to 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; CRM widgets / Select Product widget for the product catalog</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Select Product widget for the product catalog</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; margin: 0 0 11px 0;">The <span style="font-weight: bold;">Select Product</span> widget is used to work with items of the <span style="font-weight: bold;">Product Catalog</span> app from the <span style="color: #0000ff;"><a href="product-catalog.html" class="topiclink">Product Catalog</a></span> workspace. This widget helps to select a product of interest to the client, for example, on the page of a lead or a deal. You can:</p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">View product data.</li><li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Fill configurable product attributes with values.</li></ul>
<p style="line-height: 1.20; margin: 0 0 11px 0;">You can place the widget on the forms of apps and tasks in business processes.</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало&nbsp;внимание</span></p>
<p style="line-height: 1.20; margin: 0 112px 11px 0;">The <span style="font-weight: bold;">Select Product</span> widget is available when activating one of the<span style="color: #0000ff;"> </span>paid CRM solutions that include the <span style="font-weight: bold;">Product Catalog</span> workspace. Only users with a solution license can use it.</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец&nbsp;внимание</span></p>
<h2 class="p_Heading2"><span class="f_Heading2">Set up the widget</span></h2>
<p style="line-height: 1.20; margin: 0 0 11px 0;">Lets review the order of settings for using the <span style="font-weight: bold;">Select Product</span> widget on the <span style="font-weight: bold;">Leads</span> app forms:</p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">After selecting a product in the widget and saving the lead page, a service app item is created in the <span style="font-weight: bold;">Product</span> <span style="font-weight: bold;">Catalog</span> workspace that stores the data of the selected product. To do this, you need to add the <span style="font-weight: bold;">PC</span> <span style="font-weight: bold;">Product </span>service property with the <span style="font-weight: bold;">App (one)</span> type to the context of the <span style="font-weight: bold;">Leads</span> app.</li></ol>
<p style="line-height: 1.20; margin: 0 0 11px 34px;">In the property settings, select the <span style="color: #0000ff;"><a href="product-catalog.html#products" class="topiclink">Products</a></span> contract from the <span style="font-weight: bold;">Product Catalog</span> workspace. The sources of the contract are service apps, in which products are allocated and saved in groups. The created property is specified in the settings of the <span style="font-weight: bold;">Select Product</span> widget.</p>
<ol style="list-style-type:upper-roman" start="2">
<li value="2" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Add the <span style="font-weight: bold;">Select Product</span> widget to the create, edit, and view forms of the <span style="font-weight: bold;">Leads</span> app. To do this, in the <span style="color: #0000ff;"><a href="interface_designer.html" class="topiclink">interface designer</a></span>, drag the widget from the sidebar to the modeling canvas.</li><li value="3" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the window that opens, select the <span style="font-weight: bold;">PC Product</span> property created in the first step.</li></ol>
<p style="line-height: 1.20; margin: 0 0 11px 34px;"><img alt="product-item-widget-1" width="570" height="220" style="margin:0;width:570px;height:220px;border:none" src="product-item-widget-1.png"/></p>
<ol style="list-style-type:upper-roman" start="4">
<li value="4" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Limit access to the product on the lead page to view only. Then the employee will be able to change the product and its attributes only on the edit form of the lead.</li><li value="5" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">To do this, go to the <span style="font-weight: bold;">System</span> tab on the <span style="font-weight: bold;">Leads</span> app view form in the <span style="font-weight: bold;">Select Product</span> widget settings and set the <span style="font-weight: bold;">Read only</span> field to <span style="font-weight: bold;">Yes</span>.</li></ol>
<p style="line-height: 1.20; margin: 0 0 11px 34px;"><img alt="product-item-widget-2" width="685" height="270" style="margin:0;width:685px;height:270px;border:none" src="product-item-widget-2.png"/></p>
<ol style="list-style-type:upper-roman" start="6">
<li value="6" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">The widget is added to the app form as a field that has no name. Use the <span style="font-weight: bold;">Text</span> widget to set the desired field name.</li></ol>
<p style="line-height: 1.20; margin: 0 0 11px 34px;"><img alt="product-item-widget-3" width="477" height="286" style="margin:0;width:477px;height:286px;border:none" src="product-item-widget-3.png"/></p>
<ol style="list-style-type:upper-roman" start="7">
<li value="7" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">By default, the field for selecting a <span style="color: #0000ff;"><a href="360012584940.html#product" class="topiclink">Products</a></span> directory item from the <span style="font-weight: bold;">CRM</span> workspace is placed on the lead form. Remove this field as it is not used if employees work with products from the <span style="font-weight: bold;">Product</span> <span style="font-weight: bold;">Catalog</span> workspace.</li><li value="8" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Save the settings of the <span style="font-weight: bold;">Leads</span> app forms and publish the changes.</li></ol>
<p style="line-height: 1.20; margin: 0 0 11px 0;">For more information about user actions with the <span style="font-weight: bold;">Select Product</span> widget, see <span style="color: #0000ff;"><a href="/en/help/crm/select-catalog-product.html" target="_blank" class="weblink">Select a product on the app item page</a></span>.</p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="use-dashboards-widgets.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">use-dashboards-widgets.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="call-register-widget.html">
<span class="bottom-nav__link">call-register-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>