# Creating and Using Report Templates

## Overview

{% hint style="info" %}

* Report template is used to generated PDF reports using data from an order. This feature is useful to generate end of order report for auditing, or even to generate a certificate of analysis.
* When generating a PDF report we can incorporate any data from activities that were submitted, including pictures, and we have the ability to format the report to our liking.
* The process of creating a report template is split into two steps.
  * First we filter the data that is relevant to this report, which activities are to be read and displayed and which order attribute should be listed.
  * Then we work on a HTML template. This HTML Template is what allows you to format the final PDF the way you need, adding your company logo, fonts and colours.

This guide details the process for creating and managing report templates within our system, focusing on producing PDF reports through various configurations and customisations.
{% endhint %}

## Accessing and Creating a Report Template

Navigate to ***Settings > Configuration > Report Template*** to go to the configuration page.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-5b49025f80d214eef6df98638e643fae037877aa%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Creating a Report Template

Click on the **Create** button, then you should be presented with a modal with three fields like the image below.

<table><thead><tr><th width="209">Name</th><th>Desc</th></tr></thead><tbody><tr><td>Name</td><td>Name of the Report Template</td></tr><tr><td>Description</td><td>Description of the template</td></tr><tr><td>Data type</td><td>The type of the report</td></tr></tbody></table>

For this example, we will make a **Order Report** of type **ORDER.** After filling out the details, click on **Save and Open**.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-11b171701e2b1bd5b1d9f518200588db6ffa9707%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

You should then presented with this template configuration page. Have a read through the table with the fields explanation and then proceed to the example walkthrough

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-08344d392e1aa8adbe8a61ffc040ee32af3f896c%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="209">Name</th><th>Desc</th></tr></thead><tbody><tr><td>Name*</td><td>The name of the report</td></tr><tr><td>Description</td><td>Description of the Report</td></tr><tr><td>Data type*</td><td>ORDER or EVENT or ACTIVITY</td></tr><tr><td>Asset Classes</td><td>The option to choose what Asset classes will be included in the report.</td></tr><tr><td>HTML Template</td><td>Choose to create a new HTML template or an existing one (if there is one). This will be our main area of configuration.</td></tr><tr><td>Include Attributes</td><td>The option to choose which attributes will be included in the report.</td></tr><tr><td>Include Activities</td><td>The option to choose which activities will be included in the report.</td></tr><tr><td>Include Operations</td><td>The option to choose which order template operations, will be included in the report.<br><strong>Note:</strong> this must be written in a comma separated list.</td></tr><tr><td>Include Images</td><td>The checkbox option to include images in your report.</td></tr></tbody></table>

Here I will choose to create a new HTML template and name it "Order Report".

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-c22710ecea0536ea223f1842039c0c72f636cf47%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

Then I chose the other configurations like below. It depends on what you want included in the report yourself. After that we can start editing our HTML below.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-1beaee8d70bea8c81653461110017fbdf654abf7%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Creating your HTML Template

Utilize the HTML editor to begin designing your report. This is where you can format and lay out your report. We use a templating engine called [Mustache](https://mustache.github.io/mustache.5.html), which allows dynamic data insertion using curly braces, e.g., `{{order.order_number}}`.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-d7449f67d0e14158d581e00c3cd0e29a8daaab3a%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

To make the editing process easier, you can simulate the form with an actual order by **scrolling down to the bottom of the page and click "Select and Order".**

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-8a329351b485ea6f9f6f61db8febf4dc86e2da60%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Referencing Activity Items' values

For referencing activity items' values, you need to reference it like this

```handlebars
<td>
  {{#if this.stringValue}}
    {{this.stringValue}}
  {{else if this.numericValue}}
    {{this.numericValue}}
  {{else if this.booleanValue}}
    {{this.booleanValue}}
  {{else}}
    {{this.value}}
  {{/if}}
</td>
```

Referencing with only this.value will displays the item's raw value, which might not be nicely formatted.
{% endhint %}

Then you will be presented with three views.

* The **Preview HTML** view shows you what the HTML you have on the editor will render in one scroll in the page.
* The **Preview PDF** will render a PDF file that is formatted with your HTML and this file can be saved and viewed in pages.
* The **Order Data** will show you what data is available based on not just the chosen preview order but also the data from all the assets, attributes and activities that you had chosen before. This can be utilized to figure out how to write your data insertion.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-af8c1647044341777f6bb785d0254d07fef6468f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Creating an Order Report

Now after creating your template, go back to the Homepage, then click on **Orders**. Choose any Order then click on **Details**. Next to the name there is a little button with a printer icon.

Here if you have more than one templates, more than one will pop up, but **"Order Template"** is the one we just made.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-5bd451bd0aaea9da6998ca4572dd25a137b6d093%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

Afterwards, a dialogue will pop up like below that will let you download the report.

<figure><img src="https://352909507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrNT40XJFAFlAhUX8CcQS%2Fuploads%2Fgit-blob-7236cc9b9a5df4d0d614481beffe01cd8b882f7a%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>
