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 Nunjucks is a templating language that's powered by JavaScript. It's a way of extending HTML to add logic, loops, and various other capabilities. is a Javascript JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . fields, enter initStart.
3. Set the Trigger Type Deteremines how the component triggers. to New Submission 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..
4. To the right of Inputs & Outputs, click Edit.
5. Complete the Outputs table Enter outputs components and actions you want the component to perform. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 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. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 Enter inputs components and actions you want the component to perform. 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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 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..

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter gridView.
3. In the Canvas Label Text 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 . field, enter View Grid.
4. To the right of Inputs, Display & Outputs, click Edit.
5. Complete the Inputs table Enter inputs components and actions you want the component to perform. as follows:

 

Source

Required

1

pluginGetSubmissions

Checked Box Icon (checked)
6. Complete the Outputs table Enter outputs components and actions you want the component to perform. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . fields, enter ruleButtons.
3. To the right of Inputs & Outputs, click Edit.
4. Configure the Inputs table Enter inputs components and actions you want the component to perform. 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)

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 Enter outputs components and actions you want the component to perform. 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.

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.

IMPORTANT  Once created, you cannot change this name.

5. Under Direction of Transform, select Inline image displaying a selected radio button. Output.
6. Under Type of Transform, select Inline image displaying a selected radio button. 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.

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>

                        
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 component stores the URL where Unqork hosts your generated PDF.

1. Drag and drop a iconHidden component onto your canvas, placing it below the panelDashboard Panel component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . fields, enter pdfUrl.
3. Click Save Component.

Configure the Plug-In Component

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

1. Drag and drop a Plug-In component onto your canvas, placing it below your pdfUrl iconHidden component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 Enter inputs components and actions you want the component to perform., 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. 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 Enter outputs components and actions you want the component to perform. 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 iconHidden component .

8. Click Save Component.

Configure the Button Component

Next, create a button for your dashboard. When an end-user 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. clicks this button, it triggers the create PDF process.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it above your panelDashboard Panel component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnGeneratePdf.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 iconHidden component.

1. Drag and drop a Decisions Component icon Decisions component onto the canvas, placing it below your pluginGeneratePDF Plug-In component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 ., enter ruleOpenPdf.
3. Set the Trigger Type to Watch.
4. To the right of Inputs & Outputs, click Edit.
5. Complete the Inputs table Enter inputs components and actions you want the component to perform. as follows:

 

Source

Alias

Type

1

pdfURL

 

exact
6. Complete the Outputs table Enter outputs components and actions you want the component to perform. 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:

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.

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 Nunjucks is a templating language that's powered by JavaScript. It's a way of extending HTML to add logic, loops, and various other capabilities. is a Javascript JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. 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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter panelDashboard.
3. Click Save & Close.

Configure the Initializer Component

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

1. Drag and drop an Radio Button component icon Initializer component onto your canvas. Place your Initializer inside the Panel.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . fields, enter initStart.
3. Set the Trigger Type Deteremines how the component triggers. as New Submission 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..
4. In the Outputs table Enter outputs components and actions you want the component to perform., set the following:

 

Property ID

Type

Value

1

pluginGetSubmissions

trigger

GO

Static image of the initStart Initializer component's configuration.

5. Click Save & Close.

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 pull 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 onto your canvas. Place your Hidden component below the Initializer.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 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 iconHidden component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . fields, enter plugGetSubmissions.
3. From the Internal Services drop-down, select List Submissions for Dashboard.
4. In the Inputs table Enter inputs components and actions you want the component to perform., enter the following:

 

Property ID

Mapping

1

moduleId

moduleId

2

'firstName,middleName,lastName,email,dateOfBirth'

fields

3

'investmentAmount,transferringBank'

fields

Static image of the plugGetSubmissions Plug-In component's configuration.

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 iconHidden component onto your canvas. Place your Hidden component below your plugGetSubmissions Plug-In.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 Dropdown Component Icon ViewGrid component onto the canvas. Place your ViewGrid below the submissionId iconHidden 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 Enter inputs components and actions you want the component to perform. as follows:

ID

Required

pluginGetSubmissions

Yes (selected)
6. Configure the Outputs table Enter outputs components and actions you want the component to perform. 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

Static image of the gridView View Grid component's configuration.

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 icon Decisions component onto the canvas. Place it below your submissionId Dropdown Component Icon ViewGrid component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . fields, enter ruleButtons.
3. Configure the Inputs table Enter inputs components and actions you want the component to perform. 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 Enter outputs components and actions you want the component to perform. 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)

Static image of the ruleButtons Decisions component's configuration.

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 (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 iconHidden component onto your canvas. Place your Hidden component below the panelDashboard Panel.
3. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 Enter inputs components and actions you want the component to perform., 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. 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 Enter outputs components and actions you want the component to perform. 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.

Static image displaying the pluginGeneratePdf Plug-In component's configuration.

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 Icon Button component onto your canvas. Place it at the top of your module, above your panelDashboard Panel.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnGeneratePdf.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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.

Static image displaying the btnGeneratePdf Button component's configuration.

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

1. Drag and drop a Decisions Component icon Decisions component onto the canvas. Place it below your pluginGeneratePDF Plug-In component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 ., enter ruleOpenPdf.
3. Set the Trigger Type to Watch.
4. Configure the Inputs table Enter inputs components and actions you want the component to perform. as follows:

Property ID

Type

pdfURL

exact
5. Configure the Outputs table Enter outputs components and actions you want the component to perform. as follows:

Property ID

Type

pdfURL

pageOpen
6. Configure the Micro Decisions table as follows:

pdfURL

pdfURL_pageOpen

 

=pdfUrl

Static image displaying the ruleOpenPdf Decisions component's configuration.

7. Click Save.
8.  Save   your module.

 

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 Module Builder.

Resource