Build cell components

Cells are layout components. They contain an array of other components and define the location of the cells, and the components they contain, on invoice pages.

The following are characteristics of cells:

• Must be contained in a row.
• Do not appear on invoices, but the elementary components that they contain, such as text, data and images, do appear.
• Can be an unlimited number in a row, limited only by the page width and the space needed to display the elements within them.
• Reside, by default, to the right and left of each other when there is more than one in a row. They cannot reside above or below each other.
• Cannot contain cells.
• Contain one or more of the following components:
  • Text (which can include tokens to return data from the database).
  • Image.
  • Tables (Invoice lines table, Tax summary table).
  • Row. (In this case, the row is nested: At the highest level there is a row component. It contains a cell, and that cell can contain a row).
  • Vertical spacers to provide space between nested rows.
  • Field.
  • Markdown text.
  • Page number.
• Cannot contain cells, but can contain rows that can contain cells, as referenced in the list above.

Prerequisites

You can add cell components to body sections or row components.

• Build body
• Build row components

Default template JSON sample

In the Appdirect Template_EN_US default template, see lines 8-28.

To download the default template

📝 Note: If the AppDirect logo appears in the upper-left corner of the page, when Manage > Marketplace appears in this topic, click the grid icon > Switch to | Store, instead.

1. Go to Manage > Marketplace > Settings > Invoice templates > Appdirect Template_EN_US | Gear icon | Download JSON .

Cell component JSON schema

Cell component JSON is shown in red text, in the following sample code. Cell components must always be contained in a row (the black text).

{  
    "type" : "row",
    "components": [
        {
            "type":"cell",
  	     "style": {}
                "width": "100%"
  	     "properties": {}
            "components": [{
                "type":" "
            }]
        } 
    ]
}

Elements to populate cell components

Element			Type	Description
cell			object	Defines styles and behaviors for cell components. Cells can contain components with content that appears on invoices.
	type		string	Required. Defines the component type as cell. Valid value: cell
	style		object	Required. Defines formatting for the cell. Valid values: HTML element names and CSS styles for the named HTML element. All HTML styles. Only relevant styles that the Invoice Builder can render appear in the user interface preview and the PDF. Examples: "font-size": "9px", "font-family": "Arial"
		width	string	Defines cell width as a percent of the row that contains it. When there is one cell to span the full row width, set the cell to 100%. When there is more than one cell, the cells are allocated an equal percentage of the row width. You can change default percentage widths. Valid values: Cell width as a percent of row width. Format: [0-9]+(%) Example: 100%
	properties		object	Required. Define visibility.
		visible	boolean	Required. Defines whether component appears on invoices. Valid values: true | false
	components		array	Required. Layout and elementary components contained in the cell. See the following topics to provide information on valid component types for cells: Build row components Build vertical spacers Build text components Build image components Build field components Build invoice line tables Build tax summary tables Build Markdown text components Build page number components