Question 1

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 } ] } ]

Question 2

Functions

Accepted Answer

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}) %}

Sum

It is possible to calculate sum of table column using following code. {% sum({line_items::amount}) %}

Sumproduct

The sumproduct function multiplies the corresponding items in the arrays and returns the sum of the results. {% sumproduct({line_items::amount},{line_items::price}, {line_items::anotherColumn}) %}

Average

It is possible to calculate average of table column using following code. {% avg({line_items::amount}) %} || Use "Number" formatting when creating calculations or using sum, average, sumproduct functions.

Count

It is possible to count number of items in list. {% count({line_items}) > 3 ? 'More than three' : 'Less than three' %}

Empty

The empty(value) function checks if field has value. {% empty({dataField}) ? 'No value' : 'Field has value' %}

Join

The join(delimiter, array) function concatenates field values with specified separator. Last arguments is always used as the separator. {% join(";", {field1}, {field2}, {field3}, ..., {fieldN}) %} {% join(";", [{field1}, {field2}, {field3}, ..., {fieldN}]) %}

Question 3

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.

| Grouping, filtering, sorting option is the same for the container as for the table.

${frame}Container component overview

Usecases of grouping other components in the "Container" Component

${frame}Image

${frame}Checkbox

${frame}Radio button group

Question 4

Text Component

Accepted Answer

The Text Component allows to display different string values, but also supports Number and Date formatting. This means that every user can easily format values in the editor and you don't need to pre-formatting them on your side.

Date Formatting

When using the T separator in a date format you need to escape it the "T" Y-m-d\THH:mm:ss

Padding

${frame}Add padding for each component

Editable PDF fields

${frame}Editable PDF fields

Question 5

Image Component

Accepted Answer

The "Image" component allows adding images from multiple sources.

You can upload a local file
Specify a static URL
Create dynamic images using data field values (data field value must be an URL or base64 encoded image string).
You may also combine static URLs with data field values.

Image Component

${frame}Usecase of Image Component in the Container

Question 6

Release Notes 2.40.0 (01.07.2019)

Accepted Answer

Improvements

Conditionally hidden components

Until now when a component was hidden using the "Conditional formatting" option, then component was not rendered, but there was still a blank area where the component originally was. We have improved the rendering logic and all components below the hidden component are moved up to remove the blank areas left by hidden components.

Conditional formatting to hide a component

Rendered output with a hidden component

Delete workspaces from Admin panel and via API

It is now possible to delete regular workspaces from the Admin panel and also via API. Please see the Delete workspace API documentation here.

Bug fixes

Fixed the overflow/text wrap issues in HTML output
Fixed the table column vertical-align issues in editor and HTML output
Fixed the table and container grouping, sorting and filtering issue when using a sub data field
Fixed the image automatic page change issue
Fixed checkbox rendering

Frequently Read Articles

Browse All Categories