Power Plus - List Sort Module

The List Sort module adds sorting controls to your page. Visitors can reorder list results by choosing from predefined sort options — for example, sorting products by price (low to high), or sorting articles by date (newest first). Like all controls in the framework, the sort module connects to a specific list by name and works alongside filters and search.

Sorting is often the last step in the data pipeline: first the datasource loads the data, then filters narrow it down, then search further refines it, and finally sorting determines the order of the remaining results.

Configuration

Field	Type	Description
Name	Text	A unique identifier for this sort module (e.g. `product_sort`, `date_sort`). Used internally for state management and URL parameters.
List Name	Text	The Name of the List module this sort controls. Must match exactly.
Title	Text	An optional label shown above the sort control. For example, “Sort by” or “Order by”. If left empty, no label is shown — useful when the sort dropdown includes descriptive labels like “Price: Low to High” that make a heading redundant.
ARIA Label	Text	An accessibility label for screen readers. Set this if you don’t have a visible Title.

Sort Options

You define one or more sort options. Each option specifies a property to sort by and the sort direction. The visitor picks one option at a time (sorting is always single-select).

Field	Description
Name	An internal identifier for this sort option (e.g. `price_asc`, `date_desc`, `name_az`). This value is used in state management and URL parameters. Use lowercase with underscores.
Label	The display text the visitor sees (e.g. `Price: Low to High`, `Newest First`, `Name: A-Z`). Make labels clear and descriptive — visitors should immediately understand what each option does.
Order	`asc` (ascending: A→Z, 0→9, oldest→newest) or `desc` (descending: Z→A, 9→0, newest→oldest).
Property Name	The path to the data field to sort by. For HubDB data: `values.publish_date`, `values.name`, `values.price`. For CRM data: `name`, `hs_price_eur`, `createdate`. The framework sorts by comparing values of this field across all items.

“No Sort” Option

Field	Description
Disabled Sort	When `true` (the default), a special “No Sort” option is prepended to the sort options. When selected, no sort is applied and items appear in their natural order (as returned by the datasource, or as determined by default sorts in the List module).
Disabled Sort Label	The label text for the “No Sort” option. Default: `No Sort`. You might customize this to “Default Order”, “Relevance”, or “Recommended”.

History & URL Options

Field	Description
Use in History	When `true` (the default), the sort selection is stored in browser history. The back and forward buttons restore the previous sort.
Use in URL	When `true`, the selected sort option is stored as a URL query parameter. For example, `?sort=price_asc` or `?order=newest`. This makes sorted views shareable and bookmarkable.
URL Parameter Name	The name of the query parameter. Default: `sort`.

Style Options

The sort control can be rendered in several visual styles:

Field	Description
Type	`Radio` — vertical radio buttons (clear, but takes vertical space). `Checkbox` — technically works but rarely makes sense for sorting (which is single-select by nature). `Dropdown` — compact dropdown menu (recommended for 3+ options). `Tabs` — horizontal tab bar (great for 2-3 options that should be visually prominent).
Color Scheme	`Light` or `Dark`.
Form Style	Optionally override the POWER THEME form styling.
Alignment	Horizontal alignment of the sort control.
Animation	AOS (Animate on Scroll) settings.

Example: Product Sorting

A comprehensive sort control for a product catalog with four options:

Sort Module:
  Name:      product_sort
  List Name: product_list
  Title:     Sort by
  Style:     Dropdown
  Sorts:
    - Name: price_asc
      Label: Price: Low to High
      Order: asc
      Property Name: hs_price_eur
    - Name: price_desc
      Label: Price: High to Low
      Order: desc
      Property Name: hs_price_eur
    - Name: name_asc
      Label: Name: A-Z
      Order: asc
      Property Name: name
    - Name: name_desc
      Label: Name: Z-A
      Order: desc
      Property Name: name
  Disabled Sort: true
  Disabled Sort Label: Default Order
  URL Parameter: true
  URL Parameter Name: sort

With URL Parameter: true, the URL updates when the visitor picks a sort option: ?sort=price_asc. If someone shares that URL, the list will open pre-sorted by price.

Example: Content by Date (Tabs)

For a content library or blog listing, a tab-style sort with just two options creates a clean, simple toggle between newest and oldest:

Sort Module:
  Name:      date_sort
  List Name: content_list
  Style:     Tabs
  Sorts:
    - Name: newest
      Label: Newest First
      Order: desc
      Property Name: values.publish_date
    - Name: oldest
      Label: Oldest First
      Order: asc
      Property Name: values.publish_date
  Disabled Sort: false

Setting Disabled Sort: false removes the “No Sort” option — the visitor must always have one of the two sort options active. This makes sense when “Newest First” is the natural default and you don’t want a confusing “No Sort” choice.

How Sorting Works Under the Hood

The behavior of sorting depends on the datasource type:

Client-Side Datasources (JSON, XML, HubDB)

For client-side datasources, all data is loaded into the browser at once. Sorting is performed locally in JavaScript by comparing the specified property across all items. The sort is stable (items with equal values maintain their relative order). Numeric values are compared as numbers, and string values are compared alphabetically.

When the visitor changes the sort, no new network request is made — the existing data is simply re-sorted and re-rendered. This makes sort changes feel instant.

Server-Side Datasources (CRM)

For CRM datasources, the sort parameter is included in the POST request to the serverless endpoint. The HubSpot CRM Search API handles the sorting on the server and returns pre-sorted results. This means a new network request is made every time the visitor changes the sort.

The sort direction uses a prefix convention: ascending is the default, and the - prefix indicates descending. For example, name sorts A→Z, while -name sorts Z→A.

Interaction with Filters and Search

When sorting is combined with filters and search, the processing order is:

Filters narrow the full dataset to matching items
Search further narrows within the filtered results
Sort orders the remaining results
Paging splits the ordered results into pages

This means the sort always operates on the already-filtered and searched subset, not the full dataset.

Default Sorts vs. Visitor Sorts

The List module can define default sorts that apply when no visitor-selected sort is active. When a visitor selects a sort option, it takes priority. Default sorts are also appended after visitor sorts as a tiebreaker — for example, if a visitor sorts by price and two items have the same price, the default sort (e.g. by name) determines their relative order.