update
All checks were successful
Deploy Static Site / deploy (push) Successful in 3m24s

This commit is contained in:
2025-05-29 16:37:23 +04:00
parent 7365966470
commit e217f89702
2727 changed files with 0 additions and 206405 deletions

View File

@ -1,290 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Иерархия</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="Виджет отображает связанные между собой элементы одного приложения в виде иерархической структуры. Связь устанавливается следующим образом: в карточке одного элемента..." />
<meta name="picture" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cправка по Low-code платформе ELMA365" />
<meta property="og:url" content="https://elma365.com/ru/help" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="ELMA365" />
<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 async src="https://www.googletagmanager.com/gtag/js?id=G-M6ETBEC1R9"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'G-M6ETBEC1R9');</script>
<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://elma365.com/ru/help">
<img src="./logo.svg" alt="header logo">
</a>
<!-- <div class="hero__search-form" id="search-panel">
<form class="search-form" onsubmit="ym(83179930,'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://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a class="project-link" href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li><li><a class="project-link" href="https://elma365.com/ru/help/business_solutions/-elma365-store.html">Бизнес-решения</a></li></ul></span></li><li><a href="https://api.elma365.com/ru/"target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/"target="_blank">SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/" target="_blank">Академия</a></li><li><a href="https://elma365.com/ru/" target="_blank">Сайт ELMA365</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://elma365.com/ru/help">
<img src="./logo-light.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 дизайнер &gt; <a href="interface_settings.html">Создание интерфейсов</a> &gt; Типы виджетов &gt; Виджеты для «ELMA365 CRM» / Иерархия</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Иерархия</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;">Виджет отображает связанные между собой элементы одного приложения в виде иерархической структуры. Связь устанавливается следующим образом: в карточке одного элемента выбираются относящиеся к нему записи из этого же приложения.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Например, для приложения <a href="360012584980.html" class="topiclink">Компании</a> таким образом можно создать структуру организации, указав в карточке материнскую компанию и её дочерние филиалы. </p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало&nbsp;внимание</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 15px; font-family: Inter;">Виджет доступен при активации одного из </span><span style="font-size: 15px; font-family: Inter; color: #0000ff;"><a href="licenses-crm.html" class="topiclink">платных решений CRM</a></span><span style="font-size: 15px; font-family: Inter;">, в которые входит отображение иерархической структуры контрагентов. Использовать его смогут только пользователи с лицензией решения</span><span style="font-size: 15px; font-family: Inter; color: #394149;">.</span></p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец&nbsp;внимание</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В карточке элемента иерархию можно отображать в виде дерева или таблицы. При этом в настройках виджета выбираются поля, которые будут показываться для записей иерархии в таблице и дереве. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Иерархию рекомендуется отображать на форме в отдельной вкладке. Размещать виджет можно как на форме приложения, для которого настраивается иерархия, так и в карточке другого приложения. В зависимости от этого отличаются настройки виджета.</p>
<h2 class="p_Heading2"><a id="context-settings" class="hmanchor"></a><span class="f_Heading2">Настройка иерархии в приложении</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Для отображения структуры сначала настраивается контекст приложения. Для этого в него добавляется поле для связи типа <span style="font-weight: bold;">Приложение</span>.<span style="font-weight: bold;"> </span>Оно будет ссылаться само на себя. В этом поле на форме одного элемента пользователь сможет указать другой элемент из этого же приложения.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Затем на форму приложения добавляется и настраивается виджет <span style="font-weight: bold;">Иерархия</span>. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Рассмотрим два способа настройки иерархии на примерах. В приложении <span style="font-weight: bold;">Договоры </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;">Структура всех договоров и дополнительных соглашений. Элементы хранятся в приложении, для которого настраивается иерархия.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Иерархия контрагентов из этих договоров. Элементы хранятся в другом приложении — <span style="font-weight: bold;">Компании</span>.</li></ol>
<h3 class="p_Heading3"><a id="create-field" class="hmanchor"></a><span class="f_Heading3">Настройка контекста для иерархии с нуля</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы отобразить структуру договоров, в приложение <span style="font-weight: bold;">Договоры</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-weight: bold;">Договоры</span> и выберите пункт <span style="font-weight: bold;">Настройка формы</span>. </li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Создайте свойство типа <span style="font-weight: bold;">Приложение</span>, включите опцию<span style="font-weight: bold;"> Один </span>и выберите приложение, форму которого настраиваете. Сохраните свойство.</li></ol>
<p class="p_Normal" style="text-indent: 1px; margin: 0 0 0 36px;"><img alt="hierarchy-1" width="568" height="597" style="margin:0;width:568px;height:597px;border:none" src="hierarchy-1.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Включите <a href="360028941032.html" class="topiclink">расширенный режим настройки форм</a>, добавьте созданное свойство на все формы приложения и сохраните настройки.</li></ol>
<h3 class="p_Heading3"><a id="companies-fields" class="hmanchor"></a><span class="f_Heading3">Настройка контекста для иерархии в приложении «Компании»</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В нашем примере контрагент в договоре подтягивается из приложения <a href="360012584980.html" class="topiclink">Компании</a>. Оно входит в решение <a href="crm-functions.html" class="topiclink">ELMA365 CRM</a>. В нём по умолчанию созданы следующие поля для связи элементов и настройки иерархии:</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;">Материнская компания</span> — поле с включённой опцией <span style="font-weight: bold;">Один</span>, для указания главного офиса организации;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Дочерние компании</span> — поле с включённой опцией <span style="font-weight: bold;">Несколько</span>, для выбора всех филиалов компании.</li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы пользователи могли связывать компании друг с другом, вынесите эти свойства на формы приложения: &nbsp;</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-weight: bold;">Договоры</span> и выберите пункт <span style="font-weight: bold;">Настройка формы</span>.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Поскольку для приложения включён <a href="360028941032.html" class="topiclink">расширенный режим настройки форм</a>, добавьте свойства <span style="font-weight: bold;">Материнская компания</span> и<span style="font-weight: bold;"> Дочерние компании </span>на вкладки<span style="font-weight: bold;"> Создание</span>, <span style="font-weight: bold;">Просмотр</span>, <span style="font-weight: bold;">Редактирование</span>.</li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Отключите для свойств опцию <span style="font-weight: bold;">Только для чтения</span>, чтобы на формах пользователи смогли не только создавать новые компании, но и выбирать их из существующих записей.</li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Сохраните настройки. </li></ol>
<h2 class="p_Heading2"><a id="widget-settings" class="hmanchor"></a><span class="f_Heading2">Настройки виджета «Иерархия»</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Следующим шагом настраивается форма приложения, на которой необходимо отобразить структуру.</p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало&nbsp;внимание</span></p>
<p class="p_Normal">Виджет <span style="font-weight: bold;">Иерархия</span> рекомендуется размещать на форме в отдельной вкладке. </p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец&nbsp;внимание</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В нашем примере настраиваются иерархии договоров и контрагентов, поэтому на форме приложения <span style="font-weight: bold;">Договоры</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;">Перейдите в <a href="interface_designer.html" class="topiclink">дизайнер интерфейсов</a> формы просмотра приложения.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Добавьте виджет <a href="tabs.html" class="topiclink">Вкладки</a> на поле для моделирования и задайте название для него. </li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 36px;">Для нашего примера в карточке договора создаются вкладки: <span style="font-weight: bold;">Иерархия договоров</span> и <span style="font-weight: bold;">Иерархия компаний</span>.<span style="font-weight: bold;"> </span></p>
<ol style="list-style-type:upper-roman">
<li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Перейдите на созданную вкладку, нажмите <span style="font-weight: bold;">+ Виджет</span> и выберите виджет <span style="font-weight: bold;">Иерархия</span>.</li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Дальнейшие настройки виджета будут отличаться в зависимости от того, структуру какого приложения нужно отобразить на настраиваемой форме. Доступно две опции построения иерархии: <a href="hierarchy.html#app-hierarchy" class="topiclink">По элементу</a> и <a href="hierarchy.html#app-field-hierarchy" class="topiclink">По свойству элемента</a>.</p>
<h3 class="p_Heading3"><a id="app-hierarchy" class="hmanchor"></a><span class="f_Heading3">Иерархия по элементу</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Построение иерархии по элементу выбирается, если вы хотите отобразить структуру того приложения, форма которого настраивается в данный момент. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В нашем примере в приложении <span style="font-weight: bold;">Договоры</span> структура договора и его дополнительных соглашений будет отображаться на вкладке <span style="font-weight: bold;">Иерархия договоров</span>. В настройках виджета, размещённого на этой вкладке, указываются параметры:</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="hierarchy-2" width="987" height="635" style="margin:0;width:987px;height:635px;border:none" src="hierarchy-2.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;">Построение иерархии</span> — выбирается опция <span style="font-weight: bold;">По элементу</span>; </li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Поле для связи</span><span style="font-weight: bold; color: #ff0000;">*</span> — выбирается свойство типа <span style="font-weight: bold;">Приложение</span>, в котором пользователи указывают связанный элемент из этого же приложения. Для договоров это поле <span style="font-weight: bold;">Основной договор</span>, созданное ранее на <a href="hierarchy.html#create-field" class="topiclink">шаге настройки контекста</a>.</li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;">После этого задайте <a href="hierarchy.html#settings-view-hierarchy" class="topiclink">настройки отображения иерархической структуры</a> в виджете.</p>
<h3 class="p_Heading3"><a id="app-field-hierarchy" class="hmanchor"></a><span class="f_Heading3">Иерархия по свойству элемента </span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Построение иерархии по свойству элемента выбирается, если на форме одного приложения нужно отобразить структуру другого приложения, связанного с ним.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В нашем примере в карточке договора в поле <span style="font-weight: bold;">Контрагент</span> указывается элемент из приложения <span style="font-weight: bold;">Компании</span>. Поскольку договор и компания связываются между собой, на форме приложения <span style="font-weight: bold;">Договоры</span> можно отобразить структуру выбранной в поле компании.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В настройках виджета, размещённого на вкладке <span style="font-weight: bold;">Иерархия компаний</span>, указываются параметры:</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="hierarchy-3" width="907" height="601" style="margin:0;width:907px;height:601px;border:none" src="hierarchy-3.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;">Построение иерархии</span> — выбирается опция <span style="font-weight: bold;">По свойству элемента</span>; &nbsp;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Свойство элемента</span><span style="font-weight: bold; color: #ff0000;">*</span> — из контекста текущего приложения выбирается поле типа <span style="font-weight: bold;">Приложение</span>, которое ссылается на связанный элемент. В приложении <span style="font-weight: bold;">Договоры</span> — это поле <span style="font-weight: bold;">Контрагент</span>, которое ссылается на компанию. Иерархия связанной компании-контрагента отобразится на форме договора; </li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Поле для связи</span><span style="font-weight: bold; color: #ff0000;">*</span> — из контекста приложения, связанного с текущим и выбранного в предыдущем поле, выбирается свойство типа <span style="font-weight: bold;">Приложение</span> с включённой опцией <span style="font-weight: bold;">Один</span>. Для нашего примера — из приложения <span style="font-weight: bold;">Компании</span> указывается созданное по умолчанию поле <span style="font-weight: bold;">Материнская компания</span>.</li></ul>
<p style="line-height: 1.28; margin: 0 0 11px 0;">После этого задайте <a href="hierarchy.html#settings-view-hierarchy" class="topiclink">настройки отображения иерархической структуры</a> в виджете. </p>
<h3 class="p_Heading3"><a id="settings-view-hierarchy" class="hmanchor"></a><span class="f_Heading3">Настройка отображения элементов в иерархии</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Следующим шагом в настройках виджета для обоих способов построения иерархии задаётся внешний вид элементов из структуры на форме:</p>
<ol style="list-style-type:decimal">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Укажите, какие свойства приложения будут отображаться в виде <a href="hierarchy.html#tree" class="topiclink">дерева</a> и <a href="hierarchy.html#table" class="topiclink">таблицы</a>. Для этого перетащите нужные поля из столбца <span style="font-weight: bold;">Контекст</span>.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Выберите, какие свойства будут показываться в <a href="hierarchy.html#collapsible-list" class="topiclink">свёрнутых карточках дерева</a>. Для этого напротив добавленных полей включите опцию <span style="font-weight: bold;">Краткий список</span>.</li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы удалить добавленное из контекста свойство, напротив его названия нажмите значок корзины.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">После завершения настроек виджета сохраните указанные параметры. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы форма стала доступна пользователям, нажмите <span style="font-weight: bold;">Сохранить</span> и <span style="font-weight: bold;">Опубликовать</span> на верхней панели дизайнера интерфейсов.</p>
<h2 class="p_Heading2"><a id="view-hierarchy" class="hmanchor"></a><span class="f_Heading2">Отображение иерархии на форме </span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В виджете может отображаться до 100 связанных между собой элементов. На форме иерархию можно просматривать в виде дерева и таблицы. Для переключения способов отображения данных в виджете используются значки <img alt="hierarchy-4-icons" width="60" height="35" style="margin:0;width:60px;height:35px;border:none" src="hierarchy-4-icons.png"/>.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Элементы иерархии подсвечиваются разными цветами. Для головного элемента используется синий цвет. Запись, карточка которой открыта или связана с текущим элементом, выделяется зелёным. Остальные компоненты структуры обозначены серым. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">С полями в карточках элементов иерархии можно взаимодействовать. Например, нажать на поле типа <span style="font-weight: bold;">Электронная почта</span> для перехода к написанию письма или на ссылку в поле типа <span style="font-weight: bold;">Приложение</span>, чтобы открыть карточку указанной записи. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">При построении иерархии <a href="360012584980.html" class="topiclink">компаний</a> в вынесенном поле <a href="360012584960.html" class="topiclink">контакта</a> автоматически показывается его имя, должность, телефон и рабочая почта. Если контактов указано несколько, отображаются все связанные записи.</p>
<h3 class="p_Heading3"><a id="tree" class="hmanchor"></a><span class="f_Heading3">Дерево</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><a id="collapsible-list" class="hmanchor"></a>При отображении в виде дерева в виджете показываются блоки связанных элементов с кратким списком полей. &nbsp;</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="hierarchy-5" width="1398" height="752" style="margin:0;width:1398px;height:752px;border:none" src="hierarchy-5.png"/></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы посмотреть карточку и полный список полей, указанный в настройках виджета, нажмите на значок стрелки в блоке.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="hierarchy-6" width="246" height="564" style="margin:0;width:246px;height:564px;border:none" src="hierarchy-6.png"/></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В элементах с зависимыми записями отображается значок <img alt="hierarchy-7-icon" width="21" height="21" style="margin:0;width:21px;height:21px;border:none" src="hierarchy-7-icon.png"/>. Нажмите на него, чтобы развернуть или свернуть соответствующую ветку дерева. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">В правом нижнем углу виджета располагается панель управления деревом. С её помощью можно изменять масштаб дерева, сворачивать и разворачивать всю его структуру.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Перемещаться по дереву на форме можно с помощью перетаскивания карточек элементов методом Drag-and-Drop. Таким образом вы сможете просматривать записи, если в дереве отображается объёмная иерархия. </p>
<h3 class="p_Heading3"><a id="table" class="hmanchor"></a><span class="f_Heading3">Таблица</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Таблица иерархии состоит из полного списка полей, выбранных в настройках виджета. Вы можете сворачивать и разворачивать отображаемую структуру. Для этого нажмите на кнопку в первом столбце таблицы. </p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="hierarchy-8" width="1168" height="562" style="margin:0;width:1168px;height:562px;border:none" src="hierarchy-8.png"/></p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="last-activity.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">last-activity.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="client-engagment-history.html">
<span class="bottom-nav__link">client-engagment-history.html</span> <span
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
</a>
</div>
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
<div class="feedback-wrap"><div class="feedback" id="feedback"><span><b>Была ли статья полезной?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx">Спасибо за ваш отзыв!</div><div id="feedback-success-popup"><div class="wrap"><button type="button" class="feedback-popup-close">×</button><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_212_2187)"><path d="M22 0.6875C10.2294 0.6875 0.6875 10.2294 0.6875 22C0.6875 33.7706 10.2294 43.3125 22 43.3125C33.7706 43.3125 43.3125 33.7706 43.3125 22C43.3125 10.2294 33.7706 0.6875 22 0.6875ZM22 40.5625C11.8023 40.5625 3.4375 32.3078 3.4375 22C3.4375 11.8024 11.6922 3.4375 22 3.4375C32.1977 3.4375 40.5625 11.6922 40.5625 22C40.5625 32.1976 32.3078 40.5625 22 40.5625ZM34.1713 16.933L18.6613 32.3186C18.257 32.7197 17.604 32.7171 17.203 32.3128L9.82283 24.873C9.42176 24.4686 9.42434 23.8157 9.82867 23.4146L10.5609 22.6884C10.9652 22.2873 11.6181 22.2899 12.0192 22.6942L17.9468 28.6697L31.9926 14.7366C32.3969 14.3356 33.0498 14.3382 33.4509 14.7425L34.1772 15.4747C34.5783 15.879 34.5757 16.532 34.1713 16.933Z" fill="#27AE60"></path></g><defs><clipPath id="clip0_212_2187"><rect width="44" height="44" fill="white"></rect></clipPath></defs></svg><p>Ваш отзыв успешно отправлен!</p><span>Спасибо за обратную связь.</span></div></div><div class="feedback__popup" id="feedback__popup_why"><button type="button" class="feedback-popup-close">×</button><div class="feedback__popup-header">Уточните, почему:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Рекомендации не помогли</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Текст трудно понять</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Нет ответа на мой вопрос</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Содержание статьи не соответствует заголовку</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Другая причина</label></div><div class="feedback__popup" id="feedback__popup-other"><button type="button" class="feedback-popup-close">×</button> <div class="feedback__popup-header">Расскажите, что вам не понравилось в статье:</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Отправить"></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"/><span class="feedback-form__btn-group_yes-btn">Да</span></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg"/><span class="feedback-form__btn-group_no-btn">Нет</span></label></div><select name="category"><option disabled>Выберите вариант</option><option value="bad_recommendation" selected>Рекомендации не помогли</option><option value="difficult_text">Текст трудно понять</option><option value="no_answer">Нет ответа на мой вопрос</option><option value="bad_header">Содержание статьи не соответствует заголовку</option><option value="other_reason">Другая причина</option></select><input type="submit"></form></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">В этой статье</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://api.elma365.com/ru/" target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/" target="_blank">TS SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/elma365" target="_blank">Академия</a></li></ul><ul class="footer-mobile__list"><li><a href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li></ul>
</div>
<div class="container">
<div class="footer-wrap">
<div><span class="mobile-question-popup">Отправить фидбэк</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Задать вопрос</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Отправить"></div></form><div class="hidden fade-in question-success-xs">Ваш фидбэк отправлен.</div></div>
<div class="footer-flex-b">
<div class="footer-top">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</div>
<div class="footer-line">
<div class="footer-line-copy">
<span class="footer-copy">&copy; 2025
ELMA365
</span>
</div>
<ul class="footer-list">
<li class="footer-item"><a href="https://elma365.com/ru/" target="_blank" class="footer-link" style="color: #0D4A75;"><img src="browse.svg" alt="browse icon" class="footer-img">elma365.com</a></li><li class="footer-item"><a href="https://www.youtube.com/user/ELMABPM" target="_blank" class="footer-link"><img src="yt.svg" alt="youtube icon" class="footer-img"></a></li><li class="footer-item"><a href="https://vk.com/elma_bpm" target="_blank" class="footer-link"><img src="vk.svg" alt="vk icon" class="footer-img"></a></li><li class="footer-item"><a href="https://t.me/elmaday" target="_blank" class="footer-link"><img src="tg.svg" alt="telegram icon" class="footer-img"></a></li><li class="footer-item"><a href="https://dzen.ru/elma" target="_blank" class="footer-link"><img src="dzen.svg" alt="dzen icon" class="footer-img"></a></li>
<li class="footer-item">
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a href="#" class="arrow-top"></a>
</div>
</footer>
<!-- <script type="text/javascript" src="jquery1.min.js"></script>-->
<iframe name="hmnavigation" style="display:none!important"></iframe>
<!--<script src="./jquery-ui.js"></script> -->
<script src="./jquery-ui.min.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>