Creating Your First Report Template

When a job has been completed, WorkfloPlus can generate reports that can be emailed out. What a ‘report’ contains is entirely up to you. A report might be a detailed job report showing all the completed steps in the job (much like our default report template), it could cover a specific part of a workflow (such as a health & safety check), or it could even just be an automatically generated certificate.

Customised report templates are built using the WorkfloPlus report editor. It uses a mixture of HTML and CSS to build the template, and also takes advantage of Handlebars to pull in data conditionally. It is completely within your control.

Getting Started

Start by navigating to the Report Designer by going to the Dashboard, then navigating to Settings, and clicking on the Reports button. When the Report Designer loads, you will see a screen that looks like this:

Getting Started

Start by clicking on the Create Template button. If you have already created report templates before, then you can click on the button in the toolbar to create a new template.

You will then be asked to enter a template name. This should not be the same as the name as any other report template in your Report Library.  You can choose to create a new blank template or you can use an example template which already has some suggested code included.

Once you have entered a template name, click on the Save button to continue. At this point, the Report Template Editor will open. The template will be filled in automatically with a boilerplate report (which is the WorkfloPlus default report template) and will preview the report using the last completed job in your team. This template contains all the steps in the job.

Report Template Editor

The Report Template Editor allows you to edit the body and header of your report template. You can also choose whether the report should be displayed in portrait or landscape, and set the report template as the team’s default. 

You will see references in the instructions below to the ‘Body’, ‘Header’ and ‘Settings’ tabs. These are the tabs at the top of the left-hand section. The Header sections cover the section at the top of each page of the report (shown in dark blue in the example above), and the Body section covers the rest of the content on each page of the report.

If you set the template as the team’s default, when you download a job’s report from the Dashboard or app, the team’s default template will be used rather than the default WorkfloPlus report template.

How can I change the logo?

To better secure WorkfloPlus, the linking of external images is forbidden. Instead, images must be encoded, as described below.

To change the logo of the report, go to the Header tab in the Report Template Editor and look towards the bottom for a line like the following:

Once you do this, the preview will regenerate and you should notice that the logo in the report will have changed.


How do I encode my logo?

To encode an image to embed as a logo, you must first have a png or jpg copy. The use of svg format images is not fully supported and may give undesirable results.

With your image file handy, visit Base64 Image encoder and either drag/drop your image anywhere on the page, or use the file browser.


Once your image has been encoded click copy on the HTML usage code, then back in the Report Template Editor paste this content into the logo section of the header ensuring the paste is between the speech marks.

After pasting in the HMTL code into your report editor please delete <img src=  from the beginning of the code for it to work correctly.  If there are any issues with the code then it will be displayed in red text.  If the text is blue then the new logo should be displayed in your sample report on the preview screen.


Changing the page orientation

To display the report in landscape mode, go to the Settings tab in the Report Template Editor, and select Landscape for the Report Orientation.

Report Orientation

Once you have done this, the preview will regenerate and you should notice that the report will now be displayed in landscape.

Changing the size of the header

To change the height of the header, go to the Header tab in the Report Template Editor. Underneath the Preset Bar, you will see an input for the header height in millimeters. This sets the amount of vertical space at the top of each page that is allocated for the header of the report. You can then change this value until the header is the desired height in your report, once completed, this will be reflected in the preview panel.

Report Header Height

Editing Your Report

The boilerplate template that you get when you create a new template already displays all of the steps in the job. 

Start by resetting the body and header to get a fresh template. Create a new report, and replace all of the text in the body's code editor with the following:


You will notice that the preview will be generated and it will just be a blank page. You can now put some content in.


Only show Completed steps

If you only want to show information from Completed steps then within the body tags add the following, then anything added to the body within that condition will only consider data from Completed steps


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
  </head>

  <body>
    {{#with CompletedSteps}}

    {{/with}}
  </body>

</html>


Showing all steps

Start by going to the Body tab. To display all of the completed steps, place the cursor on line 12 (inside the <body> tags and click on the Iterator preset, and then click For-each Step. The body of your template should now look like this:



Once you do this, you should see a preview with all of the values for each step in the selected job. You will need to use HTML and CSS to style the report from this point.


If you only want to display completed steps in your report, rather than selecting the For-each Step iterator, you should select the For-each Completed Step iterator. Similarly, you can do the same for canceled steps.

Changing the look and feel of your report

Start by creating a new template. This will contain a boilerplate template that will act as a starting point.

Changing the font

To change the font of the report, go to the Body tab, and then find the body selector on line 17:


At the bottom of that block of code, you can change the font-family property to suit your needs. For example:


Changing the report colours 
To change the header and background colour go to the body tab and navigate to line 36 of the template, you’ll see background-color: #222d43;

You can then change the code from #222d43 to your branding colours, an example of hex codes are below, you can find more colours here.

Change the font sizes

To change the default font size of the template, go to the Body tab, and then find the body selector on line 17:

Add a new CSS property for font-size with the appropriate value to that block of code. For example:



You may notice that the header height needs to be changed at this point. Please refer to the "How do I change the size of the header?" section. An ideal header height for the boilerplate template after making this change is 71.

Other font-size properties already exist in the template, so search in the CSS for instances of font-size and experiment with the values of those properties until you're happy with the result.

Thumbnails for attachments

Thumbnails for attachments can be displayed in the report by using the Step Attachments preset while inside the context of a step or substep (i.e. you are within a step iterator such as {{#each CompletedSteps}}) in the template. Please see the "show all steps?" section as a starting point for this.

Base size of the attachments

Once you have inserted the Step Attachments preset, you can modify the size of the attachment. Let's say that as part of your template, you have the following code:


There are currently 3 sizes of attachments:

  • Small (maximum 200 pixels in the largest dimension)

  • Medium (maximum 300 pixels in the largest dimension; this is the default size)

  • Large (maximum 500 pixels in the largest dimension)

 

You can add an additional parameter to the getAttachmentUrl preset to set the size. The parameter can either be small, medium, or large. For example:


Considerations should be made for the size of attachments; the larger the attachment size, the bigger the file size will be for the generated PDF report.

Refining the size of attachments

CSS can be used to refine the size of attachments. For example, if you want to make the maximum height of an attachment 100 pixels, you can do the following:


Show the username of the user who completed a step


To show the username of the user who completed a step, make sure that you are within the context of a step or substep, click on the Step Completion User preset to insert the following code:


For example, if you wanted to display the username next to the value of a step, you could have the following code:


Show specific steps

If you only want to show specific steps (or you want to style different steps in different ways), you can use the If-condition preset. Within the context of a step or substep, click on the If-conditon preset, and select the If X equals Y preset. This will insert the following code:


In this case, we want to only display certain steps. Let's say we want to only display a step if its Step ID is a certain value. We would need to change X to StepId, and Y to the ID of the step we want to display, and then we could add our step value underneath the if-condition. In the following example, the value of a step with the Step ID b5385117-99c8-43dd-8ca8-447c09067218 would be displayed:



This isn't limited to Step IDs either. You could conditionally display the value of a step based on the Step Title. For example:



You can find all of the fields you can use in your if-condition by clicking on the View Job Data button in the Preview panel's toolbar.

Only show steps that have values

If you only want to display steps that have a value, you can use if-condition preset for If step has a value. Within the context of a step or substep, click on the If-conditon preset, and select the If step has a value preset. This will insert the following code:


Within that handler, you could insert the code used to display steps. For example:



You can also use the If step does not have a value preset to highlight steps that should have values but the value hasn't been submitted by the user who completed the step.

Show the steps with answers in a table
Start by creating a new report, and replace the body's code with the following:


First, you will need to create a table outside the context of the steps, and then add a table header. For example:



Next, you will need to add an iterator for the steps in the job. For this example, only single steps will be displayed to simplify the code:



Finally, you will need to add a row and table cells for each step:



After doing this, and adding some CSS to style our table, you should have the following code for the body:



This will display a preview of the selected job, where for every completed single step, there is a row containing the Step Title and Step Value of that step.


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.