Elements

The different available elements to drop into your template are both based in standard HTML elements and custom Wattyo Elements. In this chapter we will explain each of them.

General

Text

Shows the desired rich text on the document.

Heading

Shows a heading text. You can achieve the same with the Text element but this way it’s the best practice.

Link

Shows a link to any page.

Image

Shows an image by specifying the image url.

Note: In a future version an image picker will be added.

Field

Shows a specific field value. Right now, it’s the same as adding the {{field}} to a text element.

Tables

Table

An fixed size table. You can select the number of heading, columns and rows.

When you select a table cell you will be able to specify a custom column span (default 1), which allows to set the cell width to more than one column width.

Dynamic Table

The Dynamic table is a special Table that has not a predefined number of rows as it depends on the number of elements for the specified configuration.

This component is based in the Wattyo Loop Framework. so it’s import to understand how it works before using this component.

The options are:

• Loop Name: an unique loop identifier for the current template-
• Collection: the relationship API name. i.e. Contacts
• Filter: a valid SOQL Filter i.e. Name != null
• Group by Field: the group by clause if desired. i.e. AccountType
• Order by: A valid SOQL Order by Clause: i.e. Name ASC
• Aggregates: see aggregates documentation.

Dynamic Table Loop

They are used to added nested loops inside dynamic tables. The different with the table is that you must set the Parent Loop Name in the specified field.

Layout

Flex Container

It’s a basic html container that uses the Flex css system. This is not supported for the Standalone composer engine.

You can drop any number of elements (and other child Flex Containers) in order to arrange the elements as you prefer.

Page

Adds a new page to de the document.

Vertical Divider

Add a vertical spacing. You can set the desired height. Also in case you need it you can also change the colors, borders, etc in the styling tab.

Control Blocks

Loop

Define a loop which will render its content with each of the records of the specified collection.

This component is based in the Wattyo Loop Framework. so it’s import to understand how it works before using this component.

Grid System

The Grid System is an universal css system to defines layouts in the way of a grid. This is the only advanced layout utility for the Standalone engine.

The grid system basically acts as a grid / table, where you can add as many Grid Rows as you desire, and inside each row add the Grid Cells you consider.

This Grid system allows to create flexible Columns and Rows layouts for your documents.

Lists

List and List Items

The List Element is a Static List where you can add child List Items. You can customise the list appearance in the settings.

Headers and Footers

Header

Adds a header to the document which has three columns where you can set whatever you need to show in the header.

It’s important to remark that the header is a standard CSS feature and it has some format limitations. For instance, you can only have three columns with the same size.

However it allows to cover all the usual scenarios: Logo, Document Title, etc.

Footer

Same as the header.

Page # and Page Count

They show the Page Number or Page Count