This module displays your binary team in a visual tree mode with clickable and searchable account view, allowing user to manage it's downline:
- A search bar is located at the top-left corner and is carried out by the name, ID or an email. If specified account is selected from a search bar, the tree unfolds itself to navigate your view to that selected account.
- Clicking an avatar of any account opens up a configurable list of properties of that account.
- Clicking on any "+" sign brings up another pop-up, allowing user to manualy place permitted accounts in it's downline.
- Lastly, a color scheme is highly customizable and shall be setup during the first customization of the back office if specified.
Configuration:
<ui-visual-binary-treeid="vt0" :tree-id="2" :initial-fetch="4" :short-fetch="1" :long-fetch="5" :upline-limit="10" :properties="[ 'm.AccountStatus', ]" :popup-properties="[ 'p.email', 'm.PV', ]" :colors="{ self: 'rgba(10, 230, 10, 0.3)', front: 'rgba(10, 230, 10, 0.1)', deadend: 'rgba(255, 10, 10, 0.1)', }" :header-titles="{ 'm.AccountStatus': 'Status', }" :frontline-tree-id="0" :frontline-filter="[ { field: 'm.BinaryPositions', operation: '=', value: '0' }, { field: 'm.AccountStatus', operation: '=', value: '1' } ]" :frontline-properties="['s.id', 'p.firstname']" background-color="rgb(196, 201, 250, 0.5)" :editable-properties="['m.SpilloverDirection']" :edit-сhildren="false" show-inactive="only_disabled" ></ui-visual-binary-tree>
| props |
default |
type |
description |
| id= |
"vt0" |
String |
In-system id, required if opening settings of a module from within the online office |
| :tree-id= |
"0" |
Number |
Id of a marketing tree used to display downline |
| :initial-fetch= |
"4" |
Number |
For how many levels a tree shall initially unfold |
| :short-fetch= |
"1" |
Number |
How many levels shall unfold when pressed on > symbol near avatar |
| :long-fetch= |
"5" |
Number |
How many levels shall unfold when pressed on >> symbol near avatar |
| :upline-limit= |
"10" |
Number |
How many levels above should be displayed |
| :propeties= |
"['m.PV', 'm.Status']" |
String |
Array of properties displayed down under avatar |
| :popup-properties= |
"['m.PV', 'm.Status']" |
String |
Array of properties displayed in pop-up when avatar being clicked |
| :colors= |
"{self: 'rgba(10, 230, 10, 0.3)', front: 'rgba(10, 230, 10, 0.1)', deadend: 'rgba(255, 10, 10, 0.1)',}" |
String |
Self - color scheme for your account, front - color scheme for your frontline, deadend - color scheme for a deadend's branch last account |
| :header-titles= |
"{'m.PV': 'Personal sales', 'm.Status': 'Account status'}" |
String |
Property names overwrite |
| :frontline-tree-id= |
"0" |
Number |
ID of a tree from which frontline shall be presented when clicking "+" sign |
| :frontline-filter= |
"[{ field: 'm.BinaryPositions', operation: '=', value: '0' }, { field: 'm.AccountStatus', operation: '=', value: '1' }]" |
String |
Array of filters which applied when clicking "+" sign |
| :frontline-properties= |
"['m.PV', 'm.Status']" |
String |
Which properties of frontline to display |
| background-color= |
"rgb(196, 201, 250, 0.5)" |
String |
A background color |
| :editable-properties= |
"['m.SpilloverDirection']" |
String |
Which properties can be edited |
| :edit-сhildren= |
"false" |
String |
Determines if any children account is editable or not |
| show-inactive= |
"only_disabled" |
String |
Determines if deleted and/or disabled accounts are visible |
Note: All of the settings can be customized either from admin panel by manualy editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessable when "Online office admin" flag is presented).
Dmitri K
Comments