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

265
platform/table-visibility.html Normal file
View File

@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table settings</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="You can adjust the width and height of table rows, manage numbering, grouping, etc. To access the settings in the app form settings, select the desired field and click Table..." />
<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; App builder &gt; <a href="360010201779.html">Table data type</a> / Table settings</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Table settings</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.28; margin: 0 0 11px 0;">You can adjust the width and height of table rows, manage numbering, grouping, etc. To access the settings in the <a href="360009918011.html#configuringformfields" class="topiclink">app form settings</a>, select the desired field and click <span style="font-weight: bold;">Table Settings</span>.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="task_settings_01" width="517" height="472" style="margin:0;width:517px;height:472px;border:none" src="task_settings_01.png"/></p>
<h2 class="p_Heading2"><a id="generalsettings" class="hmanchor"></a><span class="f_Heading2">General settings</span></h2>
<p class="p_Normal">General settings are applied to the whole table. You can adjust the width and height of table rows, manage numbering, grouping, or sorting of rows, as well as hide or display columns’ headers and footers. Let’s see how these options work:</p>
<p style="line-height: 1.20; margin: 19px 0 0 0;"><img alt="task_settings_02" width="621" height="505" style="margin:0;width:621px;height:505px;border:none" src="task_settings_02.png"/></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Fit Table to Window </span>or<span style="font-weight: bold;"> Custom</span>. Select <span style="font-weight: bold;">Fit Table to Window </span>if you want the table to stretch across the width of the page. Column sizes will be percentages of the total table’s width. Select <span style="font-weight: bold;">Custom</span> to set a fixed pixel width for each column. The total width of the table will equal the sum of the column sizes.</li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Minimum row height in pixels (35 or higher)</span>. To align the table, set the height of its rows. The minimum value is 35 pixels.</li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Show sequential number for rows</span>. A column for the row’s number will appear in the table. Numbers will be filled out automatically.</li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Allow deleting rows with read-only cells</span>. Enable this option to let users remove rows even if the table includes read-only columns. Let’s say there are read-only cells in the <span style="font-weight: bold;">Order details</span> table. These are the cells that data from the <span style="font-weight: bold;">Orders</span> app is passed to. The rest of the data in the table is entered by the sales rep. If the option is enabled, the sales rep will be able to delete a row in the table, for example, if the data is incorrect.</li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><a id="grouptablerows" class="hmanchor"></a><span style="font-weight: bold;">Group table rows</span>. This option allows structuring data in the table and displaying it in a more convenient way.<ul style="list-style-type:circle">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">In the<span style="font-weight: bold;"> Group by column </span>field, specify the column that rows need to be grouped by.</li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">Use the <span style="font-weight: bold;">Sort in</span> option to place groups of cells in ascending or descending order. If you group items based on a <span style="font-weight: bold;">String</span> type field, items will be sorted alphabetically. </li></ul></li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Note that if the <a href="table-visibility.html#sorting" class="topiclink">Sorting</a> option is enabled for a column, you are not allowed to group rows. In the notification that appears, select the option that you want to keep.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="table-visibility-3" width="645" height="420" style="margin:0;width:645px;height:420px;border:none" src="table-visibility-3.png"/></p>
<h2 class="p_Heading2"><span class="f_Heading2">Column settings</span></h2>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">For each column, you can set:</span></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;"><a href="table-visibility.html#width" class="topiclink">Width</a>.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;"><a href="table-visibility.html#design" class="topiclink">Design</a>.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;"><a href="table-visibility.html#visibility" class="topiclink">Visibility</a>.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;"><a href="table-visibility.html#readonlyandrequiredflags" class="topiclink">Read only and Required flags</a>.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;"><a href="table-visibility.html#sorting" class="topiclink">Sorting</a>.</span></li></ul>
<h3 class="p_Heading3"><a id="width" class="hmanchor"></a><span class="f_Heading3">Width</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">Depending on the </span><span style="font-family: Inter; font-weight: bold;">Fit Table to Window/Custom </span><span style="font-family: Inter;">option, a column’s size is set either as a percentage of the table’s width or in pixels. To set the custom column width, drag the column’s border.</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="table-visibility-4" width="817" height="300" style="margin:0;width:817px;height:300px;border:none" src="table-visibility-4.png"/></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">A column’s width can also change automatically to match the width of its content. To enable this option, click the value of the column’s width and select one of the following options:</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="table_width_01" width="626" height="438" style="margin:0;width:626px;height:438px;border:none" src="table_width_01.png"/></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter; font-weight: bold;">Set to maximum</span><span style="font-family: Inter;">. This setting is available when the </span><span style="font-family: Inter; font-weight: bold;">Fit Table to Window</span><span style="font-family: Inter;"> option is selected. The column will be as wide as possible, limited by the width of other columns. When you select this option, the width’s value will change to </span><span style="font-family: Inter; font-weight: bold;">max</span><span style="font-family: Inter;">. </span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter; font-weight: bold;">Set to minimum</span><span style="font-family: Inter;">. This setting is available when the </span><span style="font-family: Inter; font-weight: bold;">Custom</span><span style="font-family: Inter;"> option is selected. The column’s width will be equal to the size of the longest item in its cells. When you select this option, the width’s value will change to </span><span style="font-family: Inter; font-weight: bold;">min</span><span style="font-family: Inter;">.</span></li></ul>
<h3 class="p_Heading3"><a id="design" class="hmanchor"></a><span class="f_Heading3">Design</span></h3>
<p class="p_Normal">You can apply a background color to columns, change the text’s alignment or font color, and make it underlined, italic, or bold. To do that, click the gear icon next to a column’s name. In the pop-up window that opens, switch between different options to format text the way you want.</p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="table-visibility-6" width="559" height="453" style="margin:0;width:559px;height:453px;border:none" src="table-visibility-6.png"/></p>
<h3 class="p_Heading3"><a id="visibility" class="hmanchor"></a><span class="f_Heading3">Visibility</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">You can hide the headers and footers of all the columns in the table. To do that, click the <img alt="eye" width="23" height="18" style="margin:0;width:23px;height:18px;border:none" src="eye.png"/><span class="f_ImageCaption" style="font-size: 16px;"> </span>icon on the left of the table. To make a hidden element visible again, click <img alt="eye-closed" width="23" height="18" style="margin:0;width:23px;height:18px;border:none" src="eye-closed.png"/>.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="table_settings_05" width="604" height="427" style="margin:0;width:604px;height:427px;border:none" src="table_settings_05.png"/></p>
<h2 class="p_Heading2"><a id="readonlyandrequiredflags" class="hmanchor"></a><span class="f_Heading2">Read only and Required flags</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">To ensure that data in a column will not be changed, use the <span style="font-weight: bold;">Read only</span> option. To do that, click the <img alt="read only" width="20" height="19" style="margin:0;width:20px;height:19px;border:none" src="hmfile_hash_96aa8b20.png"/> icon in the row above the column header. When a user works with the table, it will be impossible to edit cells in this column.</p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-weight: bold;">Important</span>: By default, users cannot delete table rows if the table contains read-only columns. To change this, in the table settings, enable the <span style="font-weight: bold;">Allow deleting rows with read-only cells</span> option.</p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="table_settings_06" width="574" height="402" style="margin:0;width:574px;height:402px;border:none" src="table_settings_06.png"/></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">If calls in a column cannot be left empty, use the <span style="font-weight: bold;">Required</span> option. To do that, click the asterisk icon in the row above the column header. The icon color will change to red. Now when an employee works with the table, it will be impossible to save the changes without filling out cells in this column. To remove the <span style="font-weight: bold;">Required</span> flag, click the asterisk icon again.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-weight: bold;">Important</span>: All empty cells in the column will need to be filled out.</p>
<h2 class="p_Heading2"><a id="sorting" class="hmanchor"></a><span class="f_Heading2">Sorting</span></h2>
<p><span style="font-family: Inter;">You can sort data in columns in ascending and descending order, as well as alphabetically. Sorting is only available for the following types of fields: <a href="360009707032.html#number" class="topiclink">Number</a>, </span><span style="color: #0000ff;"><a href="360009707032.html#date-time" class="topiclink">Date/Time</a></span>,<span style="font-family: Inter;"> <a href="360009707032.html#money" class="topiclink">Money</a>, <a href="360009707032.html#string" class="topiclink">String</a>, <a href="360009707032.html#users" class="topiclink">Users</a>, <a href="360009707032.html" class="topiclink">App</a>, <a href="360009707032.html#phone-number" class="topiclink">Phone number</a>, <a href="360009707032.html#full-name" class="topiclink">Full Name</a>, and <a href="360009707032.html#email" class="topiclink">Email address</a>.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">To enable sorting for a column, check the </span><span style="font-family: Inter; font-weight: bold;">Sorting</span><span style="font-family: Inter;"> box when you <a href="360010201779.html#addingtabletoappform" class="topiclink">create</a> or edit it.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><img alt="table-visibility-9" width="531" height="375" style="margin:0;width:531px;height:375px;border:none" src="table-visibility-9.png"/></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">Note that sorting is not available if you use the <a href="table-visibility.html#grouptablerows" class="topiclink">Group table rows</a> option. In the notification that appears, select the option you want to keep.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">When you enable sorting, you can open an app item’s view form and click the corresponding column header. Cells will be sorted in the ascending order. If you click the header again, they will be sorted in descending order. Another click will reset the order of cells.</span></p>
<h2 class="p_Heading2"><span class="f_Heading2">Column settings on forms and in the context</span></h2>
<p class="p_Normal">Column visibility, as well as the Read only and Required flags are configured differently on app forms, in interfaces, and in business process tasks. Let’s see how to change table settings in each case.</p>
<h3 class="p_Heading3"><span class="f_Heading3">On a business process task form</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Change the table settings in the following way:</p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">On the business process diagram, double-click a <span style="font-weight: bold;">Task</span> activity and open the <span style="font-weight: bold;">Form</span> tab.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the <span style="font-weight: bold;">Name on Form</span> column, select a <span style="font-weight: bold;">Table</span> type field.</li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the window that opens, go to the <span style="font-weight: bold;">Columns display</span> tab.</li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Check boxes to enable or disable the following options:<ul style="list-style-type:disc">
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Hide a column: <img alt="eye-closed" width="23" height="18" style="margin:0;width:23px;height:18px;border:none" src="eye-closed.png"/>.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Make cells in a column required: <img alt="required-star-red" width="20" height="20" style="margin:0;width:20px;height:20px;border:none" src="required-star-red.png"/>.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Make cells in a column read-only and restrict editing: <img alt="read only" width="20" height="19" style="margin:0;width:20px;height:19px;border:none" src="hmfile_hash_96aa8b20.png"/><span class="f_ImageCaption" style="font-size: 16px; font-weight: normal;">.</span></li></ul></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 13px;"><img alt="table-visibility-10" width="579" height="321" style="margin:0;width:579px;height:321px;border:none" src="table-visibility-10.png"/></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">To let users delete rows in tables with read-only columns, enable the </span><span style="font-family: Inter; font-weight: bold;">Allow deleting rows with read-only cells </span><span style="font-family: Inter;">option in the table’s settings.</span></p>
<ol style="list-style-type:upper-roman" start="5">
<li value="5" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Save the changes.</span></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter; font-weight: bold;">Important</span><span style="font-family: Inter;">: The column settings you configure here only apply to the current task in the business process.</span></p>
<h3 class="p_Heading3"><span class="f_Heading3">On the form of an app, widget, or page</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">If a <span style="font-weight: bold;">Table</span> type field is placed on the form of an app, a page, or a widget, you can configure columns as follows:</p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Open the form template in the <a href="360028941032.html" class="topiclink">advanced mode</a>.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Select or <a href="360029250931.html#addingpropertytotheform" class="topiclink">add</a> a <span style="font-weight: bold;">Table</span> type property to the form. To do that, drag it from the right-side panel.</li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Click the gear icon in the property header.</li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the window that opens, go to the <span style="font-weight: bold;">Display settings</span> tab.</li><li value="5" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Check boxes to enable or disable the following options:</li></ol>
<ol style="list-style-type:upper-roman"><ul style="list-style-type:disc">
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Hide a column: <img alt="eye-closed" width="23" height="18" style="margin:0;width:23px;height:18px;border:none" src="eye-closed.png"/>.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Make cells in a column required: <img alt="required-star-red" width="20" height="20" style="margin:0;width:20px;height:20px;border:none" src="required-star-red.png"/>.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Make cells in a column read-only and restrict editing: <img alt="read only" width="20" height="19" style="margin:0;width:20px;height:19px;border:none" src="hmfile_hash_96aa8b20.png"/><span class="f_ImageCaption" style="font-size: 16px; font-weight: normal;">.</span></li></ul></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 13px;"><img alt="table-visibility-11" width="553" height="323" style="margin:0;width:553px;height:323px;border:none" src="table-visibility-11.png"/></p>
<ol style="list-style-type:upper-roman" start="6">
<li value="6" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Save the changes.</span></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter; font-weight: bold;">Important</span><span style="font-family: Inter;">: These table settings are only applied on the form they are configured for. For example, if you hide certain columns of the table on the app create form, they will still be displayed on the view form.</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">Instead of checking boxes, you can select a context variable of the <a href="360009707032.html#yes-no-switch" class="topiclink">Yes/No switch</a> type. To do that, click the </span><img alt="bind_table-icon" width="21" height="21" style="margin:0;width:21px;height:21px;border:none" src="bind_table-icon.png"/> <span style="font-family: Inter;">icon next to the checkbox you need. Select a variable from the list. The column settings will be turned on or off depending on the value of the bound variable.</span></p>
<p class="p_Normal"><a class="dropdown-toggle" style="font-style: normal; font-weight: normal; color: #000000; background-color: transparent; text-decoration: none;" href="javascript:HMToggle('toggle','TOGGLE0186A1')">Example of binding column display settings to a variable</a></p>
<div id="TOGGLE0186A1" class="dropdown-toggle-body" style="text-align: left; text-indent: 0; line-height: 1.28; padding: 0 0 0 0; margin: 0 0 11px 0;"><table style="border:none; border-spacing:0;">
<tr>
<td style="vertical-align:top; padding:0; border:none"><p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">Let’s say you are keeping records of materials in the </span><span style="font-family: Inter; font-weight: bold;">Stock</span><span style="font-family: Inter;"> app. In the <a href="context_types.html" class="topiclink">app context</a>, there is a </span><span style="font-family: Inter; font-weight: bold;">Materials</span><span style="font-family: Inter;"> in stock property of the </span><span style="font-family: Inter; font-weight: bold;">Table</span><span style="font-family: Inter;"> type, which stores information about the current stock of materials. You need to send the information to external customers, but without displaying the purchase price. To do this:</span></p>
<ol style="list-style-type:decimal">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Add a </span><span style="font-family: Inter; font-weight: bold;">Yes/No switch</span><span style="font-family: Inter;"> field named </span><span style="font-family: Inter; font-weight: bold;">External customer</span><span style="font-family: Inter;"> to the app context.</span></li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Open the view <a href="360029250931.html" class="topiclink">form template</a> in <a href="360028941032.html" class="topiclink">advanced mode</a>.</span></li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Select the </span><span style="font-family: Inter; font-weight: bold;">Materials in stock</span><span style="font-family: Inter;"> property.</span></li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">In the display settings, bind the </span><span style="font-family: Inter; font-weight: bold;">Purchase price</span><span style="font-family: Inter;"> property with the </span><span style="font-family: Inter; font-weight: bold;">External customer</span><span style="font-family: Inter;"> property.</span></li><li value="5" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Save the settings.</span></li><li value="6" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Add the </span><span style="font-family: Inter; font-weight: bold;">External customer</span><span style="font-family: Inter;"> property to the form.</span></li><li value="7" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Save and publish the form.</span></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">On the form that shows materials in stock, the </span><span style="font-family: Inter; font-weight: bold;">External customer</span><span style="font-family: Inter;"> property will appear. If an employee selects it before sending the form, </span><span style="font-family: Inter; font-weight: bold;">Purchase price</span><span style="font-family: Inter;"> will be hidden for the recipient.</span></p>
</td>
</tr>
</table>
</div>
<h3 class="p_Heading3"><span class="f_Heading3">On an app’s form in the standard mode</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">In an app, you can also quickly change columns’ settings in the </span><span style="font-family: Inter; font-weight: bold;">Form Settings</span><span style="font-family: Inter;"> window on the </span><span style="font-family: Inter; font-weight: bold;">Create</span><span style="font-family: Inter;">, </span><span style="font-family: Inter; font-weight: bold;">View</span><span style="font-family: Inter;">, and </span><span style="font-family: Inter; font-weight: bold;">Edit</span><span style="font-family: Inter;"> tabs without having to open the interface designer. To do that:</span></p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Click the gear icon on the right of the app name and select </span><span style="font-family: Inter; font-weight: bold;">Form Settings</span><span style="font-family: Inter;">.</span></li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Go to the </span><span style="font-family: Inter; font-weight: bold;">Create</span><span style="font-family: Inter;">, </span><span style="font-family: Inter; font-weight: bold;">View</span><span style="font-family: Inter;">, or </span><span style="font-family: Inter; font-weight: bold;">Edit</span><span style="font-family: Inter;"> tab.</span></li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">To change the settings of a </span><span style="font-family: Inter; font-weight: bold;">Table</span><span style="font-family: Inter;"> type field, select it in the </span><span style="font-family: Inter; font-weight: bold;">Context</span><span style="font-family: Inter;"> column on the left and drag it to the list of properties on the right.</span></li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Click the field name in the </span><span style="font-family: Inter; font-weight: bold;">Name on form</span><span style="font-family: Inter;"> column.</span></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="table-visibility-12" width="633" height="344" style="margin:0;width:633px;height:344px;border:none" src="table-visibility-12.png"/></p>
<ol style="list-style-type:upper-roman" start="5">
<li value="5" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">In the window that opens, open the </span><span style="font-family: Inter; font-weight: bold;">Columns display</span><span style="font-family: Inter;"> tab.</span></li><li value="6" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Check boxes to enable or disable the following options:</span></li></ol>
<ol style="list-style-type:upper-roman"><ul style="list-style-type:disc">
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Hide a column: </span><img alt="eye-closed" width="23" height="18" style="margin:0;width:23px;height:18px;border:none" src="eye-closed.png"/><span style="font-family: Inter;">.</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Make cells in a column required: </span><img alt="required-star-red" width="20" height="20" style="margin:0;width:20px;height:20px;border:none" src="required-star-red.png"/>.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Make cells in a column read-only and restrict editing: </span><img alt="read only" width="20" height="19" style="margin:0;width:20px;height:19px;border:none" src="hmfile_hash_96aa8b20.png"/><span class="f_ImageCaption" style="font-size: 16px; font-weight: normal;">.</span></li></ul></li></ol>
<ol style="list-style-type:upper-roman" start="7">
<li value="7" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-family: Inter;">Save the changes.</span></li></ol>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="360010201779.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">360010201779.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="360007708691.html">
<span class="bottom-nav__link">360007708691.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>
<script type="text/javascript">
HMInitToggle('TOGGLE0186A1','hm.type','dropdown','hm.state','0');
</script>
</body>
</html>