When a job has been completed, WorkfloPlus automatically generates reports. 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.
Navigate to the Report Designer via the main menu:
Start by clicking on the Create Template button.
If you have already created report templates before you will see them listed in the main panel. To create a new template simply click on the + button in the top panel.
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 the code for the standard WorkfloPlus template as a starting point.
Once you have entered a template name, click on the Save button to continue. At this point, the Report Template Editor will open. If you have selected Create with Example Template this 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. If you have selected Create from Blank Template, then only the HTML header steps will be included.
Sample WorkfloPlus template on launch:
Blank template on launch:
You will see references in the following instructions 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), the Body section covers the rest of the content on each page of the report, and the Settings allow you to adjust the page orientation, add a description and set the report as the default template. There is also a ? ‘Help’ button which will guide you through some of the code that can be used.
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. This can be done via the Settings tab.
The 'eye' icon on the top right hand side of the preview panel will display the selected job data which is useful for pulling in Step IDs into the code.
At the top of the preview panel you can select which Workflow and Job you wish to display.
Handlebar Helpers
There are several handlebar helpers accessible via the top of the code panel which can be used for quickly generating code for a lot of common scenarios.
1.Iterator
- For each Step
- For each Completed Step
- For each Cancelled Step
2. Get Steps
- Get Step By Step ID
- Get Steps By Step ID
- Get Step By Step Tag
- Get Steps By Step Tag
- Get Substep By Step Tag
- Get Substeps By Step Tag
- Group Steps By Step Tags
3. Field Extraction
- Extract field (inline)
- Extract field (block)
4. Step Title
5. Step Description
6. Step Type
7. Step Completion User
8. Step Total Duration
9. Step Active Duration
10. Step Value
11. Step Attachments
12. if condition
- if X equals Y
- if X does not equal Y
- if X>Y
- if X>=Y
- if X<Y
- if X<=Y
- if X is null or empty
- if X is not null or empty
- if step has a value
- if step does not have a value
13. Variables
- Get Variable
- Set Variable
14. Maths
- Round
- Absolute
- Floor
- Ceiling
- Minimum
- Maximum
- Modulo
- Remainder
- Random
15. Basic Arithmetic
- Add
- Subtract
- Multiply
- Divide
16. Array Operations
- Mean Average
- Median Average
- Mode Average
- Sum
Changing the Logo
To better secure WorkfloPlus, the linking of external images is forbidden. Instead, images must be encoded using a Base64 image encoder.
To change the logo displaying on the report, go to the Header tab and look towards the bottom of the code for a line like the following or alternatively just do a simple search for the word ‘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 a 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 there are no issues and your new logo should be displayed in your sample report on the preview screen.
To adjust the size/location of the logo go to the Body tab and locate the following code and adjust the settings as needed.
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.
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 millimetres. 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.
Changing the Font
To change the font of the report, go to the Body tab, and then find or search for the body selector:
At the bottom of that block of code, you can change the font-family property to suit your needs. For example:
Changing the Font Sizes
To change the default font size of the template, go to the Body tab, and then find or search for the body selector and make the required changes:
Add a new CSS property for font-size with the appropriate value to that block of code. For example:
Changing the Report Colours
To change the background colour in the header go to the Body tab and then find or search for the header selector:
You can then change the code from #222d43 to your branding colours using a HEX Code of your choice.
Saving Custom Report Template
Once the template report is completed, you can save it via the save button at the top of the coding panel. Should you wish to make the custom report the default report for all Workflows on your team you can highlight and then 'Set Default Report'.
This PDF template will then be used for all completed Jobs on your team if Use System Default is selected in the relevant Workflow panel:
Reporting