Build field components

Use field components in cells to display a field label and content, vertically (field label above content) and horizontally (field label beside content). The content can be plain text, tokens, Markdown text, or combination thereof, that display database data specific to the invoice. Content examples are shown in the following table.

Data examples	JSON	Output
Text (simple binding)	"Thank you for your business."	Thank you for your business.
Data (simple binding)	{{Invoice Due Date}}	July 1, 2019
Text and data (compound binding)	"Due date: {{Invoice Due Date}}"	Due date: July 1, 2019
Markdown text (double asterisks render output bold)	"**Thank you for your business.**"	Thank you for your business.

note

You can create more than one active version of an invoice template per locale, and use conditional expressions to determine which fields appear on a version of an invoice template. You can only use conditional expressions in templates that you create or that you copy from a marketplace-provided default template. You cannot add conditional expressions to marketplace default templates.

Prerequisites

You can add field components to cell components. See Build cell components.

Default template JSON sample

In the Appdirect Template_EN_US default template, see lines 799-829.

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.

Field component JSON

{
    "type": "field",
    "style": {},
    "properties": {
        "visible": <true | false>
        "orientation": "<vertical | horizontal>"
    },
    "label": {
        "type": "text",
        "style": {},
        "properties": {
            "visible": <true | false>
        },
        "data": "<label value>"
    },
    "content": {
        "type": "text",
        "style": {},
        "properties": {
            "visible": <true | false>
        },
        "data": "<plain text | {{token}} | {{markdownText}}>"
  }
}

Elements to populate field components

Element			Type	Description
field				object	Defines the styles, behaviors, and content for field components.
	type			string	Required. Defines the component type as field. Valid value: field
	properties			object	Required. Define visibility.
		visible		boolean	Required. Defines whether component appears on invoices. Valid values: true | false
		orientation		string	Field orientation: Vertical—Label is above content. Horizontal—Label is next to content. Valid values: vertical | horizontal
	style			object	Required. Defines formatting for the field. 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.
	label			object	Required. Defines the styles, behaviors, and content for field label.
		type		string	Defines the component type as text or Markdown text. Valid values: text | markdownText
		style		object	Defines the formatting for the label. 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. Note that width is optional. The default width is equal to the label length. You can specify a width to override it. Examples: "width": "50%", "text-align": "left"
		properties		object	Define visibility.
			visible	boolean	Defines whether component appears on invoices. Valid values: true | false
		data		text	Content to display for the field label. Valid values: Text or Markdown text. Examples (for the latter, Markdown asterisks render output italicized): Payment terms *Invoice number\*
	content			object	Required. Defines the styles, behaviors, and content for field content.
		type		string	Defines the component type as content. Valid values: text | markdownText
		style		object	Defines formatting for the content. Valid values: < br />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. Note that width is optional. The default width is equal to width of the cell less width of the label, unless you specify widths to override the defaults. Examples: "width": "50%", "text-align": "right"
		properties		object	Define visibility.
			visible	boolean	Defines whether component appears on invoices. Valid values: true | false
		data		text	Content to display for the field label. Valid values: plain text or tokens. For more information on tokens, see Tokens. Examples: Net 30, {{Invoice Number}}