icon

CraftMyPDF’s Components for PDF Editor

CraftMyPDF
CraftMyPDF

1. Introduction

CraftMyPDF’s PDF 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.

Select Font property

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.

Font library

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 none or contain were 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

NameSupported barcodes
CODE128CODE128 (auto and force mode)
CODE39CODE39
EAN / UPCEAN-13, EAN-8, EAN-5, EAN-2, UPC (A)
ITFITF, ITF-14
MSIMSI, MSI10, MSI11, MSI1010, MSI1110
PharmacodePharmacode
CodabarCodabar

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.

The use of asArray expression

The JSON data

2.10 Section & Subsection

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

2.10.4 Subsection component

Getting started – Complex data with subsections

Table of Contents

Recent Posts
guide
CraftMyPDF

Teams

The teams feature is a shared workspace that allows you to collaborate and get things done in your organization, it’s much easier to share templates with your team.

Read More »
blog
CraftMyPDF

How to create mail merge PDF automatically

In the first part of this tutorial, we will briefly introduce what’s mail merge and the components of mail merge. In the second part, we are going to walk you through the steps to automate the process of mail merging into PDF.

Read More »
blog
CraftMyPDF

How to Make a Barcode in PDF

In this article we talk about what is a barcode, history of barcodes, use-cases, benefits and also how to create barcode in PDF with CraftMyPDF.

Read More »
blog
CraftMyPDF

How to Make a QR Code in PDF

Having QR codes in PDF is a handy thing in your business that can serve multiple purposes. You can share more information about your company or portfolio while sending a PDF proposal. If you wonder how to make a QR code in PDF, we’ve got you covered.

Read More »
guide
CraftMyPDF

CraftMyPDF’s Components for PDF Editor

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. In this article, we will cover all the components in the PDF designer.

Read More »
Copyright ©2022 CraftMyPDF.com

Email us at hello@craftmypdf.com for support