1. Introduction
CraftMyPDF template editor is an easy-to-use web template editor for designers, developers, or even non-developers to quickly design a PDF template in the form of drag-and-drop.
The PDF template editor consists of a rich set of components for you to build beautiful PDFs with powerful expressions, page breaks, and data bindings.
To learn about the basics of designer, sections, data-binding, page breaks, head over to our Getting Started guide.
In this article, we will cover all the components of the PDF designer.
2. Components
2.1 Label
The label component is used for a multitude of purposes. They are a powerful way of displaying labels, descriptions, summaries, and other text data on your PDF templates. It can be used with expression fields to create dynamic PDF documents.
To create a Label component, drag a Text component and drop it to where you want it to appear.
2.1.1 Properties of a Label component
Text: The text of the Label supports expressions. Hover your mouse cursor on the property, it will display the expressions and JSON fields that you may use for your text.
Font size: The size of the font of the Label element.
Background: Background color of the Label element.
Font: Font family the Label element, use “Select Font” to select a font.
Select Font: Click on the Blue button to choose a font from our font library. We support different languages, remember to select a font that is compatible with the language of your text, or else your generated PDFs will display with square boxes.
Align: the horizontal alignment of the text inside the Label element. Supported alignments: left, right, center, and justified.
Weight: The weight (or boldness) of the font. The weights available depend on the Font that is currently set.
Style: Determine a font that should be styled. The options are normal, italic, or oblique.
Text Orientation: The orientation of the text characters in a line. It only affects the text in vertical mode (when Writing mode is not horizontal-tb). It is useful for controlling the display of languages that use the vertical script, and also for making vertical table headers.
Writing Mode: Determine lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
Padding: Padding of the Label element.
2.1.2 Support of languages for Labels
We support different languages, remember to click on Select Font to select a font from our Font library that is compatible with the language of your text or else your generated PDFs will display with square boxes.
2.2 Image
The image component is used for displaying images. To create an Image component, drag an Image component and drop it to where you want it to appear.
Properties
Object Fit: It determines how the image should be resized to fit its container.
- Contain – The image is scaled to maintain its aspect ratio while fitting within the Image.
- Cover – The image is sized to maintain its aspect ratio while filling the element’s entire Image.
- Fill – The image is sized to fill the Image component.
- Scale-down – The image is sized as if
noneorcontainwere specified, whichever would result in a smaller concrete object size.
Src: The property contains the path to the image you want to embed. It can be used along with expressions to create a dynamic image.
2.3 QRCode
QRCode is a two-dimensional barcode that consists of black squares and is capable of storing data. The QR codes are readable by most modern devices.
To create a QRCode component, drag a QRCode component and drop it to where you want it to appear.
Properties
Content: The information to be encoded into QRCode. It can be used along with expressions to create a dynamic QRCode.
2.4 Barcode
Barcode is a one-dimensional of parallel lines of varying widths and capable of storing data. The bar codes are readable by optical readers.
To create a Barcode component, drag a Barcode component and drop it to where you want it to appear.
Properties
Content: The information to be encoded into QRCode. It can be used along with expressions to create a dynamic QRCode.
Format: Supported standards for the Barcode component.
2.4.1 Supported standards/formats
| Name | Supported barcodes |
| CODE128 | CODE128 (auto and force mode) |
| CODE39 | CODE39 |
| EAN / UPC | EAN-13, EAN-8, EAN-5, EAN-2, UPC (A) |
| ITF | ITF, ITF-14 |
| MSI | MSI, MSI10, MSI11, MSI1010, MSI1110 |
| Pharmacode | Pharmacode |
| Codabar | Codabar |
2.5 HTML component for richtext and tables
The HTML component lets you compose HTML content. It has a built-in rich text editor that allows you to create tables and HTML elements.
To create an HTML component, drag an HTML component and drop it to where you want it to appear.
2.5.1 Editor for HTML content
To open the editor, click on Open HTML Editor. In the top menu of the dialog, you can insert images, tables horizontal lines, and some other HTML elements. The HTML component supports expressions, you can click on the Fields to insert expressions. Combined with an HTML table, you can use it to design a dynamic form.
Click on Confirm and Return once you have done editing.
2.6 Checkbox
Checkbox component is rendered by default as boxes that are checked (ticked) when activated. To create a Checkbox component, drag a Checkbox component and drop it to where you want it to appear.
2.7 Rectangle
The rectangle component lets you draw rectangle shapes. It supports rounded corners and you can select a fill color and border color for the rectangle shape.
2.8 Line
The line component is used to draw vertical or horizontal lines. To create a horizontal line, drag an HTML component and drop it to where you want it to appear.To make a vertical line, select vertical for the Line Orientation. You may also change the Thickness or Color of the Line component.
2.9 Chart
Chart component supports line, area, bar, pie, and donut chart types. To create a Chart component, drag a Chart component and drop it to where you want it to appear.
2.9.1 Extract data from JSON as an array
The property Categories and Data only support a one-dimension array. In order to extract the data from your JSON, you have to use the expression function asArray. The following is an example to extract month and order from an orders array using the asArray expression.
2.10 Section & Subsection
2.10.1 Sections – Header, Normal & Footer
Getting started – Header, Footer & Normal
2.10.2 Data-binding
Getting started – Data-binding
2.10.3 Filtering & sorting for section
Getting started – Data manipulation
