220 lines
25 KiB
HTML
220 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Interface designer</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="In the Interface designer, you can customize the company’s interfaces with pre‑built and custom widgets." />
|
||
<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> / Interface designer</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Interface designer</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: 14px 0 0 0;"><span style="color: #394149;">In the Interface designer, you can customize the company’s interfaces with pre‑built and custom widgets.</span></p>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="font-weight: bold; color: #394149;">Widgets</span><span style="color: #394149;"> are interface elements that allow users to upload files, display data, activity streams, tables, users lists, etc.</span></p>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">You can use widgets to:</span></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="color: #394149;"><a href="360027211631.html" class="topiclink">Customize pages</a>.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="color: #394149;"><a href="create_form.html" class="topiclink">Customize forms</a>.</span></li></ul>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="color: #394149;">By combining different widgets, you create an interface tailored for your users. In addition, you can save your widget combination and use it on different pages and forms over and over again. This way you can create various interfaces catered to the needs of your company. </span></p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Open the interface designer</span></h2>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 14px 0 0 0;"><span style="color: #394149;">The interface designer helps you design app forms and pages, as well as create <a href="user_widgets.html" class="topiclink">custom widgets</a>. There are several ways to open the designer depending on the item that you want to set up.</span></p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">To <a href="interface_settings.html" class="topiclink">create an interface</a>:</li></ol>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="color: #394149;">Go to </span><span style="font-weight: bold; color: #394149;">Administration > Interfaces</span><span style="color: #394149;">. Create a new widget of the </span><span style="font-weight: bold; color: #394149;">Page</span><span style="color: #394149;"> type or other custom widget. The designer will open automatically.</span></li><li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="color: #394149;">To set up an interface for a particular workspace or app, go to the app or workspace menu, click on the gear icon next to its name, and select </span><span style="font-weight: bold; color: #394149;">Interfaces</span><span style="color: #394149;">. Then create a new page or widget. The designer will open automatically</span>.</li></ul>
|
||
<ol style="list-style-type:decimal" start="2">
|
||
<li value="2" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="color: #394149;">To set up a new page from the main menu or workspace menu</span>: </li></ol>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><a href="360009924451.html" class="topiclink">Add a new page</a> or open an existing one. <span style="color: #394149;">Click on the gear icon in the top right corner of the page</span><span style="font-weight: bold; color: #394149;"> </span><span style="color: #394149;">and click </span><span style="font-weight: bold; color: #394149;">Widget Builder</span>.</li></ul>
|
||
<ol style="list-style-type:decimal" start="3">
|
||
<li value="3" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">To set up an app form: </li></ol>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;">Open an app form in the <a href="360028941032.html" class="topiclink">advanced mode</a>. <span style="color: #394149;">Open the tab corresponding to the form you wish to set up, click</span><span style="font-weight: bold; color: #394149;"> <Default></span><span style="color: #394149;">, then click </span><span style="font-weight: bold; color: #394149;">+ Create Form</span><span style="color: #394149;">. If the form has been created earlier and now you want to edit it, click </span><span style="font-weight: bold; color: #394149;">Edit Form</span><span style="color: #394149;">. To learn more, see <a href="360029250931.html" class="topiclink">Form templates</a></span>.</li></ul>
|
||
<p class="p_Normal"><a id="view-mode" class="hmanchor"></a><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; color: #374151;">If another administrator is already working with an interface element in the designer, you can open this element in the designer for viewing only. To do this, when entering the designer, click </span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold; color: #374151;">Open in View Mode</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; color: #374151;"> in the pop-up window.</span></p>
|
||
<h2 class="p_Heading2"><a id="interface-setting" class="hmanchor"></a><span class="f_Heading2">How to work in the interface designer</span></h2>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Here is what the interface designer looks like:</p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="interface_designer-1" width="1366" height="714" style="margin:0;width:1366px;height:714px;border:none" src="interface_designer-1.png"/></p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Modeling canvas</span>. This is a workspace within which you will create custom widgets and customize the layout of pages or forms with widgets and properties. You can easily find any nested element. </li><li value="2" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;">The <a href="interface_designer.html#toolbar" class="topiclink">toolbar</a> allows you to save, publish, or debug an interface, as well as check whether the widgets are correctly composed. You can also undo or redo an action.</li><li value="3" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;">The interface designer has the following main tabs: <span style="font-weight: bold;">Template</span>, <span style="font-weight: bold;">Context</span>,<span style="font-weight: bold;"> Scripts</span>,<span style="font-weight: bold;"> History</span>, <span style="font-weight: bold;">Settings</span>, and<span style="font-weight: bold;"> Files</span>.</li><li value="4" style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;">The tabs on the right are for adding components to interfaces:</li></ol>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Widgets</span>. All available widgets are grouped by <a href="360028901811.html" class="topiclink">type</a>.</li><li style="line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Properties</span>. <a href="common_widget_settings.html" class="topiclink">System properties</a> of widgets, all the <a href="360028941112.html" class="topiclink">context</a> variables of an app or business process, and properties added on the <a href="designer-tabs.html#context" class="topiclink">Context</a> tab.</li></ul>
|
||
<h3 class="p_Heading3"><a id="toolbar" class="hmanchor"></a><span class="f_Heading3">Top toolbar </span></h3>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;">The top toolbar has the following controls for working with the interface you are setting up:</p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="interface_designer-toolbar" width="521" height="85" style="margin:0;width:521px;height:85px;border:none" src="interface_designer-toolbar.png"/></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-weight: bold;">Save</span>.<span style="font-weight: bold;"> </span>The page or form that you have set up will be saved as a draft. The changes will not be made available to users. You can return and edit it later.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Check</span>. The widgets that you have added are checked for errors. If there is an error, for example, there is an invalid scripts, you will see an alert.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Publish</span>.<span style="font-weight: bold;"> </span>After being published, scripts are displayed on forms or pages, and become available to users. Each time you want your changes to be applied, you need to publish the interface. <a id="unpublish" class="hmanchor"></a><span style="font-size: 15px; color: #394149;">When publishing a version, you can:</span></li></ul>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="line-height: 1.55;"><span style="font-size: 15px; color: #394149;">leave a comment;</span></li><li style="line-height: 1.55; margin-top: 11px; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; color: #394149;">enable the</span><span style="font-size: 15px; color: #394149;"> </span><span style="font-family: 'Times New Roman',Times,Georgia,serif; font-weight: bold; color: #394149;">Unpublish all previous versions</span><span style="font-size: 15px; color: #394149;"> option. This will prevent the scripts from older widget versions from running, and will help avoid applying versions with errors .</span></li></ul></li></ul>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Debug</span>. A window opens showing you how the form or page will look like in the interface after it is published. You can learn more in <a href="interface-debug.html" class="topiclink">Debug an interface</a>.</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Undo</span>.<span style="font-weight: bold;"> </span><span style="font-size: 15px; color: #394149;">When working in the </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Template</span><span style="font-size: 15px; color: #394149;"> tab, you can undo your latest action: adding or deleting a widget, moving it, changing its settings.</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Redo</span>.<span style="font-weight: bold;"> </span>You can repeat the action that you have undone.</li><li class="p_Normal"><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; font-weight: bold; color: #374151;">Start Editing</span><span style="font-family: 'Segoe UI',Tahoma,Verdana,Arial,sans-serif; color: #374151;">. This action is only available if you opened an interface element in the <a href="interface_designer.html#view-mode" class="topiclink">view mode</a>. It allows you to switch to editing mode if another administrator has finished working with this element in the designer.</span></li></ul>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало внимание</span></p>
|
||
<p class="p_Normal">To make changes available to users, don’t forget to <span style="font-weight: bold;">Publish</span> the form or page that you have set up.</p>
|
||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец внимание</span></p>
|
||
<h3 class="p_Heading3"><span class="f_Heading3"> </span></h3>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="interface_settings.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">interface_settings.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="designer-tabs.html">
|
||
<span class="bottom-nav__link">designer-tabs.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>
|