This commit is contained in:
201
platform/counter.html
Normal file
201
platform/counter.html
Normal file
@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Counter</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="This widget helps you to set up an indicator showing the number of current tasks, deals, leads, etc. that a particular system element stores." />
|
||||
<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> / Counter</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Counter</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-family: Inter;">This widget helps you to set up an indicator showing the number of current tasks, deals, leads, etc. that a particular system element stores.</span></p>
|
||||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="font-family: Inter;">To add the widget to a form, drag it from the side 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>. Set up the widget in the window that opens.</span></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Main tab</span></h2>
|
||||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><img alt="counter1" width="573" height="312" style="margin:0;width:573px;height:312px;border:none" src="counter1.png"/></p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-family: Inter; font-weight: bold;">Value</span><span style="font-family: Inter;">. Here you can set the numeric value of the counter manually. Alternatively, you can click on the link icon on the right side of the field and select a widget or app variable of the </span><span style="font-family: Inter; font-weight: bold;">Number</span><span style="font-family: Inter;"> type. The value of the variable will determine the counter’s value.</span></li></ul>
|
||||
<ul style="list-style-type:disc">
|
||||
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-family: Inter; font-weight: bold;">Text</span><span style="font-family: Inter;">. In addition to the numeric value, you can add a caption to the indicator. You can do it in two ways: by entering the text manually or by clicking on the link icon on the right side of the field and selecting a </span><span style="font-family: Inter; font-weight: bold;">String</span><span style="font-family: Inter;"> variable from the widget or app context. The value of the variable will determine the counter’s caption.</span></li></ul>
|
||||
<ul style="list-style-type:disc">
|
||||
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-family: Inter; font-weight: bold;">Color</span><span style="font-family: Inter; font-weight: bold; color: #ff0000;">*</span><span style="font-family: Inter;">. Here you can choose the indicator’s color.</span></li></ul>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Events tab</span></h2>
|
||||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><img alt="counter2" width="643" height="396" style="margin:0;width:643px;height:396px;border:none" src="counter2.png"/></p>
|
||||
<p style="text-align: justify; line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">This tab allows you to customize the widget’s behavior by selecting functions from scripts that will be called when various events occur. <span style="font-weight: bold;">On mouse enter handler</span> and <span style="font-weight: bold;">On mouse leave handler</span> are available for any widget. Find out more in <a href="common_widget_settings.html" class="topiclink">System widget settings</a>.</p>
|
||||
<p style="text-align: justify; line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">For the <span style="font-weight: bold;">Counter</span> widget, you can also set up:</p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-weight: bold;">Counter mouse enter handler</span>. It will occur when the user hovers over the counter. For example, you can customize the display of a pop-up window with a tooltip.</li><li style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-weight: bold;">Counter mouse leave handler</span>. It will occur when the user moves the cursor outside the counter. For example, you can configure the closing of a window called earlier when was hovered over. </li></ul>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">It is recommended to configure these events in conjunction with each other.</p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">System tab</span></h2>
|
||||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="font-family: Inter;">System settings 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.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">To finish configuration, click </span><span style="font-family: Inter; font-weight: bold;">Save</span><span style="font-family: Inter;">. To make the form available to users, click </span><span style="font-family: Inter; font-weight: bold;">Save</span><span style="font-family: Inter;"> and </span><span style="font-family: Inter; font-weight: bold;">Publish</span><span style="font-family: Inter;"> in the designer's toolbar.</span></p>
|
||||
<h2 class="p_Heading2"><span class="f_Heading2">Example</span></h2>
|
||||
<p style="line-height: 1.20; margin: 0 0 11px 0;"><span style="font-family: Inter;">In this example, the </span><span style="font-family: Inter; font-weight: bold;">Counter</span><span style="font-family: Inter;"> is attached to the </span><span style="font-family: Inter; font-weight: bold;">New transactions</span><span style="font-family: Inter;"> button and shows the total amount of new transactions.</span></p>
|
||||
<p style="line-height: 1.20; margin: 0 0 11px 0;"><img alt="Cou2" width="527" height="331" style="margin:0;width:527px;height:331px;border:none" src="cou2.png"/></p>
|
||||
|
||||
<div class="bottom-nav">
|
||||
|
||||
<a id="prev-link" class="topic__navi_prev" href="line.html">
|
||||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||||
class="bottom-nav__link">line.html</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a id="next-link" class="topic__navi_next" href="code_widget.html">
|
||||
<span class="bottom-nav__link">code_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">© 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>
|
||||
Reference in New Issue
Block a user