Visual Editor Template

1. Summary
2. The Editor
   1. Header/Footer
   2. Body
   3. Page Setup
3. Inserting Variables
   1. Inserting Variables - Text/Hyperlink Field
   2. Inserting Variables - Text Box Field
   3. Inserting Variables - Date/Time Field
   4. Inserting Variables - Checkbox Field
   5. Inserting Variables - Dropdown Field
   6. Inserting Variables - Dropdown Field (Multi)
   7. Inserting Variables - Number Field
   8. Inserting Variables - Object Relation Field
   9. Inserting Variables - Object Relation (Multi)
   10. Inserting Variables - Rich Text
4. Inserting Images
5. Inserting Signature
6. Inserting Photos From Sample Attachments
7. Inserting Worksheet Data
   1. Render Worksheet
   2. Test Worksheets Summary
8. Inserting A Public Report QR Code
9. Labels
10. Advanced Usage

 

Summary

When creating a new Report Template, you have the option to use the "Visual Editor" template type. This utilizes rich text so that you can style your report similar to a Word document. It also comes with a field picker for inserting dynamic data such as Test Results.

 

The Editor

The visual editor has all of the common styling functionality that you would see in any rich text editor - font family, font color, font sizes, image insertion, etc. You can use the quick-shortcut bar to choose how to style your template.

The editor has 4 tabs: Header, Body, Footer, and Page Setup.

 

Header/Footer

The header and footer repeat on every page. The margins and height of the header and footer can be customized under the "Page Size" section. Here is an example of a header and footer:

 

Body

The body is where the bulk of your content will go. Utilizing tables and the Insert Variable action, your report is a blank slate that can be made as simple or complex as you need it to be. Here is a simple example of using tables and variables:

Page Setup

Different margins and widths/heights can be modified under the Page Setup tab. You may have to play around with the margins a little bit to make sure they look right in your preview. The header/footer margin offset and height are automatically calculated if you leave them blank. In some use cases, you may want to set your own dimensions.

With the setup above, your final COA would look something like this:

Let's take a deep dive into common use cases

Inserting Variables

The "Insert Variable" button is used to insert dynamic data into your report. This will typically be fields like customer name, assay name, and test results. Upon clicking on the "Insert Variable" button, you are presented with a data type selector and a field selector. You can type in a keyword to search through all fields or you can browse through the possible fields to display. When inserting a field, it will display in the rich text editor with a dotted blue border to indicate a dynamic field. Each field type has different options you can choose from. 

Inserting Variables - Text/Hyperlink Field

Text fields have the option to display as a barcode. This can be either a QR Code or a Code128 barcode. Because of the nature of dynamic fields, the barcode will not display correctly within the editor itself. You will need to hit the "Preview" button to see how the barcode will look in your template.

 

Inserting Variables - Text Box Field

Textbox fields do not have any special options to choose from. The value will be inserted as-is.

 

Inserting Variables - Date/Time Field

Date/Time fields have special formatting options you can choose from. The first few options are preset date formats. If none of these fit your use case, you can select the "Custom" option to configure a completely custom format to your liking. Click on the buttons to insert a date component or character. When configuring a custom formatted date, there will be a preview of the date format so you can see how your date will look like.

 

Inserting Variables - Checkbox Field

Checkbox fields have the option to display different values if the value is checked vs unchecked. "True Value" will be displayed if the checkbox is checked. Inversely, the "False Value" will be displayed if the checkbox is unchecked.

 

Inserting Variables - Dropdown Field

Dropdown fields do not have any special options to choose from. The value will be inserted as-is.

 

Inserting Variables - Dropdown Field (Multi)

Dropdown (multi) fields have a special option to display the value separated by a specific character. It defaults to a comma (", ") character.

 

Inserting Variables - Number Field

Number fields have a few options to select from - significant figures, decimal places, and barcode. Significant figures and decimal places will prompt for an input on the number of significant figures or decimal places for rounding. The barcode option will behave the same way as the barcode option for Text/Hyperlink fields. In the example below, the value for "Weight" is 12.3456. Using 4 significant figures, this option will display as "12.35".

Inserting Variables - Object Relation Field

Selecting an object relation field will prompt you to select another field within the related object. For example, selecting "Assay" will give you another dropdown where you can select "Title". You can drill down to as many relationships as you need.

 

Inserting Variables - Object Relation (Multi)

Multi-object relationship fields have a special option of choosing how to iterate over each item and display the related value(s). This is known as a "for-each" loop. For example, selecting the "Tests" variable will prompt you to display the test values in 3 different ways: Table Rows, Table Columns, or new lines.

Inserting a "for-each" variable will insert an element in the editor with a dotted blue outline. Clicking inside will focus your cursor within the "for-each" context. When inside a "for-each" context, the variable picker will give you a new variable to choose from. In the case of using a "for-each" loop for tests, we will be able to select test values to display.

Here are examples of how the template will look like using each "for-each" type:

Table Rows

Table Columns

New Lines

 

Inserting Variables - Rich Text

Rich text fields do not have any special options to choose from. The value will be inserted as-is.

Inserting Images

Static images

Static images (such as your company logo) can be uploaded directly from your computer. These will display in the rich text editor and you can resize/adjust the margins of the image. Click the quick-suggestion shortcut or the image icon in the toolbar to upload a static image

Dynamic Images

Dynamic images are images that come from files you upload to QBench. Currently, the dynamic image cannot be displayed in the editor itself. You will need to hit the "Preview" button to see a dynamic image. Dynamic images can be taken from the "Asset" data type when inserting a variable. When selecting an "Asset" data type field, you will have the option to "Insert as image".

Images can be resized using the corner handles:

Inserting Signature

The "Signature" top-level variable is used for inserting a user signature. After selecting the "Signature" variable, you will need to select "Asset" and then "Insert as Image" (similar to the other dynamic image methods). Don't forget to select your signature to see it in the preview!

Inserting Photos From Sample Attachments

A common use case is inserting a photo of the Sample being reported. This can be done in one of two ways:

1. Specify a filename

Entities that have the ability to upload attachments will have a selectable field option named "get_attachment". If you know the name of the filename you want to display, this is the perfect option for you. Selecting this option will prompt you for the filename and then you can select the option "Insert as image"

2. Run a "for-each" loop on all Sample Attachments

You have the option to iterate over all Sample Attachments and display them on your report. The field "get_attachments" will insert a "for-each" loop into the editor. You can then render the Asset as an Image using the "Insert as image" option.

Inserting Worksheet Data

Render Worksheet

Specific data types have worksheet data that can be displayed in a report. These include Samples, Tests, Batches, and more. Selecting one of these data types will give you the option to select "Render Worksheet". If you are using Spreadsheet Worksheets, this will render based on the configuration you have setup for your worksheet. If not, it will render the entire worksheet and all of its inputs.

Test Worksheets Summary

In Order level Reports, there is a special variable called "Render Test Worksheets Summary". This will combine multiple test worksheets from the same Assay on the same Order into a single Worksheet. In this example, I have the following setup:

- Named Cells in the Worksheet config

 

- Three Tests with the same worksheet on an Order. I have entered different values into each Test worksheet

Next, in the visual editor, I'm going to click the "Insert Variable" button and enter the following information:

NOTE: The value in "Assay IDs" will be different for you based on which Assay you have assigned to your Samples on your Order.

Finally, when I preview this report, we will see one table with all the worksheet data from all 3 Tests combined into one table:

Inserting A Public Report QR Code

On report templates, there is a selectable top-level data type called "Report". The Report object has a field you can select called "public_link" which would be the public URL of the report once it is generated. Combined with the QR Code option, you can feed this field into the QR Code function and have it direct to the public URL when scanned.

 

Labels

Labels are a bit different than the other template types. Labels will only have a body and it will have different configuration options in the Page Setup tab. Instead of header/footer offset, there are label dimension values you can specify. Since labels can vary in size, you can take advantage of the preview functionality and adjust the margins until it fits your label correctly.

Advanced Usage

Manually Inject Jinja Code

If you are familiar with Jinja2 code syntax and the QBench relationship model, you can insert variables by manually typing them in. Writing Jinja2 code will automatically convert the code into a dynamic variable component. For example, you can manually write:

{{ test.sample.order.customer_account.customer_name }}

This will convert the Jinja2 statement to a dynamic variable component in the editor. This also works with if statements:

{% if test.results %}{{ test.result }}{% endif %}

Manually Override CSS Styles

If you are well-versed in the world of CSS, you can inspect the source code using Tools -> Source Code and type in your own CSS styles. You can even give HTML elements an ID or class to reference using CSS selectors. Here is an example of how to insert a watermark (note: you must insert the image using the editor first, then update the <img> tag to have the id #reportWaterMark):

<style>
    #reportWaterMark {
        opacity: 0.5;
        position: fixed;
        top: -1in;
        left: -1in;
        z-index: -9999;
    }
</style>
<div><img id="reportWaterMark" src="blob:https://demo-uat.qbench.net/1968ec99-724b-4be6-bd42-9f6c5ab1eda4" alt="" width="1874" height="753"></div>