Introduction #

This is a guide to adding various elements to our document designer layout. This guide will walk you through the process of adding various elements like text, images, parameters, etc. to your layout.

Requirements #

Before you begin, ensure you have the following:

• Access to the document designer. Users with at least Modify permission can access the document designer screen.
• Basic understanding of the Document designer interface. To understand the basic elements available in the document designer, check the detailed article
• The components (text, images, parameters, etc.) you want to add to your pdf.

Getting started with document designer #

Using the user menu’s “document designer” option from the top menu bar, navigate to the document designer screen.

After creating and saving a layout, click on the “Edit template” to start working on the layout.

Adding elements #

You can add different elements, such as tables, text, images, etc., while creating the layout in QBil-Trade’s document designer.

Text element #

Text elements are included in the template when creating the layouts, whether they are dynamic or static. The template’s drag-and-drop component section allows you to add the text element. You can add a text element to the layout editing space by dragging and dropping the text element with the symbol “A.“

Once the text element is added, you can use the parameters to add any kind of dynamic data. Upon clicking on a text element, the editor’s left side becomes active with all of its styling and configuration options.

The text input field allows you to add static text. The parameters can be used to add dynamic data. The three dot button next to the text input field allows you to add parameters to a text element. When creating or editing the layout for a document, all of its generic and dynamic fields are included in the parameters. For instance, all the generic and dynamic fields of the selected sample data will be available as parameters when you are creating the layout for an order-related document, so you can use them in your layout as needed.

If you want to use the translateable textlines in the text element of your layout, you can add them from the parameters section’s Custom Translations.

As seen in the example below, we have included the departure date in the text component of your layout. We have entered “Date” for static data, and the “Departure date” has been chosen from the available parameters.
You can enter the static data in the text input field on the left menu of the layout when the text element is selected.

Using the different styling options, you can further modify the text elements’ font, color, size, alignment, etc. You can visit the Document Designer article for further information on styling and other options.

Image #

You may need to include a number of image elements in your layout, such as signatures, letterheads, and logos. The image element can be used to add these images.

Drag and drop the image element into the layout where you want it. Use the “image file” upload option to upload the file, then modify its size, position, and style to suit your needs.
The image upload must be of the type “.png,” “.jpg,” or “.jpeg.

Table Element #

Table element can be added to the layout to loop on the data of contracts, invoices, orderlines, etc. Tables can be added to the layout from the drag-and-drop section.

You can add the rows and columns to the table as per your requirements. Various other styling and position adjustments to the table, like border color or width, can be done by single clicking on the table. You can also add header and footer elements to the table.

To add data or make styling changes to cells of the table, you can double-click on the cell (component).

You can loop data in a table to display the data for invoices, contracts, or other documents. To loop data into the table, you are required to add a parameter list item as the data source for the table.

It’s also possible to organize your data in the layout with the table element. For instance, if you want to add several labels and the data for these labels, you can easily add the labels and data to a table without having to set the position and layout of each label and the data separately.