Engineer.List Support

Installation Documentation, Advanced Configuration + FAQs

Introduction

EngineerList allows the presentation of iSheet data into an attractive panel layout in HighQ Home or Wiki pages.

Please note that engineerList is designed to accompany Tables for HighQ to create dynamic comparison tables, but can also be used without to link to iSheets and tasks.

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 engineerList.zip and extract the contents (engineerList.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:
EngineerList 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 engineerList.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 list to a HighQ site

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

Create an iSheet with the below columns:

A ‘Single Line Text” column for your panel names
At least one “Choice” column to represent each of the "status" layers for your panels - e.g. whether or not a Regulation applies in this region, or the compliance status of each corporate entity
Optional: Image column for flags or other images

Create a view

Create a new view your iSheet called Quick View.
Ensure your panel name column is the first column in the view, followed by your image column (if used), single line text group column (if used), then your choice columns.
Save your view.
Optional: If you you are using engineerTable to show a comparison table when the panels are clicked, create a new view called "iSheet View" and ensure your panel name column is the first column, add any other columns you want to display after this.

Add to your Home/Wiki page

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

engineerList({

container: 'listContainer1',

});

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

Click Ok and then Save and your list 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"

Displaying Totals

EngineerList can be used to show the number of times a State/Region/Entity occurs in your iSheet. It can then link through to a filtered view of the iSheet showing only the matching rows when a "total" panel is clicked. You’ll need iSheets and either the Home or Wiki modules available in your site.

Create an iSheet with at least a ‘Choice” column that will be show on your panels, the number of occurrences of this choice will be show on each panel.
You can add any other columns you need after the choice column above; perhaps to show information about each case, property, or claimant in the portfolio.

Create your views

When totaling the data in our iSheet we need to load ALL the rows then do the sum, so we want to make our "Quick View" as small as possible, this means just the name column should be used in this view. Your iSheet View can then contain all associated data.

Create a new view of your iSheet called Quick View.
Include only your Choice column containing values you want to count.
Save your view.
If you want to show more/different data when your panels are clicked, create a new view called "iSheet View" and ensure your panel name column is the first column, add any other columns you want to display after this.

Add to your Home/Wiki page

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

The below is the minimum code needed to run engineerList in "choropleth" (many colors) mode – the “flag_” links will need to be replaced with your links from the installation section.

engineerList({

container: 'listContainer2',

isChoropleth: 'true',

});

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

Click Ok and then Save and your list should appear.

Modifying Options

The code for each list can be modified by setting the options, these are the lines of code ending in a comma (,) between the curly braces ({}) after “engineerList”. Each line changes or provides information to a different component of the list. 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.

nameColumn: '0',

isChoropleth: 'true', <<ADD NEW LINE HERE>>

});

For example, if you wanted to change the text on the button that switches between your choice columns we can use the buttonText option.

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

isChoropleth: 'true',

buttonText: 'Select Layer',

});

FAQs

Can I have multiple lists on the same page?

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

Advanced Configuration

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

Required Options

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

container

e.g.

container:'listContainer1',

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

nameColumn

default: '0'

e.g.

nameColumn: '0',

Tells the code which column in your Quick View AND iSheet View contains the list of panel names. The first column is column 0 the second is 1, etc. Normally the first column, 0, will contain these names but if you are linking to a data set that must be formatted differently this value will need to updated for the list to generate.

flagColumn

default: 'auto'

e.g.

flagColumn: 'false',

Tells the code which column in your data contains the an Image column with the images used to display on the panels. The first column is column 0 the second is 1, etc. If you wish to hide the images on the panels this must be set to false. By default engineerList will display the leftmost Image column from your Quick View.

groupColumn

default: 'false'

e.g.

groupColumn: '2',

Tells the code which column in your data contains the single line text or choice column that will be used to create groups of panels, this could be by continent, corporate entity, or case type. The first column is column 0 the second is 1, etc.

Setting this to 'status' will group the panel by the status pills of the currently selected iSheet column.

hideGroupColumn

default: 'true'

e.g.

hideGroupColumn: 'false',

By default, if your group column is a choice column type then it is removed from the dropdown menu (i.e. if we group by continent, then it's unlikely we'd want the user to see the continent pills option in the menu). However, in a real estate portfolio it might be helpful to group by property status and also show the lease status pill.

otherColumns

default: 'false'

e.g.

otherColumns: '4,5',

Displays the column header and value of other columns from your data on the panel body. To display multiple column add their column position in your view here in a comma separated list. The first column is column 0 the second is 1, etc.

imageWidth

default: '64px'

e.g.

imageWidth: '40px',

Sets a width for the images displayed in each panel if and image column is found in the iSheet and flagColumn is not set to 'false'

titleLocation

default: 'right'

e.g.

titleLocation: 'above',

Choose where the name of the panel should appear in relation to the panel image, accepted options:

titleLocation: 'above',

titleLocation: 'below',

titleLocation: 'right',

panelLinks

default: 'false'

e.g.

panelLinks: 'isheet',

Add an click action to each panel 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

default: 'false'

e.g.

showTable : 'true',

This feature requires engineerTable to be installed in your HighQ instance - Contact us for more details.

Enables a dynamic table below the list that will display a subset of the data corresponding to the currently selected view.

By default, Engineer Table will load directly below Engineer List in its default configuration, if you wish to make changes this table then you'll need to to add some options from the Engineer Table documentation and embed then between the curly braces of "tableOptions: { }," like in the example below. Any options that apply to this table must be within the braces. It's a good idea to add these options after all your options that apply to Engineer List to avoid confusion.

showTable : 'true',

tableOptions: {

recordLinks: 'viewItem',

transposeTable: 'true',

showTableFilters

default: 'collapse'

e.g.

showTableFilters: 'false',

This feature requires engineerTable to be installed in your HighQ instance - Contact us for more details.

This feature enables a filters panel below EngineerList that allows the end user to select which columns of data they would like to see in the comparison table below. It defaults to a collapsed section that can be expanded by clicking the Filters button:

showTableFilters: 'collapse', - default, hides the filters but allows the user to open a filters menu

showTableFilters: 'true', - displays the filters whenever a panel is added to the comparison table

showTableFilters: 'false', - hides the filter options

Please note, if a user unchecks ALL filters then the entire table will be shown, just as if all the boxes were ticked.

filterText

default: 'Filters'

e.g.

filterText: 'Filter Table',

This feature requires engineerTable to be installed in your HighQ instance - Contact us for more details.

When showTableFilters is set to 'collapse' this option changes the text on the button that is generated above the comparison table that allows filtering the iSheet column that a user is interested in.

default: 'View Legislation'

e.g.

scrollButtonText: 'View Comparison Table',

This feature requires engineerTable to be installed in your HighQ instance - Contact us for more details.

Changes the text on the button that is at the bottom of the page when the comparison table is active but currently below the view port of the user's browser.