Skip to main content

Visual Binary Tree

Updated


This module displays your binary team in a visual tree mode with clickable and searchable account view, allowing user to manage it's downline:

  1. 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.

  2. Clicking an avatar of any account opens up a configurable list of properties of that account.

  3. Clicking on any "+" sign brings up another pop-up, allowing user to manualy place permitted accounts in it's downline.

  4. Lastly, a color scheme is highly customizable and shall be setup during the first customization of the back office if specified.

Configuration:


  id="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"
    
>
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).

Related articles