1. DirectScale Help Center
  2. Guides
  3. Basic Web Office Customization
Basic Web Office Customization

Customizing the Web Office Visual Tree

Updated

The Visual Tree in the Web Office offers associates a better view into their downline structure. They can use this page to see the hierarchical view of their trees and view specific data for individuals.

The Web Office Admin allows the customization of the Visual Tree features such as the icons the associate sees, the trees they view, and the data points shown.

What We’ll Cover

Finding the Page

In Web Office Admin, navigate to: Web Office Configuration > Visual Tree.

[CLIENTID].admin.directscale.com/#/VisualTree

User Profile Data Points

Profile data points will display in the Visual Tree on the profile quick view. This quick view is available by clicking on any of the cards within the tree.

Adding Data Points

Add Data Point pop-up window

  1. Make sure the METRICS tab is selected. Then, click the + ADD METRIC button.

    The Add Data Point pop-up window opens.

  2. In the pop-up, click the Data Point dropdown, and select the data point you want to display in the widget.

    Note: If the chosen data point has a period constraint, then the Time Frame fields will reveal.

  3. If you select a data point that relates to a specific period, then the Time Frame fields appear where you can change the time frame covered to Months or Weeks.

Selecting Display Types

With the Display Type dropdown select the most appropriate type based on your Data Point selection.

If you, for example, chose the Commission Active data point (which is either active or inactive), and then selected a Number (0 decimals) display type, then the tile will display either a 1 or 0 (the numerical representation of true/false). Boolean would be a more appropriate choice.

If an inappropriate display type is chosen, then the tile will just display the data point’s value. For most data points, this will appear just fine in the tile. If you don’t like how a data point displays, then try a different display types until one works for you.

Display Types:

  • Boolean - True or false. If the associate meets the criteria, then a check mark will display in the widget tile. If not, then an X displays.

  • Date - If a date data point was selected, then using this type will display the date format setup in your system.

  • Number (0 decimals) - Displays numerical data with no decimals (0).

  • Number (1 decimal) - Displays numerical data with one decimal point (0.0).

  • Number (2 decimals) - Displays numerical data with two decimal points (0.00).

  • Custom - For more information, see: Custom String Format.

  • Value to text… - This type allows you to replace what the data point displays by default with your own text value. This works best with ranks or statuses. For example, with ranks, the system will display a 1, 2, 3, etc. In the Metrics Value field, you can enter the value the system sends and then, in the Display Values field, you can enter what you want to display in the tile.

    For example, Commission Active displays either 1 or 0 by default. You can change each to Yes or No or any other Display Value that you want.

Saving the Data Point

  1. Enter any Display Name for the metric that is indicative to its purpose.

  2. Select the Published switch to toggle on in order to publish the metric now after you save the configuration.

  3. The rest of the settings are Multi-Faceted Configuration (MFC).

    These settings allow you to tailor your content based on an associate’s country, language, user type, status, and rank.

  4. SAVE the configuration.

Tree Settings

In the Tree Settings section, you can enable any available tree to show in the Visual Tree.

You can enable, or ‘show’, any available Visual Tree(s) by marking the Show toggle for the various tree types.

Associates in the Web Office will have the ability to view the Visual Tree(s) selected. You can also select which tree will show by default upon page load.

If available, you can choose whether or not to show customers in the tree(s). This would set the default setting upon page load.

Enabling/Disabling in Web Office

Associates can turn this on and off within the Web Office:

  1. Click the three dots next to the Zoom Slider.
  2. select the Show Customers checkbox.

Along with these configurations, you can control how many levels are visible when the page is loaded in the Max Levels dropdown, and decide how many associates an associate can see in each level with the Node Threshold dropdown.

You may have multiple trees available. The tree types are pulled in from the Corporate Office.

If the Matrix field is available, you can choose whether or not to show customers in the tree(s). This would set this as the default tree when the page loads. Associates can turn this on and off within the Web Office.

Links for Enrollment (Matrix/Binary only)

Turning this feature on will enable enrollment options directly from the Visual Tree. When there is an open position on the left or right leg in a matrix/enrollment tree, an associate can select to enroll a new user directly in that position.

When the tree is expanded, the open positions can be found. Select the ‘+’ button from the visual tree when a position is open. This will load the enrollment flow in a new tab.

Before enabling this feature, reach out to your account manager at DirectScale. There is additional configuration that needs to be done to make sure the correct IDs are passing in the URL for enrollment.

  1. Click the toggle to enable the feature.
  2. Click the Save button when complete.

Custom Color Label

The Custom Color Label is based upon true/false criteria that will display as a data point in the Visual Tree, along with the User Profile Data Points.

This is currently coded by a DirectScale developer.

Although the logic behind the feature is created by the developer, you can change the display name shown to the associate.

For example, let’s say that a company named Success Co. has a program in place for associates where they can qualify to go on a vacation. In order to qualify, associates must purchase a Success Pack.

In the Visual Tree, there is a section on the Data Point slide-out labeled Success Pack Qualified. If they have purchased the pack, the data point will read display Yes.

If the associate has not purchased the pack, the data point will display No.

  1. Enter the Custom Color Label.
  2. Click the Save button when complete.

Active Statuses

Active Statuses control who will show as Active in the Visual Tree.

The statuses left un-selected will grey out and display the status reflected in the Corporate Office.

In the Visual Tree, the tiles will display an associate’s status. This is identified by color and through text on the tile.

  1. Click the dropdown and select the statuses.
  2. Click the Save button when complete.

Adding Visual Tree Icons

To add the icons for the Visual Tree, you will need to navigate to a different page in Web Office Admin, the Branding page.

Read more: Adding Visual Tree Icons

These icons will replace the generic profile shadow image that may be in the Visual Tree for all tree members.

Web Office Visual Tree shadow icons

You can add icons based on customer type and by rank. If there are no icons uploaded for a certain rank, it will default to the customer type icons in the Visual Tree.

To upload, you can select the image placeholder and it will open the file selector for your computer. You can select and upload that way, or you can drag and drop. The icon file must be an .SVG file.

Web Office Admin Branding page Icons section

Using SVG Icons in the Visual Tree

The Visual Tree uses .SVGs for icons and they can be a little tricky to make because they are a combination of visual designing and coding.

In Adobe Illustrator:

  • Use simple shapes to create your icons.

  • Convert all text to paths (Type > Create Outlines (SHIFT+CTRL+O)

  • If you are using filters, use the SVG Filters found on the Effects menu.

  • Simplify your paths as the last step before saving (Object > Path > Simplify…).

  • Use unique naming for your layers and artboards. This is important to make sure styles don’t override each other on the tree.

  • When saving as an .SVG use the Presentation Attributes on your Advanced CSS Properties.

    Illustrator SVG Options

Comments

0 comments

Please sign in to leave a comment.

Related articles