Files
help365/platform/how_to_create_an_app.html
koziavin 00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
update
2025-05-29 16:42:45 +04:00

211 lines
24 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Create an app</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="Apps are BRIX basic system components. Apps differ by functionality, for example, Agreements, Candidates CVs, Deals, etc. They are easy to create and modify, making the system..." />
<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>Getting started / Create an app</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Create an app</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 class="p_Normal" style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-weight: bold;">Apps</span> are BRIX<span style="color: #394149;"> basic system components. Apps differ by functionality, for example, </span><span style="font-weight: bold; color: #394149;">Agreements</span><span style="color: #394149;">, </span><span style="font-weight: bold;">Candidates CVs</span>, <span style="font-weight: bold;">Deals</span>,<span style="color: #394149;"> etc. They are easy to create and modify, making the system quickly adapt to any business aspects.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 19px 0 0 0;"><span style="color: #394149;">The system offers three types of apps. Each type is suited for a certain task:</span></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; background: #ffffff; margin-top: 19px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold; color: #394149;">Standard</span><span style="color: #394149;">.</span><span style="font-weight: bold; color: #394149;"> </span><span style="color: #394149;">These apps are convenient for recording and storing orders, employees individual records, contacts, potential clients, etc.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 19px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold; color: #394149;">Document</span><span style="color: #394149;">.</span><span style="font-weight: bold; color: #394149;"> </span><span style="color: #394149;">These apps help you set up document flows. By creating a type of document, for example, </span><span style="font-weight: bold; color: #394149;">Invoices</span><span style="color: #394149;">, you determine their processing, registration and route.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 19px; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold; color: #394149;">Event</span><span style="color: #394149;">.</span><span style="font-weight: bold; color: #394149;"> </span><span style="color: #394149;">A calendar that allows you to create and display different events and meetings, for example, interviews.</span></li></ul>
<p style="line-height: 1.20; background: #ffffff; margin: 19px 0 0 0;"><span style="color: #394149;">Apps are located in workspaces and help organize work and data storage.</span></p>
<h2 class="p_Heading2"><span class="f_Heading2" style="font-size: 24px;">Create a new app</span></h2>
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="color: #394149;">Create a </span><span style="font-weight: bold; color: #394149;">Contracts</span><span style="color: #394149;"> workspace where you will put the </span><span style="font-weight: bold; color: #394149;">Contracts</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Add. agreements</span><span style="color: #394149;"> and </span><span style="font-weight: bold; color: #394149;">Certificates</span><span style="color: #394149;"> apps:</span></p>
<ul style="list-style-type:disc">
<li class="p_Normal">Go to <span style="font-weight: bold;">Main page</span> and click the <span style="font-weight: bold;">Create</span> button in the <span style="font-weight: bold;">Build from Scratch</span> block. </li><li class="p_Normal">In the pop-up window enter <span style="font-weight: bold;">Contracts</span> as the workspace name. Select an icon and set the visibility, specify whether it will be visible to everyone or only to the administrators.<img alt="creating-app-1" width="1422" height="766" style="margin:0;width:1422px;height:766px;border:none" src="creating-app-1.gif"/></li></ul>
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><span style="color: #394149;">Now, add a new app into the workspace:</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;">Click </span><span style="font-weight: bold; color: #394149;">Create a new app</span><span style="color: #394149;"> button in the workspace.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="color: #394149;">Fill in the settings window. Select </span><span style="font-weight: bold; color: #394149;">Document</span><span style="color: #394149;"> as a type. State the name of the app, name its items, select an icon, etc. To save the changes, click </span><span style="font-weight: bold; color: #394149;">Create</span><span style="color: #394149;">.</span></li></ul>
<p style="text-indent: -24px; line-height: 1.20; background: #ffffff; margin: 7px 0 7px 38px;"><img alt="creating-app-2" width="1630" height="865" style="margin:0;width:1630px;height:865px;border:none" src="creating-app-2.gif"/></p>
<h2 class="p_Heading2"><a id="add-properties" class="hmanchor"></a><span class="f_Heading2" style="font-size: 24px;">App properties</span></h2>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Now you need to add contract properties. Properties are the fields of a contract that contain information, for example, </span><span style="font-weight: bold; color: #394149;">Contract number</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Date</span><span style="color: #394149;">, etc. They form the app context. By adding the fields, you determine how the contracts are displayed in the interface and what information your employees have to input when adding a new contract.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">All properties are listed on the right pane and have user-friendly names: </span><span style="font-weight: bold; color: #394149;">Number</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Money</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Date/Time</span><span style="color: #394149;">, etc. Drag them to the form and name them for the user to view in the system.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Add the </span><span style="font-weight: bold; color: #394149;">Contractor</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Contract number</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Date</span><span style="color: #394149;">, </span><span style="font-weight: bold; color: #394149;">Total amount of a contract </span><span style="color: #394149;">fields. Note that the app of the Document type always has a required field where the user is supposed to upload the document itself.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><img alt="365 HtCaA3" width="1104" height="550" style="margin:0;width:1104px;height:550px;border:none" src="hmfile_hash_79ae8227.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">This is the easiest way to configure the contracts context and form. However, in BRIX you can configure a form of any level of complexity in the built-in <a href="https://brix365.com/en/products/low-code/" target="_blank" class="weblink">low-code designer</a>.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">By using it, you can drag both properties and pre-made widgets, such as information blocks and pop-up windows, to the form. They can be combined and bonded between each other. Also, you can enable more complex settings that use scripts.</span> To learn more more about it see <a href="form_low_code.html" class="topiclink">Low-code designer</a>.</p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">When you finish configuring the settings, click </span><span style="font-weight: bold; color: #394149;">Save</span><span style="color: #394149;">. The app is ready.</span></p>
<h2 class="p_Heading2"><span class="f_Heading2" style="font-size: 24px;">Add data to the app</span></h2>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Now you can add a new contract to the app.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Click the </span><span style="font-weight: bold; color: #394149;">+ Contract</span><span style="color: #394149;"> button and fill out the form. The form contains the same fields you configured when creating the app.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Upload the contract file to the form. The name of your file is used as a name of this contract in the app by default.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Click </span><span style="font-weight: bold; color: #394149;">Save</span><span style="color: #394149;">. The contract app item will appear in the app.</span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><img alt="365 HtCaA4" width="1036" height="469" style="margin:0;width:1036px;height:469px;border:none" src="hmfile_hash_3fd7c39f.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">All contracts you add in the future will be displayed on the same page. </span></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><img alt="365 HtCaA5" width="1014" height="496" style="margin:0;width:1014px;height:496px;border:none" src="hmfile_hash_6b9932d6.png"/></p>
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 0;"><span style="color: #394149;">Next, you can configure the app even more:</span></p>
<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="color: #0000ff;"><a href="form_low_code.html" class="topiclink">Customize the creating, viewing and editing forms</a></span>.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #0000ff;"><a href="how_to_bind_app_to_proccess.html" class="topiclink">Bind a business process</a></span>.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #0000ff;"><a href="records_classification.html" class="topiclink">Enable registration</a></span>.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #0000ff;"><a href="360007679591.html" class="topiclink">Set up the name template</a></span>.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #0000ff;"><a href="360009923311.html" class="topiclink">Customize the view of app items</a></span>.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #0000ff;"><a href="360007527512.html" class="topiclink">Configure access settings</a></span>.</li></ul>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="get-trial.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">get-trial.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="form_low_code.html">
<span class="bottom-nav__link">form_low_code.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>
</body>
</html>