Report Designer - Overview

The Report Designer allows you to create report templates using HTML. You are then able to set the default report template for your team, meaning that when you download a report on the Dashboard or app, your team’s default report template is used, rather than the WorkfloPlus default template.

Report templates are also used in triggers (see triggers for more information) where you can select a report template to use when a trigger is executed. In addition to this, you can set the default report template on a per-workflow basis, overriding the default report template for your team.

To use the report designer you must have either Owner, Administrator, or Editor permission.

The Report Designer can be accessed in the Dashboard by navigating to Settings and then clicking on the Reports button.

When the Report Designer loads, you will see a screen that looks like this:


 

Report Tool Bar 

The buttons in the toolbar have the following functionality that helps you manage templates:

  1. Delete Template(s): once you have selected one or more templates, you can click on this button to delete the selected template(s). You will be asked to confirm this action prior to the template(s) being deleted.

  2. Set Default Template: once you have selected a template (that is not currently the team’s default template), you can click on this button to change the team’s default template to the selected template.

  3. Create New Template: this allows you to create a new template. After clicking on this button, you will be asked to enter a name for the template (which should be unique).

  4. Refresh Templates: this will refresh the list of templates.

  5. Help: this will bring up the help dialog.

Editor panel

The editor panel allows you to edit the body, header, and settings of a report template.
There are several components in the editor panel:

  1. Toolbar: the toolbar allows you to rename and save the report.
  2. Tab bar: the tab bar allows you to switch between editing the body, header, and settings of the report template.
  3. Preset bar: the preset bar contains several presets which are useful for displaying different data within the reports.
  4. Code editor: the code editor is where you can make changes to the HTML of the body and header of the template.


Template Editor Overview

 

Toolbar


The toolbar allows you to rename the report template, and save changes made to the report template.

The toolbar has the following functionality:

  1. Back: click on this to go back to the Report Library page.
  2. Rename Template: click on the name of the report template, edit the name as required, then press enter (or click outside of the text box) to save the new name. The template name should be unique.
  3. Save Template: saves the changes made to the report template. This button will be disabled if no changes have been made to the report template.
  4. Help: this will bring up the help dialog.

Template Editor Toolbar

 

Tab bar


The tab bar allows you to switch between editing the body, header, and settings of the report template.
There are 3 tabs:

  1. Body: allows you to edit the body of the report template. The body appears underneath the header and should contain the details about the steps completed in a job.
  2. Header: allows you to edit the header of the report template. The header appears at the top of every page of the report.
  3. Settings: allows you to edit the settings of the report template. These include the report orientation, and the ability to set the team’s default report template.


Template Editor Tab Bar

 

Preset bar


The preset bar allows you to insert several presets for various pieces of data about the job or its steps. The preset bar scrolls horizontally. The presets that are available differ between the body and header of the report. Details about each preset can be found by hovering over each of the presets.

Clicking on a preset will either insert the text the preset contains at the last place that the cursor was positioned in the code editor, or produce a dropdown menu containing different preset options.

Template Editor Preset Bar

Code editor


The code editor is where you can make changes to the HTML of the body and header of the template.

Template Editor Code Editor

The code editor has several useful features that help you when editing the report template:

  • Live preview: the changes made within the code editor will be reflected in the preview panel within a few seconds of the last change.
  • Auto-completion: typing a space will display a list of fields that are contained within the job. You can use the up and down arrow keys to highlight the desired field and then press either enter or tab to insert that snippet.
  • Error detection: if you make an error in the Handlebars code, a red banner will be displayed at the bottom of the code editor informing you what the error is, and the line on which the error is located. This should help you locate and fix errors, as reports cannot be generated, previewed, or saved while there are Handlebars errors.
  • Syntax highlighting: text within the code editor will be highlighted in different colours to make it easier to read the code.
  • Command palette: right-clicking on the code editor and then clicking the Command Palette option will display a list of useful commands.

 

Handlebars


Report templates are written using a mix of HTML and a templating language called Handlebars. You may notice that in the presets, auto-completion items, or boilerplate report, there are pieces of text surrounded by curly brackets, such as {{JobTitle}}. The curly brackets denote that the text will be replaced by the value of the field within the curly brackets. For example, the {{JobTitle}} text would be replaced in the report by the title of the job.

Something that you should keep in mind when using Handlebars is the context in which fields are used. For example, before you can get the value of a step using the {{Value}}, you need to make sure that you are within the context of a step. You can do this by using a step iterator (see the Iterator presets in the Body tab’s preset bar). When you are inside the step iterator, you can reference the fields contained within a step.

In order to get a good idea of the fields available within various contexts, familiarise yourself with the boilerplate report, and then take a look at the Job Data by clicking on the icon on the preview panel’s toolbar.

Handlebars reference: http://handlebarsjs.com/guide/#what-is-handlebars

Header height (header tab only)

Template Editor Header Height

The header height can be used to set how tall the header is (in millimeters). This value should be experimented with until you are happy with the resulting report in the preview panel.

Support for Variables

Variables can now be used in reports.

There are 2 new helpers:

{{setVar "variable_name" "variable_value"}}
{{getVar "variable_name"}}

When setting a variable, you can use a static value, a value from the job data, or the result of a helper. The setVar helper has no output other than if there’s an error.

Since the report templates are compiled line-by-line, variables must be set before you can get the variable, otherwise you’ll get an error. You can use getVar on its own or within another helper.

Here’s some example code to get started: https://www.codepile.net/pile/5qmYNvqg

Ability to Create a report from a blank template

To create a report from a blank template click on the plus icon on the top right hand side.

You have the option to either create from blank template or you can use an example template if you wish.  You will be asked to give the template a name for future reference.

Here’s a screenshot of what the blank template looks like (it’s not fully blank, but ready to “start typing” immediately):


Preview Panel

 

The preview panel allows you to see a live preview of the report template that you are editing.

There are a couple of components in the preview panel:

  1. Toolbar: the toolbar allows you to select the job that you want to preview and view its data.

  2. Live preview: the live preview allows you to see a live PDF preview of the report template you are creating using the job selected in the toolbar.


Template Editor Preview Overview

 

Toolbar


The toolbar allows you to select the job that you want to preview and view its data.

Template Editor Preview Toolbar

The toolbar has the following functionality:

  1. Workflow Selection: this dropdown menu allows you to select a workflow to filter the jobs by.

  2. Job Selection: this dropdown menu allows you to select a job to preview the report template against.

  3. View Job Data: this allows you to view the selected job’s JSON data so that you can see which fields you can use in the report template.

  4. Refresh Workflows and Jobs: refreshes the workflows and jobs listed in the workflows and jobs dropdowns.

 

Live preview


The live preview allows you to see a live PDF preview of the report template you are creating using the job selected in the toolbar.

Template Editor Live Preview

Once you've selected a workflow and a job, whenever you type into the editor, a preview will be generated and displayed. If there are Handlebars errors (in which case you will see a red banner at the bottom of the code editor), these must be corrected before a preview will be generated.

A
Alana is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.