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

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

Overview

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 component acts as a container for the components that follow.

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

Configure the Initializer Component

This Initializer component triggers the Plug-In components that configure in later steps.

1. Drag and drop an Radio Button component icon Initializer component inside your Panel 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 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 iconHidden component inside the Panel component, placing it below the Radio Button component icon Initializer 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 components uses and API to retrieve the submissions so they can be displayed in your dashboard.

1. Drag and drop a Plug-In component inside the Panel component, placing it below the moduleId iconHidden 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

The first row references the module ID stored in the moduleId iconHidden 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 component stores the submission ID.

1. Drag and drop a iconHidden component inside the Panel 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 component to display the data in a dashboard in Express View.

1. Drag and drop a Dropdown Component Icon ViewGrid component inside the Panel component, placing it below your submissionId iconHidden 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

Checked Box Icon (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 Dropdown Component Icon ViewGrid component's Actions settings.
9. In the Action field, enter null.
10. Click Save Component.

Configure the Decisions Component

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

1. Drag and drop a Decisions Component icon Decisions component onto the canvas. Place it below your submissionId Dropdown Component Icon 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)

Checked Box Icon (checked)

3

submissionId

exact

☐ (unchecked)

Checked Box Icon (checked)

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)

Static image of the Inputs and Outputs configuration of the ruleButtons Decisions component.

7. Click Save Component.

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

Static image of the completed dashboard configuration in Express View.

Here's how your PDF looks once created:

Static image of the completed PDF output produced by this use case.

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

Static image of the completed use case in the UDesigner Module Builder.

Resource