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. For more information, see Build headers.

Prerequisites

None.

Default template JSON samples

In the Appdirect Template_EN_US default template, see the following:

To download the default template, go to .

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

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

See:

Build row components

Build vertical spacers