This module displays information about all members of the distributor's structure in a table view, containing search and filtering features, as well as data export to .csv file:
- A filter, the first bar at the top of a module, allows user to process data quickly, making downline table view easier and is highly customizable.
Example: you can select participants whose personal volume is greater than 0.
- Next, a search bar for account, is carried out by the name, ID or an email.
If another account is selected from a search bar, the data in a table updates to filter that account's downline.
Example: you can find and select an account by filling in "123" or "John Snow" or "johnsnow@gmail.com"
- Finishing with upper bars, on the very right corner you may find CSV button for exporting data currently presented on the page.
The number of entries on the page can be adjusted to 5, 25, 50 and 100 at the bottom of a module.
Note: only currently presented data from a page can be exported this way. - Pressing ⓘ icon on the left of the first column in a table brings a pop-up containing configurable list of information related to that specific account.
- Pressing Ѧ icon next to it opens View Genealogy page with choosen account as a center of a view.
- The columns with data shown in a table is highly configurable and is able to contain any amount of properties or profile fields.
Configuration:
<ui-downline-tableid="dl0" :tree-id="0" :properties="['m.PV', 'm.Status']" :popup-properties="['m.PV', 'm.Status']" :hide-self="false" :select-periods="false" :select-legs-from-tree="undefined" :select-legs-limit="2" :select-legs-position-titles="{ 1: 'Left leg', 2: 'Right Leg' }" :header-titles="{ 's.id': 'ID' }" popup-info-on-field="p.firstname" popup-link-url="/{{site_language}}/network/view-network/?nodeId={{s.id.raw}}" :colors="{self: 'rgba(10, 230, 10, 0.3)', front: 'rgba(10, 230, 10, 0.1)', deadend: 'rgba(255, 10, 10, 0.1)'}" :paginations="[10,25,100,-1]"> </ui-downline-table>
| props |
default |
type |
description |
| id= |
"dl0" |
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 |
| :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 |
| :hide-self= |
"false" |
String | Defines whether the currently logged-in account is displayed in a first row or not |
| :select-periods= |
"false" |
String |
Turns on financial period selection |
| :select-legs-from-tree= |
"undefined" |
String |
Specifies what tree to use when displaying frontline. If the value is a number, the leg can be chosen |
| :select-legs-limit= |
"2" |
Number |
How many legs are being shown |
| :select-legs-position-titles= |
"{ 1: 'Left leg', 2: 'Right Leg' }" |
Array | Changes title of a specified presented leg |
| :header-titles= |
"{ 's.id': 'ID of account' }" |
Array | Changes title of specified presented properties |
| popup-info-on-field= |
"p.firstname" |
String | Defines what field will contain interactable buttons ⓘ |
| popup-link-url= |
"/{{site_language}}/network/view-network/?nodeId={{s.id.raw}}" |
String | Defines visual tree redirect link - to which page user will be redirected upon pressing Ѧ icon |
| :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 |
| :paginations= |
"[10,25,100,-1]" |
Array | Defines pagination of a page |
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).
Max SLA
Comments