Build invoice line tables

important

This feature is only available to marketplaces that are part of the Invoice Builder EAP. The feature described here is at varying stages of completion. Details and documentation might change. If you have questions, contact your your AppDirect technical representative. We are actively soliciting feedback from early adopters. To provide feedback on this document, contact the Technical Publications team at Techpubs@appdirect.com.

This topic describes the JSON for the default invoice lines tables that appear in the default invoices, with table components.

You add table components to cell components.

Invoice lines appear in tables in the body of invoices. In the default invoice templates, they display product and edition name, billing period start and end, price per unit, quantity purchased, and total.

Invoice line table components define the format of invoice lines, and the content that appears in them. To define formatting, you can use HTML styles for invoice lines and Markdown markup language for the data in them. You can also group and sort the data.

In invoice line tables you can only add tokens from the Invoice line details tokens category. To group and sort invoice lines, you use tokens from the Sorting and grouping tokens category and the 'isGrouped' property. For information about token categories, see Tokens.

Prerequisites

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

Default template JSON sample

In the Appdirect Template_EN_US default template, see lines 578-761.

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 .

Invoice lines table JSON schema After you set parameters for the whole component, you define the table header and table body. The table header (top row) and table body have the same number of columns. Header defines the column labels that appear in the top (header) row and styles for the row. Body defines the data that appears in each column in the rows beneath the header row, and styles for each column.

{
    "type": "table",
    "data": "<repeating_data_token>",
    "style": { },
    "properties": {
        "visible": < true | false >
    },
    "sortingCriteria": [{
        "key": "<column_name_token>",
        "order": "<asc | desc>"
    }],
    "customSortingCriteria": [
        {
            "key": "<column_name_token",
            "order": [
                "<value_1>",
                "<value_2>",
                ...
            ]
        }
    ],
    "groupingCriteria": ["<column_name_1">, "<column_name_2>", ... ],
    "header": {
        "style": { },
        "properties": {
            "visible": <true | false>
        },
        "columns": [
            {
                "style": { },
                "properties": { },
                "label": "<column name>"
            },
            {
                "style": {},
                "properties": { },
                "type": "text",
                "label": "<column name>"
            }
            ...
        ]
    },
    "body": {
        "style": { },
        "properties": {
            "visible": <true | false>
        },
        "columns": [
            {
                "style": {},
                "properties": { },
                "data": "<{{token}}>",
                "type": "<text | Markdown>"
            },
            {
                "style": {},
                "properties": { },
                "data": "<{{token}}>",
                "type": "<text | Markdown>"
            }
            ...
        ]
    }
}

Elements to populate invoice lines table components

Element				Type	Description
table					Defines styles, behaviors, and content for table components.
	type			string	Required. Defines the component type as table. Valid value: table
	data			string	Required. Defines the list of invoice rows data that appears in the table rows. Dictates the valid token categories for the table: Invoice line, and Grouping and sorting categories. For information on Tokens, see Tokens. Valid values when this is an invoice lines table: {{Invoice Lines}}
	style			object	Required. Defines formatting for the invoice lines table. 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. Examples: "color": "#575757" "border-bottom": "1px solid #575757"
	properties			object	Required. Define behaviors such as visibility.
		visible		boolean	Whether table is displayed. Valid values: true | false
	sortingCriteria			array	Defines how the data that appears in body rows is sorted. Limited to ascending and descending sorting order. For other sorting options, use the customSortingCriteria property described in this table. Valid values: Array or, when there is no sorting or when customSortingCriteria is defined, null. "sortingCriteria": [] | "sortingCriteria": null Example: "key": "{{Cost Type}}", "order": "asc"
		key		string	Required. Defines the criteria by which the data is to be sorted. Valid values for invoice lines tables: {{Cost Type}} | {{IS CREDIT}} Example: "key": "{{Cost Type}}"
		order		boolean	Required. The order in which data in the column is sorted. Valid values: Ascending or descending. asc | desc Example: "key": "{{Cost Type}}", "order": "asc"
	customSortingCriteria			array	Defines how the data that appears in body rows is sorted. Sort order is custom, other than ascending or descending (to build sorting based on ascending or descending order, use the sortingCriteria property described in this table). When this is defined, sortingCriteria must be null. Valid values: Array of keys and orders or, when there is no customSortingCriteria or SortingCriteria is defined, null. "customSortingCriteria": [] | "customSortingCriteria": null
		order		array	Required. Defines sort order by tokens, in the order tokens appear in the array. Valid values differ by key. When the key is {{Cost Type}} the Sorting and grouping category tokens (see Tokens) are valid except the following: {{Product Type - Credit}} {{Product Type - Non-Credit}} When the key is {{IS CREDIT}} the following Sorting and grouping category tokens are valid: {{Product Type - Credit}} {{Product Type - Non-Credit}}
	groupingCriteria			array	Defines criteria by which to group rows of data. Valid values: Array of one or more tokens by which data is to be grouped, in the order it is to be grouped. Or, null which defines no grouping. Example: "{{Subscription ID}}" "{{Product ID}}" "{{Edition ID}}"
	header			object	Required. Defines style and content for table header row.
		style			Defines formatting for the invoice lines table header row. 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. Examples: "border-bottom": "1px solid #575757" "font-family": "Arial"
		properties	object	Define behaviors such as visibility.
			visible	boolean	Defines whether component appears on invoices. Valid values: true | false
		columns		array	Each text and markdown text component in the array defines the style, properties, and label for one column in the header row. Columns are defined in the JSON in the order they appear on the invoice, from left to right. To populate this array, see the Elements to populate header columns section in this topic.
	body			array	Required. Defines style and data for the table body.
		style		object	Required. Defines formatting for the invoice lines table body. 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. Examples: "border-bottom": "1px solid #575757" "font-family": "Arial"
		properties		Required. Define behaviors such as visibility. Applies to the table body.
			visible	boolean	Defines whether component appears on invoices. Valid values: true | false
		columns		array	Required. Each text and markdown text component in the array defines the style and content for one column in the table body. Columns are defined in the JSON in the order they appear on the invoice, from left to right, and they correspond with the header labels. See the Elements to populate body columns section in this topic.

Elements to populate invoice lines header columns

In the default template, the invoice lines header element appears in lines 614-683.

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 .

Element			Type	Description
columns			array	Required. Each text and markdown text component in the array defines the style, properties, and label for one column in the header row. Columns are defined in the JSON in the order they appear on the invoice, from left to right.
	description		string	Optional. User comments about the JSON. They do not appear on the invoice. Examples: Column 1 header Column 2 header
	style		object	Required. Defines formatting for the invoice lines header row. 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: "text-align": "left"
		width	string	Defines column width as a percent of the width of the cell that contains the table. When there is one column, it is 100% of the width of the cell that contains the table. When there is more than one column, each column is automatically allocated an equal percentage of the cell width. You can override percentage widths. Format: [0-9]+(%) Example: 100%
	properties		object	Required. Define behaviors such as visibility. Applies to the header row.
		visible	boolean	Required. Defines whether component appears on invoices. Valid values: true | false
	label		string	Required. Defines the content to appear in the header row for this column. Valid values: Text that describes the content of the column. Examples: Product Description Billing Period Price per unit

Elements to populate invoice lines body columns

In the default template, the invoice lines body element appears in lines 689-757.

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 .

Element			Type	Description
columns			array	Required. Each text and markdown text component in the array defines the style and content for one column in the table body. Columns are defined in the JSON in the order they appear on the invoice, from left to right, and they correspond with the header labels.
	description		string	Optional. User comments about the JSON. They do not appear on the invoice. Examples: Column 1 content Column 2 content
	type		string	Required. Defines the column content type as text or Markdown text. For more information on markdown text components, see Build Markdown text components. Valid values: text | markdownText
	style		object	Required. Defines formatting for body column. 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. Examples: "border-bottom": "1px solid #575757" "font-family": "Arial" "line-height": "15px" "padding-right": "12px"
	data		string	Required. Content to populate the column in the table body. Valid content: For text components—One or more valid tokens. For markdownText components—One or more valid tokens formatted with Markdown markup language (see Build Markdown text components). Token format: {{Token Name}} Valid tokens (see Tokens): When the header data token is {{Invoice Lines}}, tokens in the Invoice line details category. Token example: {{Product Description}} Markdown text example: "**{{Product Name}}** \n{{Edition Name}}"
	properties		object	Required. Define behaviors such as visibility and grouping.
		visible	boolean	Required. Defines whether component appears on invoices. Valid values: true | false
		isGrouped	boolean	When the table groupingCriteria uses the token in this column to group data, defines whether visual grouping occurs. When true, data appears in this column for the first invoice line in each group and does not for subsequent lines in the group. Example: {{Product name}} appears for the first invoice line but not for subsequent invoice lines in the group of lines related to the product (when multiple lines related to the product are grouped together, avoids the product name being repeated on every line). When false, the data appears in this column for all invoice lines (the product name appears on every line). Valid values: true | false