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.

• Build headers
• Build footers
• Build row components
• Build cell components

Default template JSON samples

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

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.

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: {{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