Enable sorting for the Print Button

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Authors:

Yulia Andreyanova, Kirill Gaiduk

Changed on:

27 July 2026

Key Points

Configure sorting for any Print Button using the sort property and a matching setting
Use `arrayPath` to define which array should be sorted
Use one or more sorting rules to define sorting priority
If sorting is not configured, the Print Button behavior remains unchanged
Sort on fields from transformed attribute data using dot-separated field paths (for example, `sku.attributes.byName.Size`)

Prerequisites

Settings Creation and Editing Mutations

Steps

Generic sorting configuration for Print Button

The Print Button Component supports configuration-driven sorting of printable data before the HTML template is rendered. Sorting is configured through a setting referenced by the Print Button `sort` property, so different Print Buttons can use different sorting configurations across pages.This functionality introduces a generic approach to printable document sorting, similar to the legacy `CUSTOM_PICK_LIST_SORT_CONFIG` configuration. Sorting is applied after data transformation, which means field paths can target values produced by the transformation step - including transformed attribute data such as `sku.attributes.byName.<attribute>`. Single-field and multi-field sorting are supported and use the same configuration format.

Prerequisites

Before configuring sorting:

Ensure the Print Button component is configured in the manifest
Ensure the printable document template is already configured using the `setting` property
Create a setting that contains the sorting configuration

Configure the Print Button

Add the `sort` property to the Print Button configuration.

1{
2  "component": "fc.button.print",
3  "props": {
4    "label": "i18n:fc.sf.ui.print",
5    "setting": "fc.print.picklist.template",
6    "sort": "fc.print.picklist.sort.config"
7  }
8}

The value of the `sort` property must match the name of the setting that contains the sorting configuration.

Configure the sorting setting

Create a setting with the same name as the value specified in the Print Button `sort` property.

Sorting setting name example

The following example shows a setting name referenced by the Print Button `sort` property: `fc.print.picklist.sort.config`

1{
2  "sort": [
3    {
4      "field": "qty",
5      "order": "DESC",
6      "type": "number"
7    }
8  ],
9  "arrayPath": "items"
10}

Configuration properties

Property	Type	Required	Default	Description
`arrayPath`	`string`	no	none	Dot-separated path to the array within the printable data that should be sorted, for example `items`
`sort`	`array`	yes	none	Ordered list of sorting rules Rules are applied in the order they appear
`field`	`string`	yes	none	Dot-separated path to the field to sort on, resolved against each array item Paths can target transformed attribute data (for example, `sku.attributes.byName.Size`)
`order`	`string`	no	`ASC`	Sort direction Accepted values: `ASC` `DESC`
`type`	`string`	no	`string`	Data type used to normalize values before comparison Accepted values: `string` `number` `boolean` `object`

Multi-field sorting

The following example applies sorting by `node.groupId` in descending order first, then by `node.classId`, and finally by `node.qty` as a number.Sorting rules are applied in the order they appear in the `sort` array.

1{
2  "sort": [
3    {
4      "field": "groupId",
5      "order": "DESC"
6    },
7    {
8      "field": "classId"
9    },
10    {
11      "field": "qty",
12      "type": "number"
13    }
14  ],
15  "arrayPath": "items"
16}

Default behavior

If the `sort` property is not configured, or if the referenced sorting setting does not exist, no additional sorting is applied and the Print Button continues to work as before.

Related artifacts

Print Button Component

Configure the sorting setting

Create a setting with the same name as the value specified in the Print Button `sort` property.

Sorting setting name example

The following example shows a setting name referenced by the Print Button `sort` property: `fc.print.picklist.sort.config`

1{
2  "sort": [
3    {
4      "field": "qty",
5      "order": "DESC",
6      "type": "number"
7    }
8  ],
9  "arrayPath": "items"
10}

Configuration properties

Property	Type	Required	Default	Description
`arrayPath`	`string`	no	none	Dot-separated path to the array within the printable data that should be sorted, for example `items`
`sort`	`array`	yes	none	Ordered list of sorting rules Rules are applied in the order they appear
`field`	`string`	yes	none	Dot-separated path to the field to sort on, resolved against each array item Paths can target transformed attribute data (for example, `sku.attributes.byName.Size`)
`order`	`string`	no	`ASC`	Sort direction Accepted values: `ASC` `DESC`
`type`	`string`	no	`string`	Data type used to normalize values before comparison Accepted values: `string` `number` `boolean` `object`

Enable sorting for the Print Button

Key Points

Prerequisites

Settings Creation and Editing Mutations

Steps

Prerequisites

Configure the Print Button

Configure the sorting setting

Configuration properties

Multi-field sorting

Related artifacts

Print Button Component

Yulia Andreyanova

Contributors:

Building Blocks

By Type

Helpful Resources

Quick Links

Prerequisites

Configure the Print Button

Configure the sorting setting

Configuration properties

Multi-field sorting