How to Customize HTML Reports

Introduction

This tutorial will show you how to customize elements of HTML reports generated from the HTMLReportGenerator transformer with a little help from some additional transformers and some code. In order to be able to do this you will need to be a little bit familiar with HTML/CSS and JavaScript.

We will be using a workspace that generates an HTML report that shows the location and information about tourist attractions and businesses for a city in the Metro Vancouver Area specified by the user. This article will show you how to customize the following aspects of HTML Reports:

• Add conditional coloring to map features

• Sortable/searchable Tables

• JavaScript Accordion

• Hyperlinks

Add Conditional Coloring to a Map

If you have previously used the HTMLReportGenerator transformer to produce a web map, you might have noticed that there is an option to set the ‘Layer Color’. This is an easy way to set the color of the features you are adding to the map and avoids the need to write any code. While this is good if you want all your features to be one color, this is a problem if your features need to be multiple colors. We can change the colors of some of the features by replacing and adding to some of the JavaScript produced from the HTMLReportGenerator transformer using the StringReplacer transformer.

First, let’s find the JavaScript that needs to be replaced. Open up the workspace provided, then locate the first HTMLReportGenerator Transformer under the bookmark ‘Generating Reports’, select it and then click ‘Run To This’ with feature caching enabled. Once the workspace has run, open the feature cache and then open HTML content.

Here we can see the HTML and JavaScript generated from the HTMLReportGenerator transformer. If we scroll all the way down to the bottom, we can see the code that specifies the color of the layer on the map.

To add conditional coloring to the map we’ll need to add a JavaScript function that sets the color of the features based on the name property. This can be done using two StringReplacer transformers. The first StringReplacer transformer replaces ‘{"color": "rgb(0,0,255)"}’ with ‘setstyle’. This on its own does not accomplish anything, but ‘setstyle’ will be the name of the function that is used for the conditional coloring.

The second StringReplacer does not actually replace any of the existing code but adds the ‘setstyle’ function before the end of the script. The ‘setstyle’ function checks if the name property of all the features in the layer on the map. If the name property of the feature is the name of the municipality that the user specified, then it sets the color to blue, and all the other features are set to grey.

If you want to add more than two colors for features on a map in your own workspace, all you would need to do is add additional else if conditions to your function.

*Note that this method for Leaflet maps only works for line and polygon feature types, as points in Leaflet are SVG Markers, and thus you would need to download/create additional SVG markers with different colors.
 

JavaScript Accordion

Another customization that you can make is a JavaScript According button, which can hide the rows of a table in an HTML report. In this workspace, it is a simple example that hides a single table, but this method can be particularly useful when there are multiple tables in the report. By hiding the tables it will make the report easier to digest for users.

To do this, there are three things we need to add to the HTMLReportGenerator as ‘Custom HTML’:

1. CSS styling for the accordion button

2. HTML for the accordion button and div containing the table

3. JavaScript to hide/show the table

If you want more information on how JavaScript accordions work, a lot of the code to accomplish this was pulled from this W3Schools how to article.

Locate the second HTMLReportGenerator transformer and open the parameters window. Make sure that the first ‘Custom HTML’ content is selected in page contents and then double click on the text box to open the text editor.

This is the CSS styling for the accordion. The key part of the CSS here is in ‘display: none;’ under ‘.panel. This hides the table by default.

Close the text editor and click on the second ‘Custom HTML’ section in page contents, and open the text editor.

For now, focus on the first two lines of HTML. The first line is the accordion button and the second line is div that holds the table. Note that the class of the div is ‘panel’ so it will be hidden by default.

Close the text editor and click on the last ‘Custom HTML’ section in the page contents, and once again open the text editor.

For now, focus on the first 18 lines of code. Here we define a variable ‘acc’ which gets any elements that are of class ‘accordion’. The second var ‘i’ is an index variable that is used to loop through all the accordion elements (this is necessary when you have multiple accordion buttons). The last part is a for loop that for each accordion element, checks to see if it has been clicked. If the accordion button has been clicked, then the next element is retrieved, which is the panel containing the table, then changes the display styling to show or hide it depending on the display styling.

The result is that when the user clicks the accordion button, it toggles the table’s visibility.

Sortable and Searchable Tables

Another useful customization that you might want to add to an HTML report is the ability to sort or search tables. Much like with the accordions, you can do this by adding some custom HTML and JavaScript to your report.

First, locate the second HTMLReportGenerator Transformer under the ‘Generating Reports’ Bookmark. Click on the second ‘Custom HTML’ section under ‘Page Contents’ and then open up the text editor.

With the text editor open, focus on the last three lines of code. The first line is the button to sort the table, the second is the search box to search the table, and the last line is a div that will hold the table so that the search and sort functions can easily be linked to the table.

Close the text editor window and open the last ‘Custom HTML’ section under ‘Page Contents’ and then open the text editor.

With the text editor open, first focus on the second function called ‘searchFunction’.

This function takes the text inputted into the search bar, converts the text to uppercase, gets the table by its id, then a for loop loops through all the rows and in the table and checks if the text in the cell matches the text in the search box, and finally hides all the rows that do not match the searched text. Note that this function searches a single column, in this case, the ‘Description’ column.

Next, let’s focus on the last function in the text editor window called ‘sortTable’.

This function works by initiating a while loop with the sort button. It loops through the rows of the table and compares one row to the next and switches the rows if necessary. It continues this switching process until all the rows until no more switching operations are necessary.

Hyperlinks

The final thing that we will go over is how you can add hyperlinks to your HTML report tables. In the tourism data, there are links to the websites and Facebook pages of the attractions and businesses. It makes the most sense for these links to be clickable as opposed to a user having to copy and paste the links into their browser. These hyperlinks can be created using the AttributeManager transformer and a couple of StringReplacer transformers.

First, locate the AttributeManager transformer under the ‘Preparing data for report’ bookmark and open the parameter window.

Scroll down until you find the ‘WEBSITE_URL’ attribute. Click on the ‘Attribute Value’ and then click the ellipses button to open the text editor.

The links created as you would a standard HTML link, but we are taking the attribute value from WEBSITE_URL. The same thing is done for the Facebook page.

In order to make the hyperlinks work properly, there is one final step that needs to be done. If you open up the HTML content produced by the HTMLReportGenerator, you will see that the hyperlinks in the table don’t look quite right. At the start of the hyperlink, there is ‘&lt;’ and at the end of the hyperlink, there is ‘&gt;’, and instead of quotes around the hyperlink, there is ‘&quot’. These are entity references for ‘<’, ‘>’, and ‘“‘ which allows those characters to be displayed, but this results in the string not being interpreted as HTML.

To fix this, we use two StringPairReplacer transformers to replace these entity references with the actual characters.

Data Attribution

The data used here originates from open data made available by DataBC. It contains information licensed under the Open Government License - Destination BC.