Engineer.Gantt Support

Introduction 

EngineerGantt allows the presentation of project gantt charts from iSheet data 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  

Please note: Engineer.Legal plugins do not currently support System Dashboards or "Custom Pages" due to limitations in these modules 

Installation

If this is your first Engineer Legal plugin you'll need to create your engineerLegal-plugins file. Instructions for this will be in your welcome email.

Download engineerGantt.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 in your engineerLegal-plugins file. DO NOT use the Get Link/Public link column, this will make your file publicly accessible. 

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 EngineerGantt.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 chart to 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 chart, enable that too. 

• Create an iSheet with the columns and data you want to display on your chart - At minimum you need one single line text column which will be used to label each task in your chart plus a Date column called Start Date. You should also include a second Date type column called Due Date to correctly show the duration of tasks.
  To display status colors on the tasks, you'll need to include a Choice column with colors assigned to the choices.

• If you want to display data from the Tasks module, create a task metadata iSheet. (Customise task metadata - Thomson Reuters HighQ Knowledge), you'll also need to enable Timeline View in the Task section of the Admin module to display the start date column.

• Create a new view in 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 chart 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.

As of the new version 4 there is a new, simplified method to load each plugin, allowing quick switching between different plugin types, you only need to include:

<div id="ganttContainer1"><script>

    engineerLegal({

      container: 'ganttContainer1',
      plugin: 'gantt',

    });

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

the old method of loading a plugin is still supported, please contact us to upgrade rather that using the below deprecated method:

<!-- DEPRECATED CODE -->

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

<!--EngineerGantt--><script src="./flag/flag_50l53n55j49j57k51i50.action"></script>

<div id="ganttContainer1"><script>

            engineerGantt({

            container: 'ganttContainer1',

            });

</script>

</div>

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

   }); 

For example, if you wanted to change the scale that chart loads with by default we can use the "scale" 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 'weeks' but if we had projects being completed over the next few days we could change it to:

        container: 'ganttContainer1',  

        scale: 'days’, 

   }); 

FAQs 

Why are my events showing as all the same duration? 

EngineerGantt may not be able to determine which column contains your events' end date. Ensure you've included a HighQ date type column for your end date. If you call it "Due Date" then it will be picked up automatically or include it to the right of your start date column in the iSheet view. Alternatively, use the "dueDateColumn" option below to tell EngineerGantt which column to look in.

If you are using data from the Tasks module. Ensure you have Timeline View enable from Admin>Tasks so that HighQ will show the start dates for your tasks.

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 chart to load.

container

e.g.

container:'ganttContainer1', 

Tells the code where you want the chart to appear on your page. It requires a corresponding HTML element similar to <div id="ganttContainer1">&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.

itemsPerPage

e.g.

itemsPerPage: '40', 

Sets the number of rows the chart will display before beginning to paginate the data.

scale

e.g.

scale: 'months', 

Sets the scale that the Gantt chart loads at. Options are:

• hours

• days

• weeks

• months

maxScale

e.g.

maxScale: 'weeks', 

Sets the maximum (longest time period) zoom level that a user can select. Options are:

• hours

• days

• weeks

• months

minScale

e.g.

minScale: 'weeks', 

Sets the minimum (shortest time period) zoom level that a user can select. Options are:

• hours

• days

• weeks

• months

monthView

e.g.

monthView: 'short', 

When zoomed to the month level, this determines how the month name is displayed in the scale, so:

• 'initial' - will display the first letter of the month - F

• 'short' - will display the first 3 letters of the month - Feb

• 'number' - will display the month number - 2

nameColumn

e.g.

nameColumn: '3', 

When set to a number corresponding to a column in the iSheet view (starting from 0 for the leftmost column) the value in that column will be displayed in the left panel table of the chart

otherColumns

e.g.

otherColumns: '4,6,8', 

When set to a number or comma separated list of numbers corresponding to columns in the iSheet view (starting from 0 for the leftmost column) those columns will also will be displayed in the left panel table of the chart

customLeftPanel

e.g.

customLeftPanel: 'true', 

When set true a bar will display above the chart allowing the user to select which columns they wish to see in the left chart panel. The chart will default to those set using the otherColumns option above.

labelColumn

e.g.

labelColumn: '3', 

When set to a number corresponding to a column in the iSheet view (starting from 0 for the leftmost column) the value in that column will be displayed on each bar of the chart

statusColumn

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 each bar.

defaultBarColor

e.g.

defaultBarColor: 'navy', 

If no status column is is created, this determines the default color of each bar in the Gantt chart

labelTooltips

e.g.

labelTooltips: '3', 

When set to true and the user hovers their cursor over a bar on the chart, a tooltip with display the full title from thelabelColumn above

startDateColumn

e.g.

startDateColumn: '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 date column type; the value from this column will be used for the start date of each bar in the graph. This is useful if your "Start Date" column in your iSheet must be called something else.

dueDateColumn

e.g.

dueDateColumn: '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 date column type; the value from this column will be used for the due date of each bar in the graph. This is useful if your "Due Date" column in your iSheet must be called something else.

scrollToToday

e.g.

scrollToToday: 'true', 

When set true the chart will scroll to show tasks from today onwards. When set to false the chart will begin at the first date in the iSheet view.

scrollWheelNavigation

e.g.

scrollWheelNavigation: 'false', 

When set to false, this will disable the function that uses the mouse scroll wheel to scroll left and right on the chart. The mouse wheel with scroll up and down the page as normal instead.

taskSearch

e.g.

taskSearch: '0', 

When set to a number corresponding to a column in the iSheet, clicking on a bar will open the HighQ site Tasks module and pre-filter the results based on the value in the column for this panel. If the column contains a task name, for example, then all tasks matching that name will be displayed.

chartLinks

e.g.

chartLinks: 'isheet', 

Add an click action to each bar in the chart that can perform one of several actions depending on the option:

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

chartLinks: 'print',            - will open the HighQ print preview pane for the iSheet record selected

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

chartLinks: 'default',         - will navigate to the iSheet of the record selected but the default view instead of the view chosen for the table

linkTab

e.g.

linkTab: 'self', 

Determines if links from a clicked panel should open in the same tab ('self') or a new tab ('blank').