Build headers

Header elements define the placement, content, and style for invoice headers.

You create a default header that appears on every page (default header component). Optionally, you can also create a different header (first header component) that replaces the default header on the first page.

The displayHeaderOnFirstPage page property (see Build pages) determines which header, if any, appears on the first page, as shown in the following table.

default header is defined	first header is defined	displayHeaderOnFirstPage setting in Page settings	Result
Yes or no	Yes	true	First header appears on the first page.
Yes	No	true	Default header appears on the first page.
No	No	true	No headers appear on any pages.
Yes or no	Yes	false	No header appears on the first page.
Yes	No	false	No header appears on the first page. Default header appears on subsequent pages.

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

None.

Default template JSON samples

In the Appdirect Template_EN_US default template, see the following:

• Header—Lines 49-142.
• Default header component—Lines 50-140.

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.

JSON structure context for header

Header is one of three sections in the highest-level template structure, in addition to page.

{
   "page": {},
   "header": {},
   "body": {},
   "footer": {}
}

Header JSON schema

{
  "header": {
    "first": {
      "type": "header",
      "style": {},
      "properties": {},
      "components": []
    },
    "default": {
      "type": "header",
      "style": {},
      "properties": {},
      "components": []
    }
  }
}

Elements to build header section

Element				Type	Description
header				object	Required. Defines content, styles, and behaviors for page headers.
	first			object	Required. Defines a header that only appears on the first page. Whether the invoice displays it is subject to other settings (see introduction for this topic).
		type		string	Required. Defines the component type as header. Valid value: header
		style		object	Required. Defines formatting for the first page header. 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. Example: "height": "40px"
			height	string	Required. Defines row height. HTML style name and CSS style. Example:"height": "40px"
		properties		object	Required. Define visibility.
		components		array	Required. Style and elementary components that define the location of content in the header. Requires at least one row. Valid values: row verticalSpacer For information on cell components and vertical spacers, see: Build row components Build vertical spacers
	default			object	Required. Defines the default header component. Whether the invoice displays it is subject to other settings (see the introduction for this topic).
		type		string	Required. Defines the component type as header. header
		style		object	Required. Defines formatting for the default header. 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. Example: "height": "40px"
			height	string	Required. Defines row height. HTML style name and CSS style. Example: "height": "40px"
		properties		object	Required. Define visibility.
		components		array	Required. Style and elementary components that define the content, and location of content, in the header. Requires at least one row. Valid values: row verticalSpacer For information on cell components and vertical spacers, see: Build row components Build vertical spacers