Question 1

How to use the editor?

Accepted Answer

| Please visit the Components section to get more in-details information about functionality of each component.

Introduction

${frame}Introduction

Text

${frame}Padding example

${frame}Editable PDF fields

Expanded text editor

It is possible to expand the editable area for Text component, so you can easily edit large text content. You can expand the text editor from the component's context menu or from the Formatting tab.

${frame}[Radio Component](https

Question 2

Functions

Accepted Answer

Number functions

The Text component must have the Format set to Number.

Format number

Format a number with grouped thousands and optionally decimal digits. {% number_format([float number], [decimal_places], [decimal_separator], [thousands_separator]) %}

Round

Round the float number based on the precision from the second parameter. {% round([float number], [integer precision]) %}

Ceil

Rounds to the nearest integer up. E.g. 2.1 => 3. {% ceil ([float number]) %}

Floor

Rounds to the nearest integer down. E.g. 2.8 => 2. {% floor ([float number]) %}

Pow

Number in power of. {% pow([float base value], [integer|float power of]) %}

Sqrt

Square root of a number. {% sqrt ([float base value])%}

String functions

Uppercase

To display data field value in uppercase, use following expression. {% uppercase({dataFieldName}) %}

Lowercase

To display data field value in lowercase, use following expression. {% lowercase({dataFieldName}) %}

Capitalize

Uppercase the first character of each word in a string. {% capitalize({dataFieldName}) %}

Split

The split(delimiter, string) function allows to split string into an array. {% split("_", "Some_string") %} => ["Some", "string"]

Replace

The str_replace([string: search], [string: replace], [string: the original string]) function replaces all occurrences of a substring within a string. ```{%

Question 3

Table Component

Accepted Answer

The Table Component allows to iterate over list of data (arrays, lists etc) and it is also possible to filter, sort and group the data. Each table column is a Text Component and provides exactly the same formatting options.

In the editor view, the Table Component only displays a single data row. The first row acts as a header and the second row is used as a template to render each row in the data set. All other rows are treated as summary rows and rendered after the data rows.

${frame}Table Component Tutorial

Expression Language Usage

JSON Code Used [ { "id": 105, "email": "tes@pdfgeneratorapi.com", "order_number": 105, "date_us": "16/09/2019", "date": "16.09.2019", "line_items": [ { "name": "Item number 1", "price": "4,080.00", "total": "8,160.00", "quantity": 2 }, { "name": "Item number 2", "price": "2,060.00", "total": "2,060.00", "quantity": 1 } ] } ]

For more information about Grouping option, please, see this article.

Question 4

How to integrate with Wix Velo?

Accepted Answer

Introduction

Wix Velo is a full-stack development platform that empowers you to build, manage and deploy professional web apps rapidly. You can use PDF Generator API to quickly generate PDF documents using the data you already have in your Velo site (e.g. store orders, database records etc.). You can find the example integration built with Velo and PDF Generator API here.

Setup

To set up the integration, you either need an existing Velo project, or you would need to create a new one here. You also need a PDF Generator API account. If you don't have one, you can create a free Sandbox Account. You can use the free Sandbox Account for 3 months to evaluate and integrate the API. The Sandbox Account allows you to make 2500 merges per month.

| The monthly usage (merges) is calculated based on the number of document generation requests multiplied by the number of unique datasets in the request. Read more

Use Velo's Secrets Manager to save the API key and secret

Velo's [Secrets Manager](https://support.wix.com/en/article/ve

Question 5

Supported operators

Accepted Answer

Arithmetic Operators

+ (Addition)

{% 2 + 3 %} >> 5

- (Subtraction)

{% 7 – 4 %} >> 3

* (Multiplication)

{% 2 * 3 %} >> 6

/ (Division)

{% 9 / 3 %} >> 3

% (Modulus)

{% 10 % 3 %} >> 1

** (Pow)

{% 5 ** 2 %} >> 25

Logical Operators

! (not)

{% !true ? "true": "false" %} >> false

&& (And)

{% true && false ? "true": "false" %} >> false

|| (Or)

{% true || false ? "true": "false" %} >> true

Bitwise Operators

& (And)

{% 5 & 3 %} >> 1

| (Or)

{% 5 | 3 %} >> 7

^ (Xor)

{% 5 ^ 3 %} >> 6

|| The Bitwise operators are used to perform bit-level operations on the operands. The operators are first converted to bit-level and then calculated.

Comparison Operators

== (Equal)

{% 22 == '22' %} >> True

=== (Identical)

{% 22 === '22' %} >> False

!= (Not equal)

{% 22 != '22' %} >> True

!== (Not identical)

{% 22 !== '22' %} >> True

|| The difference between equal (==) and identical (===) is that '==' should be used to check if the values of the two operands are equal or not. On the other hand, '===' checks the values as well as the type of operands.

< (Less than)

{% 5 < 8 %} >> True

> (Greater than)

{% 6 > 6 %} >> False

<= (Less than or equal to)

{% 4 <= 7 %} >> True

>= (Greater than or equal to)

{% 6 >= 6 %} >> True

#

Question 6

Container Component

Accepted Answer

The "Container" component allows to group other components. It is also possible to iterate arrays if the Data Field is set. In that case, the "Container" is used as a template to render each row in the data set.

| It is possible to nest multiple "Container" components. For more information, see this article. | Grouping, filtering, sorting option is the same for the container as for the table.

${frame}Container component overview

```[ { "lineitems": [ { "name": "Singing Bowl Carved With Brick-Red Highlights And Striking Tool", "vendor": "Utility Handicrafts", "image1": "https://cdn.shopify.com/s/files/1/0257/9571/products/FBM2MA2208233032b-61a1-4083-8dac-eecc704f4466.jpeg?v=1403526067", "productid": "333813489" }, { "name": "Onyx Chess Squares Long Box", "vendor": "Home Decor Accessories", "image1": "https://cdn.shopify.com/s/files/1/0257/9571/products/FBK203628e8a94b1-014c-4e15-b16f-938da6f0a23d.jpeg?v=1403526097", "productid": "333813141" }, { "name": "Ganesh Statue, Lying On Cobra", "vendor": "Statues And Sculptures", "image_1": "https://cdn.shopify

Frequently Read Articles

Browse All Categories