Creating and Defining a PDF

Article Overview

This article describes different methods for creating a new PDF defining its fields and connecting them to the Model. The article also details an example of a PDF output, an explanation of how to connect PDF pages to the Model, and a description of how to deal with malfunctions when trying to perform the actions described in this article and their solutions.

Creating a PDF Form

(See Figure 1 and Figure 2)

To create a PDF form using the + Create New button, perform the following steps:

Figure 1: + Create New Button

1. Click the + Create New button (1).

Result:

The Create new PDF file window appears:

Figure 2: Create a Pdf Window

2. Enter a Pdf Name (2).

3. Click the Ok button (3).

Result:

The PDF form is created.

Adding PDF Pages

(See Figure 3 and Figure 4)

To add new PDF pages, perform the following steps:

Figure 3: + Add Pages Button

1. Click the + Add Pages button (1).
2. Select a PDF file.

Result:

The PDF file is added:

Figure 4: Added PDF File

Defining PDF Fields and Connecting them to the Model

The added PDF pages are based on the structure of the Webflow you created using components. The pages display outputs of information that was input by the digital process end-users. Because of that, fields must be defined and connected to the Model the same way Webflow components are connected to the Model. The connection of the fields to the Model is done by marking and defining them using different field types from the Tools section and configuring the properties.

Field Properties 

The different fields in the Tools section are used to define the PDF fields. Each field type has its own field properties.

Text Field Properties 

Figure 5 and Table 1 describe the Text Field Properties:

Figure 5: Text Field Properties

Table 1: Text Field Properties

Text Label Field Properties 

Figure 6 and Table 2 describe the Text Label Field Properties:

Figure 6: Text Label Field Properties

Table 2: Text Label Field Properties

Title Field Properties 

Figure 7 and Table 3 describe the Title Field Properties:

Figure 7: Title Field Properties

Table 3: Title Field Properties

Image Field Properties 

Figure 8 and Table 4 describe the Image Field Properties:

Figure 8: Image Field Properties

Table 4: Image Field Properties

O Mark Field Properties 

Figure 9 and Table 5 describe the O Mark Field Properties:

Figure 9: O Mark Field Properties

Table 5: O Mark Field Properties

Group Value Property

After marking the desired PDF fields with the O Mark field type (1) it must be connected to the Model, to the appropriate string type transaction data item (2). Once the connection is done, an additional property, the Group Value (3) appears (see Figure 10):

Figure 10: Group Value Property 1 of 3

The Group Value property is set (4) with one of the Radio Questions options Values (5) that were set using the Properties section of the component (see Figure 11):

Figure 11: Group Value Property 2 of 3

When the user selects the radio question option through the digital process, the O Mark field type circles the option (6) on top of the PDF form (see Figure 12):

Figure 12: Group Value Property 3 of 3

X Mark Field Properties 

Figure 13 and Table 6 describe the X Mark Field Properties:

Figure 13: X Mark Field Properties

Table 6: X Mark Field Properties

Bool Value Property

After marking the desired PDF fields with the X Mark field type (1) it must be connected to the Model, to the appropriate boolean type transaction data item (2). Once the connection is done, an additional property, the Bool Value (3) appears. The Bool Value property is set to a true value (checked) by default (4) (see Figure 14):

Figure 14: Bool Value Property 1 of 2

When a checkbox is checked by the user through the digital process and as a result returns a true value, the X Mark field type marks the checkbox with an X (5) on top of the PDF form (see Figure 15):

Figure 15: Bool Value Property 2 of 2

Signature Field Properties 

Figure 16 and Table 7 describe the Signature Field Properties:

Figure 16: Signature Field Properties

Table 7: Signature Field Properties

How to Define and Connect PDF Fields

(See Figure 17 to Figure 22)

To define new PDF fields, perform the following steps:

Figure 17: Tools Section and Marking

1. Click the desired field from the Tools section (1).

2. Using the left click of the mouse, mark the desired PDF fields (3) with the Text field type.

Result:

The field is defined as text (4):

Figure 18: Defined field - text

3. Click the field (4).

Result:

The Properties (5) section displays the Field Properties (6):

Figure 19: Defined field - Text

4. Configure the field properties, as necessary.
5. Connect the field to the Model:
   1. Click the icon (7).

Result:

The Model main screen is displayed:

Figure 20: Model Main Screen

2. 2. Click the appropriate transaction data item (8).
   3. Click the OK button (9).

Result:

The PDF screen is displayed:

Figure 21: PDF Screen

6. Click the Text field (10).

Result:

The Properties (11) section displays the Field Properties (12) with the connection to the Model (13):

Figure 22: Connection to the Model

PDF Output Example 

Figure 23 displays the structure of the Webflow. Three Main Page components, the first two contain Containers, Grids, and Text Input components that the end user will use to input information. The third Main Page contains the Preview component that will display the PDF with the output:

Figure 23: Webflow

The Preview component must be connected to the PDF form (see Figure 24 to Figure 27):

1. Click the Preview component

Result:

The Properties section appears:

Figure 24: Properties Section

2. Click the pencil (1).

Result:

The + Add button appears:

Figure 25: The + Add Button

3. Click the +Add button (2).

Result:

The Form dropdown appears:

Figure 26: The + Add Button

4. Click the Form dropdown (3).

Result:

A list of available forms (4) appears:

Figure 27: Forms

5. Select the desired form.
6. Click the Ok button (5).

Result:

The form is attached to the Preview component.

Figure 28 and Figure 29 display the digital process in which the end user inputs the information:

Figure 28: Digital Process Page 1

Figure 29: Digital Process Page 2

Figure 30 displays the PDF with the output:

Figure 30: PDF with Output

Connecting PDF Pages to the Model

When a Webflow is implemented with Model conditioning, the output of the conditioning must also be reflected on the PDF as well. For example, a Webflow is built with three Main Page components. The first Main Page contains Text Input components for customer details and a Radio Question component with a yes or no question. The visibility of the second Main Page depends on the answer to the Radio Question. If yes, the second Main Page will be displayed and then the Third Main Page, and if no, the second Main Page will be skipped (see Figure 31):

Figure 31: Webflow

To enforce the logic, the transaction data item (1) connected to the second Main Page must be implemented with conditioning (2) (see Figure 32):

Figure 32: Model

The same conditioning must also be reflected on the PDF. The form attached to the Preview components contains two pages. The first page (1) for the customer details and second page (2) for the partner details (see Figure 33):

Figure 33: PDF Pages

The second page must also be connected to the Model so that the condition that was implemented on the second Main Page component will be implemented on it as well (see Figure 34 to Figure 37):

Figure 34: PDF Second Page

1. Check the second page (2/2) checkbox (1).

Result:

The Page Properties appear (2):

Figure 35: Page Properties

2. Connect the page to the Model:
   1. Click the icon (3).

Result:

The Model main screen appears:

Figure 36: Model

1. 2. Click the appropriate transaction data item (4).
   3. Click the OK button (5).

Result:

The PDF main screen is displayed with the second page connected to the Model:

Figure 37: Page Properties Connected to the Model

Figure 38 displays the digital process in which the end user inputs the information. If the answer to the radio question (1) is Yes, then the second page will be displayed, and the user will input the information for the partner:

Figure 38: Digital Process Page 1

The same conditioning logic is also applied on the PDF. If the answer was Yes, then two pages are displayed with information (see Figure 39):

Figure 39: PDF with Two Pages Output

If the answer was No, only one page is displayed with information (see Figure 40):

Figure 40: PDF with One Page Output

Troubleshooting

Table 7 describes malfunctions that may occur when trying to create new PDFs, define new PDF fields and connect them and the PDF pages to the Model. The table also describes the reason/s for the malfunctions and provides possible solutions.

Table 7: Troubleshooting

How to Videos

To quickly learn about the structure of the PDF screen and about its features, watch the following videos.

• Creating a PDF:

• PDF Screen Overview:

• Vertical/Horizontal Slicer:

• Select:

• Text Output:

• Signature Output:

• Image Output:

• X Mark Output:

• O Mark Output: