Engineer.Timeline Support

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 EngineerTimeline.zip and extract the contents (EngineerTimeline.js, engineerCore.js)

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:
EngineerTimeline 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 EngineerTimeline.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 timeline a HighQ site

You’ll need iSheets and either the Home or Wiki modules available in your site, if you want to use data from the Task module for your timeline, enable that too.

Create an iSheet with the columns and data you want to display on your timeline - At minimum you need one single line text column which will be used to label each node in the timeline.
To display status colors on the nodes, you'll need to include a Choice column with colors assigned to the choices.
If you want to want to display data from Tasks, create a task metadata iSheet. (Customise task metadata - Thomson Reuters HighQ Knowledge)
Create a new view your iSheet called Home Page and ensure only the columns you want displayed are included
Save your view.

Add to your Home/Wiki page

Go to the Home or Wiki page where you would like your timeline 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.

EngineerTimeline({

container: 'timelineContainer1',

});

</script><script src="./flag/flag_50i54j53i54h51k53k54.action"></script><script src="./flag/flag_50l53n55j49j57k51i50.action"></script></div>

Click Ok and then Save and your timeline 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 timeline can be modified by setting the options, these are the lines of code ending in a comma (,) between the curly braces ({}) after “EngineerTimeline”. Each line changes or provides information to a different component of the timeline. 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: 'timelineContainer1', <<ADD NEW LINE HERE>>

});

For example, if you wanted to change the size of the nodes that represent an item we could do this with the "nodeSize" option.

We would add a new line to the code above, add our option, then a colon (:) then a single quote (‘) then the size in pixels of the node you would like, then another single quote and comma. The default is 25 so 10 would be much smaller:

container: 'timelineContainer1',

nodeSize: ‘10’,

});

FAQs

Can I have multiple timelines on the same page?

Yes! Follow the instructions for adding a timeline to a HighQ site above then ensure the "container" required option on your new timeline is different to any other on the page. This could mean counting up to timelineContainer2 for your second timeline etc. You must also update the line of HTML <div id="timelineContainer2"> to match.

Advanced Configuration

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

Required Options

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

container

e.g.

container:'timelineContainer1',

Tells the code where you want the timeline to appear on your page. It requires a corresponding HTML element similar to <div id="timelineContainer1"> </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 timeline. They do not need to be set and can be removed to return them to their defaults.

groupColumn

default: 'false'

e.g.

groupColumn: '3',

When set to a number corresponding to a column in the iSheet view (starting from 0 for the leftmost column) this will group the iSheet rows by the value in this column. It will then create a dropdown menu above the timeline allowing the user to switch the timeline to display each group.

buttonText

default: 'Select Item'

e.g.

buttonText: 'Select Case',

When groupColumn above is set,buttonText can be used to set the text that appears on the button generated. Please note, this text can include emoji.

section1Columns

default: 'false'

e.g.

section1Columns: '3,4,5',

When set to a number or comma separated list of numbers corresponding to column(s) in the iSheet view (starting from 0 for the leftmost column) this will display the values from those columns for each node vertically above the node in the timeline.

section2Columns

default: 'false'

e.g.

section2Columns: '3,4,5',

When set to a number or comma separated list of numbers corresponding to column(s) in the iSheet view (starting from 0 for the leftmost column) this will display the values from those columns for each node vertically below the node in the timeline.

statusColumn

default: 'auto'

e.g.

statusColumn: '3',

When set to a number corresponding to a column in the iSheet view (starting from 0 for the leftmost column) which MUST be a choice column type; the colors from this column's selected choice will be used to color the timeline node.

panelLinks

default: 'false'

e.g.

panelLinks: 'viewItem',

Adds a click action to each node in the timeline 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: 'print', - will open the HighQ print preview pane for the iSheet 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 timeline

verticalLayout

default: 'false'

e.g.

verticalLayout: 'true',

Trasposes the timeline into a vertical instead of horizontal layout. section1Columns will appear to the left of the timeline and section2Columns on the right.