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

Overview

Sometimes, you might want to take a snapshot of a dashboard or reference it outside of Unqork. Exporting your dashboard to a PDF (Portable Document Format) file is a simple solution. In Unqork, you can do that with a transform.

Transforms are a way to format data coming out of Unqork and export it to a specific file type. In this How-to Guide, you use a Nunjucks PDF transform. Nunjucks is a Javascript templating language. The transform script you use maps to the Nunjucks PDF template. You can export your ViewGrid dashboard to a PDF file using the transform. You also create and configure a button that generates and opens the PDF file when clicked.

This How-to Guide includes steps to build a dashboard with an action button. The dashboard pulls submissions from an existing module.

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

Here's how your PDF looks once created:

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

What You’ll Learn

In this How-to Guide, 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.

What You Need

To preconfigure your dashboard, you need:

  • 1 Panel component

  • 1 Initializer component

  • 2 Hidden components

  • 1 Plug-In component

  • 1 Decisions component

  • 1 ViewGrid component

To configure the generate PDF functionality, you need:

  • 1 Hidden component

  • 1 Plug-In component

  • 1 Button component

  • 1 Decisions component

You'll also use a transform in this configuration. You set up the transform on the Module Builder's Transforms page.

Preconfiguration

Configure the Panel Component

This Panel 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 Name field, enter panelDashboard.
3. Click Save.

Configure the Initializer Component

This Initializer component triggers the Plug-In components that you set up later.

1. Drag and drop an Initializer component onto your canvas. Place your Initializer inside the Panel.
2. In the Property ID and Canvas Label Text fields, enter initStart.
3. Select New Submission as the Trigger Type.
4. Configure the Outputs table as follows:
Property ID Type Value

pluginGetSubmissions

trigger

GO

5. Click Save.

Configure the First Hidden Component

This is the first of 2 Hidden 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 Hidden 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.

Configure the Plug-In Component

This Plug-In 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 Hidden component.
2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions.
3. From the Internal Services drop-down, select List Submissions for Dashboard. /fbu/uapi/system/GetSubmissions displays in the Data Source URL field.
4. Configure the Inputs table as follows:

Property ID

Mapping

moduleId

moduleId

'firstName,middleName,lastName,email,dateOfBirth'

fields

'investmentAmount,transferringBank'

fields

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 Hidden component onto your canvas. Place your Hidden component below your Plug-In.
2. In the Property ID and Canvas Label Text fields, enter submissionId.
3. Click Save.

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 Hidden 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

8. Click Save.

Configure the Decisions Component

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

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

6. Click Save.

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 (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.

Copy
<!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 Hidden component onto your canvas. Place your Hidden component below the panelDashboard Panel.
3. In the Property ID and Canvas Label Text fields, enter pdfUrl.
4. Click Save.

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. Select Post as the Request Type.
5. Configure the Inputs table, as follows:

ID

Mapping

'PDF'

transformName

'labgeneratepdffromdashboard'

formName

_getData

data

NOTE  The first row references the name of your transform. The second row is the Module Path 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. Its Module Path, found by clicking More + next to its title, is labgeneratepdffromdashboard. 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.

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 Panel.
2. In the Property ID field, enter btnGeneratePdf.
3. In the Label Text field, enter Generate PDF.
4. Select Event as the Action Type.
5. In the Event ID field, enter btnGeneratePdf.
6. In the Trigger on Click field, enter pluginGeneratePdf.

7. Click Save.

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 Hidden component.

1. Drag and drop a Decisions component onto the canvas. Place it below your pluginGeneratePDF Plug-In component.
2. In the Property ID and Canvas Label Text, enter ruleOpenPdf.
3. Select Watch as the Trigger Type.
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

7. Click Save.
8. Save your module.

Resources