VisualTree is a visual tree component that renders a network structure where each node is displayed as a rectangular card. It supports flexible field mapping for card titles/subtitles, customizable colors, configurable fetch depth, and a detailed popup with extra properties.
Configuration:
<ui-visual-tree
:tree-id="0"
:account-id="2"
:properties="['m.PV', 'm.Downline']"
:popup-properties="['p.firstname', 'p.lastname', 'p.email', 'm.PV', 'm.Downline']"
:header-titles="{ 'p.PV': 'Личный хабр' }"
title-field="t.fullName"
subtitle-field="t.accountPlusOffset"
:title-field-max="19"
:subtitle-field-max="23"
:colors="{
self: 'rgba(10, 230, 10, 0.3)',
front: 'rgba(10, 230, 10, 0.1)',
deadend: 'rgba(255, 10, 10, 0.1)',
}"
:input-properties="{ variant: 'outlined' }"
background-color="rgba(255, 10, 10, 0.4)"
:initial-fetch="3"
:short-fetch="1"
:long-fetch="3"
:upline-limit="10"
:max-nodes-per-request="50"
></ui-visual-tree>Props overview:
| props | default | type | description |
| background-color | — | String | Background color of the canvas. It is recommended to use a semi-transparent color so the UI theme can still affect the overall look. |
| title-field | — | String | Property name used as the card title. |
| subtitle-field | — | String | Property name used as the card subtitle. |
| :title-field-max | — | Number | Maximum number of characters allowed for the card title. |
| :subtitle-field-max | — | Number | Maximum number of characters allowed for the card subtitle. |
| :initial-fetch | — | Number | How many levels to expand when opening the account for the first time. |
| :short-fetch | — | Number | How many levels to expand when clicking >. |
| :long-fetch | — | Number | How many levels to expand when clicking >>. |
| :upline-limit | — | Number | How many upline nodes to fetch and display above the current account. |
| :colors | — | Object | Node colors and decoration settings. |
| :input-properties | — | Object | Custom properties for input controls (e.g., input variant). |
| :properties | — | Array | Array of properties displayed directly inside each node card. |
| :popup-properties | — | Array | Array of properties shown in the popup. If not specified, the component uses the values from :properties. |
| show-inactive | none | String | Controls how inactive accounts are displayed: 'none' | 'all_inactive' | 'only_disabled'. |
| :max-nodes-per-request | — | Number | Maximum number of nodes added to the displayed tree per single click. |
Inactive accounts behavior:
In API v3 there are two types of inactive accounts: deleted and disabled (canceled). These are different statuses and are controlled by different API parameters.
none — do not show deleted or canceled accounts.
only_disabled — show only disabled accounts.
all_inactive — show both types (however, if you are not an NRM admin, you still will not see deleted accounts).
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).