Invoice template layout overview

This section provides a high-level overview of the structure within which you build templates, and key elements that you use to build them. Subsequent sections provide details for the JSON components, schemas, and tokens that you use to construct templates.

All templates can include the following.

• One page element—Does not appear on invoices. Defines the page size and margins, header and footer behavior, and default HTML styles that apply to all elements in the template unless you otherwise define them for specific elements.
• One header element—Defines headers that appear on all pages. Optionally, you can build unique first page headers. Contains components that define the location of content in the headers, content that appears in the headers, and styles that apply them.
• One body element—Contains components that define the location of content in the body of pages, content that appears in the body of invoices, and styles that apply them. The components include cells and horizontal spacers to separate cells (optional).
• Layout components (row, cell)—Define the location of content on invoices. Contains components that define the location of content , content that appears in the body of the invoice, and styles that apply them.
• Elementary components (text, markdown text, page number, field, image)—Appear on invoices. Text and image components define the text, data (through tokens mapped to the database), and images that populate invoices, and their appearance through size, font, and other style settings. They cannot contain components.
• Horizontal spacer and vertical spacer components—Appear as blank space between cells and rows on invoices. Although they define layout, they are not containers so they cannot contain components.
• Table components—Invoice details and tax summary tables display invoice lines, and tax lines.
• One footer element—Defines footers that appear on all pages.

The following image shows the basic default invoice layout, with rows and cells that display elementary components. The text and data noted in the image, such as Bill to and Logo, are examples only. You can create templates that display those elements in different locations, or not at all. You can also add different text, data, and images to the template.

The following summarizes characteristics of the components shown in the image and how they relate to each other:

• Rows (layout components)
  • No components can exist outside a row.
  • Templates can have an unlimited number of rows.
  • Rows are horizontal containers that hold an array of components, including the following:
    • One or more cells.
    • Horizontal spacers to separate cells.
  • Rows cannot contain rows.
• Cells (layout components)
  • Must be contained in a row.
  • There can be an unlimited number of cells in a row (limited only by the page width and the space needed to display the elements within them).
  • When more than one cell is in a row, the cells automatically reside beside each other. They cannot reside above or below each other.
  • Cells can contain an array of the following components:
    • Elementary components, which contain text, images, and tokens to return data from the database, that appear in the PDF invoice, and the style information that dictates their size and format on the page.
    • Rows, which contain layout and data components including cells. You can, for example, nest a cell in a row in a cell in a row.
    • Vertical spacers, which insert space between rows in cells.
  • Cells cannot contain cells.
• Elementary components
  • Define, for example, text, images, and data, and the style information that dictates their size and format on the page.
  • Appear on invoices.
  • Must be contained in cells.
  • Cannot contain other components.