---
title: "How to: Create a PDF of a Dashboard Using a Transform"
slug: "how-to-create-a-pdf-of-a-dashboard-using-a-transform"
updated: 2026-02-27T19:20:14Z
published: 2026-02-27T19:20:14Z
canonical: "docs.unqork.io/how-to-create-a-pdf-of-a-dashboard-using-a-transform"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Create a PDF of a Dashboard Using a Transform

UDesignerClassic Designer

At times, it might be useful to take snapshot of a dashboard, or reference it outside of Unqork. Exporting your dashboard to a PDF file is a simple solution that can be achieved using a transform. Transforms let you format data sent out of Unqork and export it as a specific file type.

In this how-to guide, you'll use a Nunjucks PDF transform. Nunjucks is a JavaScript templating language that you can use to map the dashboard data to a PDF file. Then, you can configure a button to generate and open the PDF file.

### Preconfiguration

#### Configure the Panel Component

This [Panel](/v1/docs/panel-component) component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a **P****anel** component onto your canvas.
2. In the Property ID field, enter **panelDashboard**.
3. Click **Save Component**.

#### Configure the Initializer Component

This [Initializer](/v1/docs/initializer-component) component triggers the Plug-In components that configure in later steps.

1. Drag and drop an **I****nitializer** component inside your **P****anel** component.
2. In the Property ID and Canvas Label Text fields, enter `initStart`.
3. Set the Trigger Type to New Submission.
4. To the right of **Inputs & Outputs**, click Edit.
5. Complete the Outputs table as follows:

|  | **Source** | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginGetSubmissions | trigger | GO |
6. Click **Save Component**.

#### Configure the First Hidden Component

This is the first of two [Hidden](/v1/docs/hidden-component) components in the preconfiguration. It houses the module ID of your source or submission module. You can locate the module ID from the source module’s hyperlink as follows: `https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit.`

1. Drag and drop a **H****idden** component inside the **P****anel** component, placing it below the **I****nitializer** component.
2. In the Property ID and Canvas Label Text fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb482f3c8368d0210c74cbf`. This is the source module's module ID.
4. Click **Save Component**.

#### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) components uses and API to retrieve the submissions so they can be displayed in your dashboard.

1. 1Drag and drop a Plug-In component inside the **P****anel** component, placing it below the **moduleId** **H****idden** component.
2. In the Property ID and Canvas Label Text fields, enter `plugGetSubmissions`.
3. From the **Internal Services** drop-down, select List Submissions for Dashboard.
4. To the right of **Inputs & Outputs**, click Edit.
5. Complete the Inputs table as follows:

|  | **Property ID** | Mapping |
| --- | --- | --- |
| 1 | moduleId | moduleId |
| 2 | 'firstName,middleName,lastName,email,dateOfBirth' | fields |
| 3 | 'investmentAmount,transferringBank' | fields |

> [!NOTE]
> The first row references the module ID stored in the **moduleId** **Hidden** component. The second and third rows determine fields you'll retrieve to display in into the dashboard. For this example, you'll retrieve the firstName, middleName, lastName, email, dateOfBirth, investmentAmount, and transferringBank fields. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork Designer Platform.
6. Click **Save Component**.

#### Configure the Second Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the submission ID.

1. Drag and drop a **H****idden** component inside the **P****anel** component, placing it below your **plugGetSubmissions** Plug-In component.
2. In the Property ID and Canvas Label Text fields, enter `submissionId`.
3. Click **Save Component**.

#### Configure the ViewGrid Component

Next, configure a [ViewGrid](/v1/docs/viewgrid-component) component to display the data in a dashboard in Express View.

1. Drag and drop a **ViewGrid** component inside the **P****anel** component, placing it below your **submissionId** **H****idden** component.
2. In the Property ID field, enter `gridView`.
3. In the Canvas Label Text field, enter `View Grid`.
4. To the right of **Inputs, Display & Outputs**, click Edit.
5. Complete the Inputs table as follows:

|  | **Source** | Required |
| --- | --- | --- |
| 1 | pluginGetSubmissions | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D) (**checked**) |
6. Complete the Outputs table as follows:

|  | **Source** | Mapping |
| --- | --- | --- |
| 1 | submissionId | id |
7. Complete the **Display table** as follows:

|  | ID | Heading | Button |
| --- | --- | --- | --- |
| 1 | firstName | First Name | ☐ (**unchecked**) |
| 2 | lastName | Last Name | ☐ (**unchecked**) |
| 3 | email | Email | ☐ (**unchecked**) |
| 4 | investmentAmount | Investment Amount | ☐ (**unchecked**) |
| 5 | transferringBank | Transferring Bank | ☐ (**unchecked**) |
| 6 | ruleButtons | View | ☐ (**unchecked**) |
8. Navigate to the **ViewGrid** component's **Actions** settings.
9. In the **Action** field, enter `null`.
10. Click **Save Component**.

#### Configure the Decisions Component

This [Decisions](/v1/docs/decisions-component) component provides the trigger for your dashboard's View button.

1. Drag and drop a **D****ecisions** component onto the canvas. Place it below your **submissionId** **ViewGrid** component.
2. In the Property ID and Canvas Label Text fields, enter `ruleButtons`.
3. To the right of **Inputs & Outputs**, click Edit.
4. Configure the Inputs table as follows:

|  | **Source** | Type | Required | Silent |
| --- | --- | --- | --- | --- |
| 1 | buttonClick | exact | ☐ (**unchecked**) | ☐ (**unchecked**) |
| 2 | moduleId | exact | ☐ (**unchecked**) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D) (**checked**) |
| 3 | submissionId | exact | ☐ (**unchecked**) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D) (**checked**) |

> [!NOTE]
> Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input does not have a value in its Micro Decisions column, Unqork sets it to silent. In the next steps, you are not required to add values to the moduleId and submissionId columns. You'll use these inputs in the panelDashboard_pageOpen Micro Decision. So, you'll set these values as silent, or let Unqork do it for you.
5. Complete the Outputs table as follows:

|  | **Source** | Type |
| --- | --- | --- |
| 1 | panelDashboard | pageOpen |
6. Complete the **Conditionals** **table** as follows:

| buttonClick | moduleId | submissionId | panelDashboard_pageOpen |
| --- | --- | --- | --- |
| View |  |  | =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId) |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Dashboards_PDF_ruleButtons_InputsOutputs_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
7. Click **Save Component**.

### Configuration

#### Set Up the Transform

Next, set up the transform that your Plug-In component uses to convert your ViewGrid component content into a PDF. You'll use a Nunjucks (NJK) PDF transform that includes custom CSS styling.

1. To the top right of the Module Builder, click the (**ellipsis**) button.
2. Select **Transforms**. You navigate to the Transforms page.
3. Click **+ Add New Transform**.
4. In the **Transform Name** field, enter `PDF`. You'll use this name to reference your transform in your module.

> [!WARNING]
> Once created, you cannot change this name.
5. Under **Direction of Transform**, select ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-16 124914.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D) **Output**.
6. Under **Type of Transform**, select ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-16 124914.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D) **NJK (PDF)**.
7. In the **Transform** field, copy and paste the following transform:

> [!NOTE]
> Comments on the transform are inside **{# #}** brackets. Text inside these brackets does not affect the transform or display in your PDF. It's there to explain the purpose of each section of the transform.

```xml
<!DOCTYPE html>
<html>
    <style>
    {# This style section sets the appearance of your PDF. You can use custom CSSstyling, or use what's shown. #}
        h1 {
            font-family: arial, sans-serif;
            color: #031a3a;
            }
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td {
            border: 1px solid #FFFFFF;
            text-align: left;
            padding: 8px;
        }
        th {
            border: 1px solid #FFFFFF;
            text-align: left;
            color: #FFFFFF;
            padding: 8px;
            background-color: #33768e;
        }
        tr:nth-child(odd) {
            background-color: #f0f3f7;
        }
    </style>
        <head>
        {# The line below is where you'll set the title that appears on your PDF. In this case, ViewGrid PDF. #}
            <h1>ViewGrid PDF</h1>      
                <div>
                    <table>
                        <tr>
                            {# The section below is where you'll reference your dashboard's headings. They should correspond to the Headings column of your ViewGrid Display table. You can add new headings using the same format. #}
                            <th >First Name</th>
                            <th >Last Name</th>
                            <th >Investment Amount</th>
                            <th >Transferring Bank</th>
                            <th >Email</th>
                        </tr>
                            {# The line below references the data source of your dashboard. In this case, pluginGetSubmissions. This allows you to reference the properties that pluginGetSubmissions pulls in from your source module. #}
                            {% for item in data.pluginGetSubmissions %}
                        <tr >
                            {# The section below is where you'll reference the Property Names of the data in your dashboard. They should correspond to the ID column of your ViewGrid Display table. You can add new Properties using the same format. #}
                            <td>{{ item.firstName }}</td>
                            <td>{{ item.lastName }}</td>
                            <td>{{ item.investmentAmount }}</td>
                            <td>{{ item.transferringBank }}</td>
                            <td>{{ item.email }}</td>
                        </tr>
                            {% endfor %}
                    </table>
                </div>               
</html>
                        
```
8. Click **Save**. Your transform now displays under the **Active Transforms** list.
9. Click **Close** to return to the Module Builder.

#### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the URL where Unqork hosts your generated PDF.

1. Drag and drop a **H****idden** component onto your canvas, placing it below the **panelDashboard** **P****anel** component.
2. In the Property ID and Canvas Label Text fields, enter `pdfUrl`.
3. Click **Save Component**.

#### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component executes your transform and generates your PDF.

1. Drag and drop a Plug-In component onto your canvas, placing it below your **pdfUrl** **H****idden** component.
2. In the Property ID and Canvas Label Text fields, enter `pluginGeneratePdf`.
3. From the **Internal Services** drop-down, select Execute Transform with Input Data. The `/fbu/uapi/transformer` endpoint displays in the **Data Source URL** field.
4. Set the **Request Type** to Post.
5. To the right of **Inputs & Outputs**, click Edit.
6. Complete the Inputs table, as follows:

|  | **Property ID** | Mapping |
| --- | --- | --- |
| 1 | 'PDF' | transformName |
| 2 | '5ebafff17b2213020fc9e897' | moduleId |
| 3 | _getData | data |

> [!NOTE]
> The first row references the name of your transform. The second row is the module ID of the module where you added the transform. In this case, the transform is in the module **Lab: Generate PDF from Dashboard Using Transform**, found here: [https://training.unqork.io/#/form/5ebafff17b2213020fc9e897/edit](https://training.unqork.io/#/form/5ebafff17b2213020fc9e897/edit). The third row passes all of your module's data to the transform. Because your transform only references specific values, it only uses that data. Using _getData avoids needing to enter every Property ID that the transform references.
7. Complete the Outputs table as follows:

|  | **Property ID** | Mapping |
| --- | --- | --- |
| 1 | pdfUrl | pdfUrl |

> [!NOTE]
> This mapping ensures the Plug-In component maps the URL, where Unqork hosts your generated PDF, to the **pdfUrl** **Hidden** component .
8. Click **Save Component**.

#### Configure the Button Component

Next, create a button for your dashboard. When an end-user clicks this button, it triggers the create PDF process.

1. Drag and drop a **Button** component onto your canvas, placing it above your **panelDashboard** **P****anel** component.
2. In the Property ID field, enter `btnGeneratePdf`.
3. In the Label Text field, enter `Generate PDF`.
4. Set the **Action Type** to Event.
5. In the **On Click** field, enter or select pluginGeneratePdf.
6. In the **Click Event** field, enter `btnGeneratePdf`.
7. Click **Save Component**.

#### Configure the Decisions Component

Lastly, you'll set up the rule that opens your generated PDF in a new tab. Your PDF opens as soon as its URL displays in the **pdfUrl** **H****idden** component.

1. Drag and drop a **D****ecisions** component onto the canvas, placing it below your **pluginGeneratePDF** Plug-In component.
2. In the Property ID and Canvas Label Text, enter `ruleOpenPdf`.
3. Set the **Trigger Type** to Watch.
4. To the right of **Inputs & Outputs**, click Edit.
5. Complete the Inputs table as follows:

|  | **Source** | Alias | Type |
| --- | --- | --- | --- |
| 1 | pdfURL |  | exact |
6. Complete the Outputs table as follows:

|  | **Source** | Type |
| --- | --- | --- |
| 1 | pdfURL | pageOpen |
7. Complete the **Conditionals** **table** as follows:

| pdfURL | pdfURL_pageOpen |
| --- | --- |
|  | =pdfUrl |
8. Click **Save Component**.
9. Save your module.

Here’s how your completed dashboard looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_PDF_Express_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

Here's how your PDF looks once created:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_PDF_pdfpreview_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

And here’s how your completed dashboard looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Dashboards_PDF_ModBuild_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

## 

At times, it might be useful to take snapshot of a dashboard, or reference it outside of Unqork. Exporting your dashboard to a PDF file is a simple solution that can be achieved using a transform. Transforms let you format data sent out of Unqork and export it as a specific file type.

In this how-to guide, you'll use a Nunjucks PDF transform. Nunjucks is a JavaScript templating language that you can use to map the dashboard data to a PDF file. Then, you can configure a button to generate and open the PDF file.

In this article, you'll learn how to use a transform to create a PDF version of your dashboard. You'll also learn how to create and configure a button trigger.

### Preconfiguration

#### Configure the Panel Component

This [Panel](/v1/docs/panel-component) acts as a container for the components that follow.

1. In the Module Builder, drag and drop a **P****anel** component onto your canvas.
2. In the Property ID field, enter **panelDashboard**.
3. Click **Save & Close**.

#### Configure the Initializer Component

This [Initializer](/v1/docs/initializer-component) component triggers the Plug-In components that you set up later.

1. Drag and drop an **I****nitializer** component onto your canvas. Place your Initializer inside the Panel.
2. In the Property ID and Canvas Label Text fields, enter `initStart`.
3. Set the Trigger Type as New Submission.
4. In the Outputs table, set the following:

|  | Property ID | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_simpledashboard_04-2_init_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
5. Click **Save & Close**.

#### Configure the First Hidden Component

This is the first of two [Hidden](/v1/docs/hidden-component) components in the preconfiguration. It houses the module ID of your source or submission module. You can pull the module ID from the source module’s hyperlink as follows: https://training.unqork.io/#/form/**5eb482f3c8368d0210c74cbf**/edit.

1. Drag and drop a **H****idden** component onto your canvas. Place your Hidden component below the Initializer.
2. In the Property ID and Canvas Label Text fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb482f3c8368d0210c74cbf`. This is the source module's module ID.
4. Click **Save & Close**.

#### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) connects your module to the outside world. To make this connection, you use an API (application programming interface) call. This Plug-In gets the submissions that display in your dashboard.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the **moduleId** **H****idden** component.
2. In the Property ID and Canvas Label Text fields, enter `plugGetSubmissions`.
3. From the **Internal Services** drop-down, select `List Submissions for Dashboard`.
4. In the Inputs table, enter the following:

|  | Property ID | Mapping |
| --- | --- | --- |
| 1 | moduleId | moduleId |
| 2 | 'firstName,middleName,lastName,email,dateOfBirth' | fields |
| 3 | 'investmentAmount,transferringBank' | fields |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboardPDF_05_plugingetActions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

> [!NOTE]
> The first row references the module ID stored in the moduleId Hidden component. The second and third rows show which fields you're pulling into the dashboard. Here, you pull the firstName, middleName, lastName, email, dateOfBirth, investmentAmount, and transferringBank fields. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork Designer Platform. Add these as shown.
5. Click Save.

#### Configure the Second Hidden Component

This is the last Hidden component in the preconfiguration. This component houses the submission ID.

1. Drag and drop a **H****idden** component onto your canvas. Place your Hidden component below your **plugGetSubmissions** Plug-In.
2. In the Property ID and Canvas Label Text fields, enter `submissionId`.
3. Click **Save & Close**.

#### Configure the ViewGrid Component

Next, bring in a ViewGrid component to display your dashboard.

1. Drag and drop a **ViewGrid** component onto the canvas. Place your ViewGrid below the **submissionId** **H****idden** component.
2. In the **Label** field, enter `View Grid`.
3. In the **Property Name** field, enter `gridView`.
4. In the **Action** field, enter `null`.
5. Configure the Inputs table as follows:

| ID | Required |
| --- | --- |
| pluginGetSubmissions | Yes (selected) |
6. Configure the Outputs table as follows:

| ID | Mapping |
| --- | --- |
| submissionId | id |
7. Configure the **Display table** as follows:

| ID | Heading | Button |
| --- | --- | --- |
| firstName | First Name | Clear |
| lastName | Last Name | Clear |
| email | Email | Clear |
| investmentAmount | Investment Amount | Clear |
| transferringBank | Transferring Bank | Clear |
| ruleButtons | View | Selected |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_KPI_VGFix_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
8. Click Save.

#### Configure the Decisions Component

This Decisions component provides the trigger for your dashboard's View button.

1. Drag and drop a **D****ecisions** component onto the canvas. Place it below your **submissionId** **ViewGrid** component.
2. In the Property ID and Canvas Label Text fields, enter `ruleButtons`.
3. Configure the Inputs table as follows:

| Property ID | Type | Required | Silent |
| --- | --- | --- | --- |
| buttonClick | exact | No (clear) | No (clear) |
| moduleId | exact | No (clear) | Yes (selected) |
| submissionId | exact | No (clear) | Yes (selected) |

> [!NOTE]
> Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input doesn't have a value in its Micro Decisions column, Unqork sets it to silent. In the next steps, you won't add values to the **moduleId** and **submissionId** columns. You only use these inputs in the **panelDashboard_pageOpen** micro decision. So, you can mark these values as silent, or let Unqork do it for you.
4. Configure the Outputs table as follows:

| Property ID | Type |
| --- | --- |
| panelDashboard | pageOpen |
5. In the **Micro Decisions** table, enter the following:

| buttonClick | moduleId | submissionId | panelDashboard_pageOpen |
| --- | --- | --- | --- |
| View |  |  | =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId) |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_simpledashboard_07_decisions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
6. Click **Save & Close**.

### Configuration

#### Set Up the Transform

Next, set up the transform that your Plug-In component uses to turn your ViewGrid content into a PDF. Here, you're using a Nunjucks (NJK) PDF transform. The transform script includes custom CSS styling.

1. Hover over the left sidebar menu of the Module Builder.
2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(64).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D) (**Transforms**) button to open the **Transforms** page.
3. In the **Enter Transform Name** field, enter PDF.
4. In the **Direction of Transform** options, select **Output**.
5. In the **Type of Transform** options, select **NJK (PDF)** .
6. In the **Create New Transform Below** field, copy and paste the following transform:

> [!NOTE]
> Comments on the transform are inside **{# #}** brackets. Text inside these brackets don't affect the transform or display in your PDF. It's there to explain the purpose of each section of the transform.

```xml
<!DOCTYPE html>
<html>
    <style>
    {# This style section sets the appearance of your PDF. You can use custom CSSstyling, or use what's shown. #}
        h1 {
            font-family: arial, sans-serif;
            color: #031a3a;
            }
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td {
            border: 1px solid #FFFFFF;
            text-align: left;
            padding: 8px;
        }
        th {
            border: 1px solid #FFFFFF;
            text-align: left;
            color: #FFFFFF;
            padding: 8px;
            background-color: #33768e;
        }
        tr:nth-child(odd) {
            background-color: #f0f3f7;
        }
    </style>
        <head>
        {# The line below is where you'll set the title that appears on your PDF. In this case, ViewGrid PDF. #}
            <h1>ViewGrid PDF</h1>      
                <div>
                    <table>
                        <tr>
                            {# The section below is where you'll reference your dashboard's headings. They should correspond to the Headings column of your ViewGrid Display table. You can add new headings using the same format. #}
                            <th >First Name</th>
                            <th >Last Name</th>
                            <th >Investment Amount</th>
                            <th >Transferring Bank</th>
                            <th >Email</th>
                        </tr>
                            {# The line below references the data source of your dashboard. In this case, pluginGetSubmissions. This allows you to reference the properties that pluginGetSubmissions pulls in from your source module. #}
                            {% for item in data.pluginGetSubmissions %}
                        <tr >
                            {# The section below is where you'll reference the Property Names of the data in your dashboard. They should correspond to the ID column of your ViewGrid Display table. You can add new Properties using the same format. #}
                            <td>{{ item.firstName }}</td>
                            <td>{{ item.lastName }}</td>
                            <td>{{ item.investmentAmount }}</td>
                            <td>{{ item.transferringBank }}</td>
                            <td>{{ item.email }}</td>
                        </tr>
                            {% endfor %}
                    </table>
                </div>               
</html>
                        
```
7. Click **Add Transform**. Your transform now displays under the **Active Transforms** list.

#### Configure the Hidden Component

This is the third Hidden component in the configuration. It houses the URL where Unqork hosts your generated PDF.

1. Return to the Module Builder.
2. Drag and drop a **H****idden** component onto your canvas. Place your Hidden component below the **panelDashboard** **P****anel**.
3. In the Property ID and Canvas Label Text fields, enter `pdfUrl`.
4. Click **Save & Close**.

#### Configure the Plug-In Component

This Plug-In executes your transform and generates your PDF.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the pdfUrl Hidden component.
2. In the Property ID and Canvas Label Text fields, enter `pluginGeneratePdf`.
3. From the **Internal Services** drop-down, select `Execute Transform with Input Data`. `/fbu/uapi/transformer` displays in the **Data Source URL** field.
4. Set the **Request Type** to Post.
5. Configure the Inputs table, as follows:

| ID | Mapping |
| --- | --- |
| 'PDF' | transformName |
| '5ebafff17b2213020fc9e897' | moduleId |
| _getData | data |

> [!NOTE]
> The first row references the name of your transform. The second row is the Module ID of the module where you added the transform. In this case, the transform is in the module **Lab: Generate PDF from Dashboard Using Transform**, found here: [https://training.unqork.io/#/form/5ebafff17b2213020fc9e897/edit](https://training.unqork.io/#/form/5ebafff17b2213020fc9e897/edit). The third row passes all of your module's data to the transform. Because your transform only references specific values, it only uses that data. Using _getData avoids needing to enter every Property ID that the transform references.
6. Configure the Outputs table as follows:

| Property ID | Mapping |
| --- | --- |
| pdfUrl | pdfUrl |

> [!NOTE]
> This tells the Plug-In to map the URL where Unqork hosts your generated PDF to the Hidden component pdfUrl.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboardPDF_09_pluginPDFactions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
7. Click Save.

#### Configure the Button Component

Next, create a Button for your dashboard. When an end-user clicks this Button, it triggers the create PDF process.

1. Drag and drop a **Button** component onto your canvas. Place it at the top of your module, above your **panelDashboard** **P****anel**.
2. In the Property ID field, enter `btnGeneratePdf`.
3. In the Label Text field, enter `Generate PDF`.
4. Set the **Action Type** to **Event**.
5. In the **On Click** field, enter `pluginGeneratePdf`.
6. In the **Click Event** field, enter `btnGeneratePdf`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboardPDF_11_btnGenerate_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
7. Click **Save & Close**.

#### Configure the Decisions Component

Set up the rule that opens your generated PDF in a new tab. Your PDF opens as soon as its URL displays in the **pdfUrl****H****idden** component.

1. Drag and drop a **D****ecisions** component onto the canvas. Place it below your **pluginGeneratePDF** Plug-In component.
2. In the Property ID and Canvas Label Text, enter `ruleOpenPdf`.
3. Set the **Trigger Type** to Watch.
4. Configure the Inputs table as follows:

| Property ID | Type |
| --- | --- |
| pdfURL | exact |
5. Configure the Outputs table as follows:

| Property ID | Type |
| --- | --- |
| pdfURL | pageOpen |
6. Configure the **Micro Decisions** table as follows:

| pdfURL | pdfURL_pageOpen |
| --- | --- |
|  | =pdfUrl |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboardPDF_12_ruleopenpdf_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)
7. Click **Save**.
8. **Save** your module.

Here’s how your completed dashboard looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_PDF_Express_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

Here's how your PDF looks once created:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_PDF_pdfpreview_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

And here’s how your completed dashboard looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_PDF_Editor_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A22Z&se=2026-11-08T11%3A18%3A22Z&sr=c&sp=r&sig=SHMsSiSgBKpgzd9LM2K308JVe64f4Q8YXb4wGyKbzyo%3D)

## 

## Resource

- [Creating PDFs Using Nunjucks in a Transform (recording)](https://community.unqork.com/creator-live-20/creating-pdfs-using-nunjucks-in-a-transform-9447)
- [Module Transforms](https://docs.unqork.io/Content/A01-ModEditor-General/A01018-ModEditor_Transforms.htm)
- [Testing and Troubleshooting Transforms](/v1/docs/testing-and-troubleshooting-transforms)
- [Generate PDF Nunjucks Snippet](/v1/docs/generate-pdf-nunjucks-snippet)

Nunjucks is a flexible JavaScript templating engine that supports template inheritance, filters, and logic-based expressions for dynamic content rendering.

JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Deteremines how the component triggers.

The component fires when the page or called module loads without an existing submission ID. Dashboards and remote execute modules are great uses for this trigger.

Enter outputs components and actions you want the component to perform.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Enter inputs components and actions you want the component to perform.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.