koziavin
00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
202 lines
21 KiB
HTML
202 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Drop-down menu</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 Drop-down menu widget is a button on a page or a form that opens a drop-down menu with a list of actions. Each menu item is handled by a separate script." />
|
||
<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> / Drop-down menu</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Drop-down menu</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: 7px 0 16px 0;"><span style="font-size: 15px;">The </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Drop-down menu</span><span style="font-size: 15px;"> widget is a <a href="button_widget.html" class="topiclink">button</a> on a <a href="360009924451.html" class="topiclink">page</a> or a form that opens a drop-down menu </span><span style="font-size: 15px; font-family: Inter;">with a list of actions</span><span style="font-size: 15px;">. Each menu item is handled by a separate <a href="client_server_scripts.html" class="topiclink">script</a>.</span></p>
|
||
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">To add the widget, drag it from the right panel of the <a href="interface_designer.html" class="topiclink">interface designer</a> to the canvas or use the </span><span style="font-family: Inter; font-weight: bold;">+Widget</span><span style="font-family: Inter;"> button. To learn more, see <a href="360029250931.html" class="topiclink">Form templates</a>. After that, set up the widget in the settings window.</span></p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Main tab</span></h2>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="dropmenu_settings" width="589" height="332" style="margin:0;width:589px;height:332px;border:none" src="dropmenu_settings.png"/></p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold;">Show content in designer</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif;">.</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold;"> </span><span style="font-family: Inter;">Enable this option to display the widget’s content on the modeling canvas.</span></li><li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold;">Position</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold; color: #ff0000;">*</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif;">. </span><span style="font-family: Inter;">Specify the position of the menu items in relation to the button.</span></li><li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold;">Window size</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold; color: #ff0000;">*</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif;">. Specify the size of the menu</span><span style="font-family: 'Times New Roman',Times,Georgia,serif;">.</span></li></ul>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Events and System tabs</span></h2>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">These tabs are similar for all widgets. They allow you to set the widget’s visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. To learn more about these settings, see <a href="common_widget_settings.html" class="topiclink">System widget settings</a>.</span></p>
|
||
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">To finish, click </span><span style="font-family: Inter; font-weight: bold;">Save</span><span style="font-family: Inter;">.</span></p>
|
||
<h3 class="p_Heading3"><span class="f_Heading3">Drop-down menu items</span></h3>
|
||
<p style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">When you’ve finished configuring the widget, you need to add items that will be displayed in the drop-down menu. To do this, click </span><span style="font-family: Inter; font-weight: bold;">+Add menu item </span><span style="font-family: Inter;">and configure the item.</span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="drop-down-menu-2" width="1047" height="619" style="margin:0;width:1047px;height:619px;border:none" src="drop-down-menu-2.png"/></p>
|
||
<p style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-weight: bold;">Name</span><span style="font-size: 15px; font-weight: bold; color: #ff0000;">*</span><span style="font-size: 15px;">. </span><span style="font-size: 15px; font-family: Inter;">Enter the menu item name</span><span style="font-size: 15px;">.</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-weight: bold;">Event on click</span><span style="font-size: 15px;">. </span><span style="font-size: 15px; font-family: Inter;">Specify the event that needs to happen when the user clicks the menu item. For example, it can change the status of app item. To implement this logic, you need to add a corresponding script. Enter the script name and click </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Open</span><span style="font-size: 15px; font-family: Inter;">. You will see the </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Script</span><span style="font-size: 15px; font-family: Inter;"> tab. Write the script that you need. Find out more in the <a href="client_server_scripts.html" class="topiclink">Scripts in widgets</a> article.</span></li></ul>
|
||
<p style="line-height: 1.20; margin: 0 0 11px 0;"><span style="font-size: 15px; font-family: Inter;">You can also rename the <a href="button_widget.html" class="topiclink">button</a> or change its settings. To do this, click the gear icon next to the button’s name.</span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">To finish configuration, click </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Save</span><span style="font-size: 13px; font-family: Inter; color: #394149;">.</span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">To make the form available to users, click </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Save</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> and </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Publish</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> in the designer's toolbar.</span></p>
|
||
<h3 class="p_Heading3"><span class="f_Heading3">Example</span></h3>
|
||
<p style="line-height: 1.20; margin: 0 0 11px 0;"><span style="font-size: 15px; font-family: Inter;">In the following example, the </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Drop-down menu</span><span style="font-size: 15px; font-family: Inter;"> widget is added to the view form of the </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Orders</span><span style="font-size: 15px; font-family: Inter;"> app. The default button name is changed to </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Apply Discount</span><span style="font-size: 15px; font-family: Inter;">. We added a script to each menu item. These scripts recalculate the price of the order when a user selects the required discount (10% or 15%). The new amount is then displayed in the </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Discount Price</span><span style="font-size: 15px; font-family: Inter;"> field.</span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="drop-down-menu-3" width="755" height="405" style="margin:0;width:755px;height:405px;border:none" src="drop-down-menu-3.png"/></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="tabs.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">tabs.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="drop-down.html">
|
||
<span class="bottom-nav__link">drop-down.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>
|