Introduction 

EngineerTree allows the presentation of tree diagrams, org charts or other hierarchies in HighQ Home or Wiki pages. 

Prerequisites 

• HighQ Collaborate 

• A System Admin Account is required to install the software. (See Installation) 

• Scripting Enabled on your HighQ instance or allowed for each user who will be editing a page containing a list - more details are available in the HighQ Knowledge base regarding this: Enable users to bypass XSS protection and add custom Javascript to a - Thomson Reuters HighQ Knowledge  

Installation

Download engineerTree.js (and engineerCore.js, if required), 

Upload both files to your HighQ instance in the System Admin File Library - This can be reached by clicking the profile picture/icon in the top right of your HighQ Instance > System Admin > File Library. Click “Add new file” and select each of the files to upload.

Copy each of the URLs for the uploaded files, we'll need to reference these when using the list in each HighQ site. Right click on the file in the filename column and click copy link then paste the link into a new text or Word document to keep them handy, you can use the format below. DO NOT use the Get Link/Public link column, this will make your file publicly accessible. 

• EngineerCore URL:  

• EngineerTree URL:  

Updating your version

When new versions become available download the updated js files provided. Then, in your HighQ instance, navigate to the System Admin File Library and locate your existing engineerTree.js install. Clicking on the file ID to the left of this filename will open the "Update file" page, allowing you to replace the older file with the updated one you just downloaded. BEWARE: this overwrite happens immediately upon clicking Save and is irreversible. Ensure you are overwriting the correct file by double checking the File name field before clicking Choose File. It is advisable to always have backups of all files stored in the System Admin File Library.

After updating the file it can sometimes take a a little while to update for all users if their browsers are caching older code, if any user reports issues advising them to clear their cache using CTRL + SHIFT + R to do a hard refresh of the page.

Adding a tree to a HighQ site 

You’ll need iSheets and either the Home or Wiki modules available in your site. 

• Create an iSheet with at least a single line text column for each node name (i.e. Person or Company) and another column for the node that it sits under (i.e. Manager or Shareholder). If you want to show a Status for each node, add a choice column too.

• Create a new view your iSheet called Home Page and ensure only the columns you want displayed are included and save your view

• Populate your iSheet so that your root node (i.e CEO or Holding Company) has a blank value in the second column, every other row much have a matching name from column 1 in column 2:

Add to your Home/Wiki page 

Go to the Home or Wiki page where you would like your tree to appear. Edit the panel and select Source view. 

Use the HighQ editor to add a link to your iSheet view (more help here: Add a link to a page with the rich text editor - Thomson Reuters HighQ Knowledge)

Once you've created your link, open the panel in Source view and paste in the below minimum code needed to run – the “flag_” links will need to be replaced with your links from the installation section. Ensure there is no space before the closing "</script>" tag when you edit these as this can cause the chart to load multiple times.

<div id="treeContainer1"><script>

            engineerTree({

            container: 'treeContainer1',

            });

</script><!-- EngineerCore --><script src="./flag/flag_50i54j53i54h51k53k54.action"></script><!--EngineerTree--><script src="./flag/flag_50l53n55j49j57k51i50.action"></script></div>

Click Ok and then Save and your tree should appear. 

You can hide the link to your iSheet view if you don't want it to be visible by opening the Source view again, and locating this bit of HTML: 

class="CKContextLink" and adding a space inside the last double quote and adding the word "hidden" so: class="CKContextLink hidden"

Modifying Options 

The code for each tree can be modified by setting the options, these are the lines of code ending in a comma (,) between the curly braces ({}) after “engineerTree”. Each line changes or provides information to a different component of the tree. Details of all the options available are listed in the Advanced Configuration section of this guide. 

To add a new option, add a new line after the last comma and before the last curly brace and add your option line as below. 

Warning: HighQ does not keep a version history of your edits to code in Home pages so it's good practice you save your code into another window such as notepad before making changes in case you need to roll back.  

        container: 'treeContainer1', <<ADD NEW LINE HERE>> 

   }); 

For example, if you wanted to change the style of the lines connecting your nodes to steps instead of curves you would use the lineStyle option. 

We would add a new line to the code above, add our option, then a colon (:) then a single quote (‘) then the word step, then another single quote and comma. 

        container: 'treeContainer1',  

        lineStyle: 'step', 

   }); 

Advanced Configuration 

This section lists all the possible options that can be used to modify the standard behavior of the chart. See “Modifying Options” section for instructions on using these. 

Required Options 

The below options MUST be included for the tree to load.

container

e.g.

container:'treeContainer1', 

Tells the code where you want the chart to appear on your page. It requires a corresponding HTML element similar to <div id="treeContainer1">&nbsp;</div>

 somewhere on the page. This div element can use any term between the quotes in the id= attribute as long as it corresponds exactly with the container option value. 

Configuration Options 

The below options can be used to modify the behavior or look and feel of the chart. They do not need to be set and can be removed to return them to their defaults.

nameColumn

• default: '0'

e.g.

nameColumn: '2', 

• Tells EngineerTree which column number (starting from 0) in your iSheet view contains the value used for the node name

parentColumn

• default: '1'

e.g.

parentColumn: '2', 

• Tells EngineerTree which column number (starting from 0) in your iSheet view contains the value used to locate the parent node

backgroundColorColumn

• default: 'false'

e.g.

backgroundColorColumn: '3', 

• • • Must be a HighQ choice column. Tells EngineerTree which column number (starting from 0) in your iSheet view contains the choices values with colors set that can used to color each node

labelColumn

• default: 'false'

e.g.

labelColumn: '3', 

• • • Tells EngineerTree which column (starting from 0) in your iSheet view should be used to label the connection to the parent node

statusColumn

• default: 'auto'

e.g.

labelColumn: 'false', 

• • • Must be a HighQ choice column. Tells EngineerTree which column number (starting from 0) in your iSheet view contains the choices values with colors set that can used to add a "status" pill in the bottom right of each node. This will default to the first choice column from the left in your iSheet. To disable the pills set labelColumn: 'false', 

holdingColumn

• default: 'false'

e.g.

holdingColumn: '3', 

• • • When set to a number corresponding with a iSheet number column in the isheet view (starting from 0), this will allow the hiding of nodes if they have no children and are below a certain threshold - defined in the the minorityHoldingLevel option below. The connection will be show on the node with a hovering '?' symbol but now line with be drawn. This can help keep complex charts cleaner.

minorityHoldingLevel

• default: 'false'

e.g.

minorityHoldingLevel: '40', 

• • • Any numeric value found in the holdingColumn above below this threshold with prevent connection lines being draw on the chart.

otherColumns

• default: 'false'

e.g.

otherColumns: '3,4,11', 

• • • Tells EngineerTree which other columns (starting from 0) in your iSheet view should have their values and titles added to each node

showOtherColumnHeaders

• default: 'true'

e.g.

showOtherColumnHeaders: 'false', 

• • • If otherColumns are set, this can be used to hide the column name from the node

exportButton

• default: 'false'

e.g.

exportButton: 'true', 

• • • Adds a chart export button to the menu above the chart. Please note, there are browser limits to what image size can be generated, for extremely large charts this button may show a warning that your chart is too large to export.

fullscreenButton

• default: 'false'

e.g.

fullscreenButton: 'true', 

• • • Adds a full screen button to the menu above the chart.

enableSearch

• default: 'false'

e.g.

enableSearch: 'true', 

• • • Adds a suite of searching tools to the menu above the chart.

lineStyle

• default: 'curve'

e.g.

lineStyle: 'straight', 

• • • Defines the type of connection between nodes, options are: curve bCurve straight step

lineColor

• default: '#000'

e.g.

lineColor: 'navy', 

• • • Defines the color of connection between nodes, accepts color names and hex values

nodeWidth

• default: 'auto'

e.g.

nodeWidth: '200', 

• • • Fixes node width in pixels

nodeHeight

• default: 'auto'

e.g.

nodeHeight: '100', 

• • • Fixes node height in pixels - can cause overflow if set too low

nodeSeparation

• default: '20'

e.g.

nodeSeparation: '5', 

• • • Sets the width of horizontal gap between nodes

levelSeparation

• default: '40'

e.g.

levelSeparation: '100', 

• • • Sets the height of vertical gap between node levels

nodeBorderWidth

• default: '1'

e.g.

nodeBorderWidth: '3', 

• • • Defines the node border width in pixels

nodeBorderColor

• default: '#000'

e.g.

nodeBorderColor: 'navy', 

• • • Defines the node border color, accepts color names and hex values

nodeTextColor

• default: '#000'

e.g.

nodeTextColor: 'white', 

• • • Defines the node text color, accepts color names and hex values

labelColor

• default: '#000'

e.g.

labelColor: 'red', 

• • • Defines the color of the text labels on connections between nodes, accepts color names and hex values

labelFontSize

• default: '#000'

e.g.

labelFontSize: '1.5 em', 

• • • Defines the font of the text labels on connections between nodes, must include a measurement i.e. px or em

hoverColor

• default: '#000'

e.g.

hoverColor: 'orange', 

• • • Defines the color of node borders and connections to parents on mouse hover, accepts color names and hex values

panelLinks

• default: 'false'

e.g.

panelLinks: 'viewItem', 

• • • Adds a click action to each node in the tree that can perform one of several actions depending on the configuration option:

• • • panelLinks: 'viewItem',     - will open the HighQ view item modal window for the record selected

    • panelLinks: 'isheet',          - will navigate to the iSheet view filtered to just show the record selected

    • panelLinks: 'default',         - will navigate to the iSheet of the record selected but the default view instead of the view chosen for the tree