Build page number components

To add page numbers to invoice templates, add pagination tokens to cell components in headers or footers. You can combine plain text and tokens to build the page number output. For example, Page 1 of 2, or 1/2. For more information, see Tokens.

Prerequisites

Add page number components to cell components that are in row components that are in header or footer components.

For more information, see the following topics.

Default template JSON samples

In the Appdirect Template_EN_US default template, see lines 9-21.

To download the default template, go to .

Page number component JSON

{
  "type": "pageNumber",
  "data": "",
  "style": {},
  "properties": {
    "visible": <true | false>
  }
}

Elements to populate page number components

Element     Type Description
pageNumber     object Defines the styles, behaviors, and content for page numbers.
  type    string

Required. Defines the component type as page number.

pageNumber
  data   string

Required. Text, one or more tokens, or both.

Token format: {{Token Name}}

Valid values: All text and pagination tokens (see Tokens):

{{Page Number}}
{{Total Pages}}

Examples: See the Data property examples section in this topic.
  style   object

Required. Defines formatting for pagination.

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.
  properties   object Required. Define visibility.
    visible boolean

Required.

Defines whether component appears on invoices.

Valid values:

true | false

Data property examples

Data examples JSON Output example
Data (simple binding) {{Page Number}}

1

2
Text and data (compound binding)

"Page {{Page Number}}"

Page 1

Page 2
Text and data (compound binding) "{{Page Number}}/{{Total Pages}}"

1/2

2/2
Text and data (compound binding) "{{Page Number}} of {{Total Pages}}"

1 of 2

2 of 2
Text and data (compound binding) "Page {{Page Number}} of {{Total Pages}}"

Page 1 of 2

Page 2 of 2