220 lines
24 KiB
HTML
220 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Table</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 allows you to create an interactive report in the form of a table whose content changes depending on the user’s choices. You can use apps of any type, as well as..." />
|
||
<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 > Report widgets / Table</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Table</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: 7px 0 7px 0;"><span style="font-family: Inter; color: #394149;">The widget allows you to create an interactive report in the form of a table whose content changes depending on the user’s choices. You can use apps of any type, as well as <a href="contract.html" class="topiclink">Contracts</a> and <a href="report.html" class="topiclink">Reports</a> as data sources for the table.</span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter; color: #394149;">For instance, you can configure a table that displays summarized information on sales volumes for each manager during a selected period. The results can be filtered or sorted according to your preferences.</span></p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Configure the widget</span></h2>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">You can add the widget to an <a href="360009918011.html" class="topiclink">app item form</a> or to a <a href="360009924451.html" class="topiclink">page</a>.</p>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">To configure the widget:</p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">In the <a href="interface_designer.html" class="topiclink">interface designer</a>, drag the widget from the right-hand panel to the modeling canvas or click the <span style="font-weight: bold;">+Widget </span>button.</li></ol>
|
||
<ol style="list-style-type:upper-roman" start="2">
|
||
<li value="2" style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">In the pop-up, in the </span><span style="font-family: Inter; font-weight: bold;">App</span><span style="font-family: Inter;"> field specify the source, the data from which you want to display in the form of a table.</span></li></ol>
|
||
<p style="text-indent: -24px; line-height: 1.20; background: #ffffff; margin: 7px 0 16px 58px;"><span style="font-family: Inter; color: #394149;"> </span><img alt="widget_table_01" width="605" height="258" style="margin:0;width:605px;height:258px;border:none" src="widget_table_01.png"/></p>
|
||
<p style="text-align: justify; text-indent: -24px; line-height: 1.20; background: #ffffff; margin: 7px 0 16px 58px;">To do this, use one of the following methods:</p>
|
||
<ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">If you want to create a table with all app items, click the <span style="font-weight: bold;">Select App</span> link and specify the app, contract, or report whose data you want to view as a table. For example, the <span style="font-weight: bold;">Deals</span> app.</li></ul>
|
||
<p style="text-align: justify; text-indent: -4px; line-height: 1.20; background: #ffffff; margin: 0 131px 16px 38px;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">If you want to display data on certain app items in the table, click the <img alt="clip0231" width="19" height="20" style="margin:0;width:19px;height:20px;border:none" src="clip0231.png"/> icon and specify the variable storing them. Variables of the <span style="color: #0000ff;"><a href="360009707032.html" class="topiclink">App</a></span> type with the active option <span style="font-weight: bold;">Many</span> are available for selection. In this case, only the data to which the current user has access will appear in the table. For example, a variable can store items pre-filtered by <span style="color: #0000ff;"><a href="360027203731.html" class="topiclink">scripts</a></span>.</li></ul>
|
||
<p style="text-align: justify; text-indent: -24px; line-height: 1.20; background: #ffffff; margin: 7px 0 16px 58px;">When you select the data source, additional options will appear in the settings window.</p>
|
||
<ol style="list-style-type:upper-roman" start="3">
|
||
<li value="3" style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;">On the <span style="font-weight: bold;">Table</span> tab, specify the parameters for data display<span style="font-family: Inter;">:</span></li></ol>
|
||
<p style="text-indent: -24px; line-height: 1.20; background: #ffffff; margin: 0 0 11px 48px;"><img alt="widget_table_02" width="637" height="788" style="margin:0;width:637px;height:788px;border:none" src="widget_table_02.png"/></p>
|
||
<ol style="list-style-type:upper-roman" start="3"><ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter; font-weight: bold;">Displayed fields</span><span style="font-family: Inter;">. Select the app fields to be displayed as columns.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Sorting field</span>. Select the app field that determines the order of items in the list.<ul style="list-style-type:circle">
|
||
<li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Ascending order</span>. Enable this option to sort the values of the field in ascending order. If you specified a <span style="font-weight: bold;">String</span> type field, the records will be sorted in alphabetical order. If this option is disabled, the values of the field will be sorted in descending order.</li></ul>
|
||
<li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter; font-weight: bold;">Filter fields</span><span style="font-family: Inter;">. Select the app properties that are used to filter items. The user will be able to select the values of these fields over the table.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter; font-weight: bold;">Aggregation fields</span><span style="font-family: Inter;">. This field automatically calculates and shows the sum of all values in the column. You can only select the fields you added in the previous step. Note that the sum is calculated only for </span><span style="font-family: Inter; font-weight: bold;">Money</span><span style="font-family: Inter;"> and </span><span style="font-family: Inter; font-weight: bold;">Number</span><span style="font-family: Inter;"> data types.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Show button for refreshing items</span>. Enable this option to display a button above the report to refresh its data.</li></ul></li></ol>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 34px;"><span style="font-family: Inter; color: #394149;">When you save the settings, you can see the table draft on the modeling canvas. You can edit the table by </span><span style="color: #394149;">clicking on the gear icon.</span></p>
|
||
<ol style="list-style-type:upper-roman" start="4">
|
||
<li value="4" style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 8px;">On the <span style="font-weight: bold;">Default filter</span> tab, you can specify the app properties to be used as automatic filters for the data output in the table. To do this:</li></ol>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 8px;">Click <span style="font-weight: bold;">+ Filter</span> and then on the <span style="font-weight: bold;"><Not defined></span> link that appears.</li><li value="2" style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 8px;">From the drop-down list, select the app property.</li><li value="3" style="text-align: justify; line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 8px;">Set a value for the property. For example, for the <span style="font-weight: bold;">Deals</span> app, you can set filters on the <span style="font-weight: bold;">Budget</span> property by specifying its lower and upper bounds.</li></ol>
|
||
<p style="text-align: justify; text-indent: -24px; line-height: 1.20; background: #ffffff; margin: 0 0 8px 48px;"><img alt="widget_table_03" width="706" height="373" style="margin:0;width:706px;height:373px;border:none" src="widget_table_03.png"/></p>
|
||
<p class="p_Normal">To link a property value to a variable, click the <img alt="clip0232" width="19" height="20" style="margin:0;width:19px;height:20px;border:none" src="clip0232.png"/> icon. To remove the filter, click <img alt="clip0233" width="16" height="16" style="margin:0;width:16px;height:16px;border:none" src="clip0233.png"/> and confirm the action.</p>
|
||
<ol style="list-style-type:upper-roman" start="5">
|
||
<li value="5" class="p_Normal">Click Save.</li></ol>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 34px;"><img alt="table-widget-2" width="830" height="441" style="margin:0;width:830px;height:441px;border:none" src="table-widget-2.png"/></p>
|
||
<ol style="list-style-type:upper-roman" start="6">
|
||
<li value="6" style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #394149;">To finish and make the table available to users, click </span><span style="font-weight: bold; color: #394149;">Save </span><span style="color: #394149;">and </span><span style="font-weight: bold; color: #394149;">Publish</span><span style="color: #394149;"> on the top panel of the interface designer.</span></li></ol>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Set up access to the report</span></h2>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">If the widget is placed on a separate page, you can specify groups of users who have access to it and will be able to view data from the table. To do this, configure</span><span style="font-size: 15px;"> </span><a href="360009924451.html#visibility" class="topiclink">access</a> to <span style="font-family: Inter;">the page</span>. <span style="font-family: Inter;">To the right of its name, click the gear icon and select </span><span style="font-family: Inter; font-weight: bold;">Page Access</span><span style="font-family: Inter;">.</span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">In the window that opens, specify <a href="360007146071.html" class="topiclink">groups of users</a> who can access the page, for example, </span><span style="font-family: Inter; font-weight: bold;">Managers</span><span style="font-family: Inter;">.</span></p>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><img alt="table-page-access" width="883" height="331" style="margin:0;width:883px;height:331px;border:none" src="table-page-access.png"/></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter; color: #394149;">Now the table will be visible only to them.</span></p>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="chart.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">chart.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="project-widgets.html">
|
||
<span class="bottom-nav__link">project-widgets.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>
|