Getting Started with CraftMyPDF’s PDF Designer

1. Introduction

CraftMyPDF offers a web-based drag & drop PDF template editor that lets you design templates and generate pixel-perfect PDF documents from reusable templates. The PDF template editor includes a rich set of layout and components to develop beautiful PDFs with powerful expressions, formatting, page breaks, and data-binding.

Our PDF Generation API allows you to generate PDF documents via REST API. In addition, CraftMyPDF integrates with no-code platform Zapier and Integromat for you to automate the creation of PDF documents in your workflow.

To learn about the visual components such as Text, Image, Chart, and other visual elements, head over to our Guide to Components.

In this article, we will cover the basics of PDF template editor, page breaks, data-binding, preview, and others.

1.1 The workflow for template design and PDF generation

The followings are the 4 simple steps to design PDF templates and generate PDF documents:

Step 1 – Import, manipulate, or view the JSON data available in the Data tab.

It’s important to have your JSON data ready(On the left) before designing the template. It’s because the JSON schema will be used for auto-complete drop-down and the JSON will be used for PDF preview.

The JSON data on the left is a sample, you have to substitute it with your JSON data for the actual PDF generation.

Step 2 – Modify the PDF template in the Designer tab. You may use expressions with the components to create dynamic PDF documents.

An expression is enclosed in {{ syntax }} .To use JSON data in the expressions, {{ data.[field] }}. Replace [field] with the JSON field you want to display

Step 3 – Use the Preview tab to preview PDF or debug the expressions, you may also generate PDF documents here. See the section Preview of PDF for details

Step 4 – The final step is to automate PDF generation with Zapier, Integromat, or REST API. See the Integrations section below.

2. Designer

The Designer tab is a drag-and-drop environment for designing a PDF template. There are three (3) different sections in the PDF designer:

(a) Header Section
(b) Normal Section
(c) Footer Section

2.1 Sections – Header, Footer & Normal

2.2 Data binding

2.2.1 All sections – The JSON data

A special variable data is to access the JSON data. You can use it with expressions.

2.2.2 Data binding for normal sections

(i) If data binding is enabled, the section will be repeated once per record. the Data/Data Source section in the property panel is mandatory and it only accepts an array. You can use an expression to bind it to an array. Additional filtering and ordering can be done for data with an expression, see the section below for filtering and ordering of the rows.
(ii) A special variable row is available for sections that data binding is enabled. To access a field in the row in an expression, use the expression row.field.

(iii) The variable rowIndex is a running index of the current row, it starts from zero.

2.2.3 Variables for header & footer

The expression {{sys.pageNumber}} or {{sys.totalPages}} displays the current page number and total pages.

2.2.4 Complex data with subsections

A subsection component is a component that contains sub-header, sub-footer and sub-normal section. It can be used to iterate the rows in an array. combined with a section, you can iterate a complex hierarchical structured JSON.

With subsection, a special variable parent let you access the parent data.

2.2.5 Data manipulation

2.2.5.1 Filtering array data

Expression:

{{array.filter((var)=> condition)}}

The method filter filters an array according to provided criteria, and it returns a new array containing the items that meet the criteria. Read more at Mozilla

e.g: To filter an array based on the project name Polaris

{{data.items.filter((e)=>e.project=='Polaris')}}

2.2.5.2 Sorting array data

Expression:

{{array.sort((comp1, comp2)=> condition)}}

The method sort reorders an array according to provided criteria, and it returns a new array containing the sorted items. Read more at Mozilla

e.g: To sort an array based on the project names

{{data.items.sort((a,b)=>a.project>b.project?1:-1)}}

Tips:

You can also use our built-in method sort(field,array, direction), find out more on docs: Expressions

2.3 Common issues for data-binding

2.3.1 “Undefined” in generated PDFs

The possible root cause you may encounter are:

(i) Incorrect use of syntax {{data.[field]}} to access JSON data

In most cases, the keyword data is missing. Make sure you use the correct syntax as follows:

{{data.[field]}}

Remember to replace [field] with the JSON field that you want to display

for example, if you want to display a JSON field position, use the following expression

{{ data.position }}

(ii) The field doesn’t exist in the JSON data

Make sure the field you are using is present in the JSON data.

Optionally, you can use our built-in expression isNullOrEmpty, and Javascript’s conditional (ternary) operator to check for a null or empty value, then substitute with a new text. The following is an example to check for the field company_name, if it’s empty then it will display “THIS IS EMPTY”.

{{ isNullOrEmpty(data.company_name) ? “THIS IS EMPTY”: data.company_name }}

2.3.2 Debug for data-binding

To display available JSON data, you can use the following expression:

{{ JSON.stringify(data) }}

It displays the data in JSON

2.4 Expressions

An expression is essentially a javascript syntax enclosed in {{ and }}. The expression is any valid set of variables, operators, and expressions that evaluates to a single value. The value may be a number, a string, an array or a logical value.

The following is a text component that supports expression.

Type of functions

(i) Standard JavaScript libraries – JavaScript standard built-in functions and objects such as Math, String, Array or any standard Javascript methods.

(ii) External libraries – We support Numeral.js and Moment.js out of the box

(iii) CraftMyPDF’s built-in functions – functions for formatting, number and string. You may find them in the designer Docs: Expressions

2.5 Page breaks for sections

Break inside indicates whether or not a page break should occur inside the specified element.

There are 2 types of break inside:

• Auto – (Default) Automatic page breaks (neither forced nor forbidden)
• Avoid – Avoid page breaks inside the element.

Break after – Force page breaks after this section if this is enabled

3. Preview of PDF

Preview tab is used to preview the PDF. It’s important to have your JSON data ready(in Data Tab), the sample JSON data will be used for PDF preview.

There are 2 modes of PDF preview:

Generate PDF

• Use this to generate the actual PDF. It typically takes a few seconds.
• This renders a full PDF and accurately the same PDF that you generate with REST API.
• Generating PDFs with web console costs 0.5 credit.

Preview PDF(in HTML) – Default mode

• Previewing in HTML is auto and fast.
• However, this renders everything in one page without page breaks.
• Use this for debugging expressions or preview the data/layout.

4. Data Tab

Manipulate your JSON data in the Data tab. It’s important to have your JSON data ready(On the left) because the JSON schema will be used for auto-complete drop-down and the JSON will be used for PDF preview. The JSON data on the left is a sample, you have to substitute it with your JSON data for the actual PDF generation.

Click on the “Validate and Format JSON” button to format your JSON data.

There are 2 modes of JSON:

• JSON mode – editable
• Viewer mode – non-editable

5. Settings Tab

This is where you configure the paper format, page margin, etc.

6. Integrations

CraftMyPDF supports integration with Zapier, Integromat, and REST API

6.1 REST API

API Reference

6.2 Zapier

Zapier: How to Create a PDF with Zapier and CraftMyPDF.com

6.3 Integromat

Integromat: Automate PDF Creation with CraftMyPDF