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, displaying 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
• JavaScript accordion
• Sortable and searchable tables
• Hyperlinks

To follow along with the tutorial, please download the workspace from the article's Files section. 

Process Walkthrough

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 add to the map, without writing any code. While this is beneficial if you want all your features to be one color, it presents a problem if your features require multiple colors. We can change the colors of some features by replacing and adding to the JavaScript generated 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 data caching enabled. Once the workspace has run, open the data cache and then open the HTML content.

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

To add conditional coloring to the map, we’ll need to add a JavaScript function that sets the features' colors based on their 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 replace any existing code; instead, it adds the ‘setstyle’ function at the end of the script. The ‘setstyle’ function checks the name property of all the features in the layer on the map. If the feature's name property matches the user-specified municipality name, it sets the color to blue; all 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.

This method for Leaflet maps only works for line and polygon feature types, as Leaflet points are SVG markers; thus, you would need to download/create additional SVG markers with different colors.

JavaScript Accordion

Another customization option is a JavaScript Accordion button, which can hide rows in a table within an HTML report. In this workspace, a simple example is provided that hides a single table; however, this method can be particularly useful when multiple tables are present in the report. Hiding the tables will make the report easier for users to digest.

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 the div containing the table
3. JavaScript to hide/show the table

For more information on how JavaScript accordions work, much of the code required to accomplish this was taken from the W3Schools how-to article.

Locate the second HTMLReportGenerator transformer and open the parameters window. Click on the first Custom HTML element under Page Contents to see the HTML code.

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.

Click on the second ‘Custom HTML’ section in page contents, and focus on the first two lines of HTML. The first line is the accordion button, and the second line is a div that holds the table. Note that the class of the div is ‘panel’, so it will be hidden by default.

Click on the last ‘Custom HTML’ section in the page contents and look at the first 18 lines of code. Here, we define a variable ‘acc’ that gets any elements 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 whether it has been clicked. If the accordion button has been clicked, the next element is retrieved, which is the panel containing the table. Then the display styling is changed to show or hide it based on the current display setting.

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

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 accordions, you can achieve this by adding 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 contains the button to sort the table, the second is the search box for searching the table, and the last line is a div that will hold the table, allowing the search and sort functions to be easily linked to it.

Close the text editor window and open the last ‘Custom HTML’ section under ‘Page Contents’. With the text editor open, first focus on the second function called ‘searchFunction’.

This function takes the text input into the search bar, converts the text to uppercase, gets the table by its ID, then a for loop loops through all the rows 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 starts a while loop when the sort button is clicked. It loops through the rows of the table, compares each row to the next, and swaps them if necessary. It continues this switching process until all the rows require no further switching operations.

Hyperlinks

The final thing we will cover is how to 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 rather than requiring users to copy and paste them into their browsers. 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 are created as you would with a standard HTML link, but we are using the WEBSITE_URL attribute value. The same process is applied to the Facebook page.

Run the entire workspace and open the HTML page in your browser to see the results of the HTMLReportFormatter. 

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.