Adding custom sort options to orders in the customer profile page

You can add custom sort options to sort the orders in the Orders section of the Customer profile page.

About this task

By default, the sort options that are available in the Customer profile page are Oldest to newest and Newest to oldest.

The order sort options are picked from a pre-defined list in the order-list-sort.config.ts file. The file is configurable, so you can customize the sort configurations as per your requirements.

Procedure

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:SCREEN_EXTENSIONS_HOME/app/features/customer/config
Navigate to the SCREEN_EXTENSIONS_HOME/app/features/customer/config folder.
Copy the order-list-sort.config.ts file from the <WORKSPACE>/store-frontend/src/app/features/customer/config folder to the <WORKSPACE>/store-frontend/store-extensions-src/app/features/customer/config folder.

Note: If the order-list-sort.config.ts file is already present in the <WORKSPACE>/store-frontend/store-extensions- src/app/features/customer/config folder, do not copy the file.
Custom sort configurations for order list are defined in the order-list-sort.config.ts file. For example,
```
export const OrderListSortConfig = [
{
'tid': 'newToOld',
'labelDisplayValue': 'sortOptions.LABEL_NewToOld',
'codeValue': 'orderCreatedAt_desc',
'mashupBinding': {
'name': 'Createts',
value: 'Y'
}
}
];
```

Example

A sample JSON specification that shows various properties of order sort configuration is given.

You can the override sort options by changing the labelDisplayValue.

For translating, you must update the module’s en.json file. For information about adding new translation literals, see Defining a bundle entry for an existing component or module.

Table 1. Attributes and descriptions
Attribute	Description
`tid` (Required)	Unique key to distinguish the sort configuration.
`labelDisplayValue` (Required)	Description bundle key for sort configuration.
`codeValue` (Required)	Value for the sort configuration. Used to show in query parameters and selections.
`mashupBinding` (Required)	Contains binding to be sent to the mashup APIs. It is an object with the `name` of the attribute as name and value of the `Desc` as the value to be sent in the mashup API under the attribute of `OrderBy` object.