Power Plus - List Filter Module

The List Filter module adds interactive filter controls to your page. Visitors can narrow down list results by selecting one or more filter options. For example, on a product catalog page, you might add a “Category” dropdown that lets visitors show only shoes, or only electronics. On a job board, you might add location, department, and employment type filters.

The filter module supports two fundamentally different modes: Manual (you define every option by hand) and Data-Schema (options are generated automatically from the data). The data-schema mode is especially valuable because it keeps your filters in sync with your data — when someone adds a new category to the HubDB table or CRM, the filter automatically picks it up without any page editing.

Configuration

Style Options

The filter can be rendered as several different UI controls. Choose the one that best fits the number of options and the available space on the page.

History & URL Options

These settings control how the filter’s state is preserved across page navigation and browser history.

“Show All” Option

Mode: Manual

In manual mode, you define each filter option yourself in the module settings. This gives you complete control over what options appear, what they’re labeled, and what filter they apply. Manual mode is best when you have a fixed, known set of options that rarely change — for example, content types (Blog, Whitepaper, Video) or time ranges (This Week, This Month, This Year).

Each filter option has these fields:

Manual Filter Example: Content Type Tabs

A typical use case: letting visitors filter content by type using a horizontal tab bar.

Filter Module:
  Name:      type_filter
  List Name: content_list
  Title:     Content Type
  Mode:      Manual
  Style:     Tabs
  Filters:
    - Name: blog
      Label: Blog Posts
      Property Name: values.type.name
      Operator: ==
      Value: blog_post
    - Name: whitepaper
      Label: Whitepapers
      Property Name: values.type.name
      Operator: ==
      Value: whitepaper
    - Name: video
      Label: Videos
      Property Name: values.type.name
      Operator: ==
      Value: video
  Disabled Filter: true
  Disabled Filter Label: All Types

This creates a tab bar with four options: “All Types”, “Blog Posts”, “Whitepapers”, and “Videos”. Selecting “Blog Posts” adds a filter values.type.name == "blog_post" to the request.

Manual Filter Example: Time-Based Chart Filter

For the weather chart, a filter lets visitors switch between forecast and historical data using the current time:

Filter Module:
  Name:      time_filter
  List Name: chart_list
  Style:     Tabs
  Mode:      Manual
  Disabled Filter: true
  Filters:
    - Name: forecast
      Label: Forecast
      Operator: >=
      Property Name: millis
      Value: [[$millis()]]
    - Name: history
      Label: History
      Operator: <
      Property Name: millis
      Value: [[$millis()]]

The [[$millis()]] expression evaluates to the current time in milliseconds. “Forecast” shows data points with a timestamp in the future (>= now), and “History” shows data points in the past (< now).

Mode: Data-Schema

In data-schema mode, filter options are generated automatically from the actual data. The framework analyzes the loaded data to build a schema of all unique values for a given field, and creates a filter option for each one.

This is extremely powerful because: - Filter options stay in sync with the data — when someone adds a new category to the HubDB table, the filter automatically includes it. - No manual maintenance — you don’t need to edit the page every time the data changes. - Works with any datasource — JSON, HubDB, and CRM datasources all support schema generation.

The way it works depends on the datasource type: - Client-side datasources (JSON, XML, HubDB) — The framework loads all the data, then builds a schema by scanning every item for unique values. This schema includes all field names, their types, and all distinct values found. - Server-side datasources (CRM) — The datasource provides a schema from the CRM property definitions (via the -schema endpoint). This includes property names, labels, types, and dropdown options as defined in HubSpot.

You configure data-schema filters using several JSONata expressions that tell the framework how to navigate the schema and build options:

Understanding the Schema Object

To write data-schema filter queries, you need to understand the shape of the schema object. The easiest way is to use debug mode to see the exact schema in your browser’s console. But here’s the general structure:

For client-side datasources, the schema is built by scanning the data and looks like this:

{
  "properties": [
    {
      "name": "id",
      "type": "string",
      "values": [{ "value": "1", "num": 1 }, { "value": "2", "num": 1 }]
    },
    {
      "name": "values",
      "type": "object",
      "properties": [
        {
          "name": "category",
          "type": "object",
          "properties": [
            {
              "name": "name",
              "type": "string",
              "values": [
                { "value": "electronics", "num": 5 },
                { "value": "clothing", "num": 3 }
              ]
            },
            { "name": "label", "type": "string", "values": [...] }
          ]
        }
      ]
    }
  ]
}

Each values array contains all unique values found in the data for that field, along with a count (num) of how many items have that value.

To navigate to a specific field’s values, chain .properties[name="..."] selectors. For example: - schema.properties[name="values"].properties[name="category"].properties[name="name"].values → gets all unique category names from a HubDB table - schema.properties[name="values"].properties[name="industry"].properties[name="label"].values → gets all unique industry labels

For CRM datasources, the schema comes from the HubSpot property definitions:

{
  "properties": [
    {
      "name": "category",
      "label": "Category",
      "type": "enumeration",
      "options": [
        { "label": "Electronics", "value": "electronics" },
        { "label": "Clothing", "value": "clothing" }
      ]
    }
  ]
}

To navigate CRM schema: schema.properties[name="category"].options → gets all dropdown options for the category property.

Data-Schema Example: Category Dropdown from HubDB

This automatically creates dropdown options from all unique values in the industry column of a HubDB table:

Filter Module:
  Name:                  industry_filter
  List Name:             card_list
  Title:                 Industries
  Mode:                  Data-Schema
  Style:                 Dropdown
  Filter Query:          schema.properties[name="values"].properties[name="industry"].properties[name="label"].values
  Filter Name Query:     object.value
  Filter Label:          [[object.value]]
  Filter Property Name:  values.industry.name
  Filter Value Query:    object.value
  Filter Operator:       Contains Token
  Disabled Filter:       true (adds "All Industries" option)
  URL Parameter:         true
  URL Parameter Name:    industry

The Filter Query navigates the auto-built schema to find all unique values of values.industry.label. Each value becomes a filter option. The ^(value) suffix can be added to sort options alphabetically.

Data-Schema Example: Multi-Value Filter with JSONata

When HubDB items have multiple tags or types (multi-select columns), each item’s values.types field is an array of objects. You need to: 1. Extract the unique values from the schema (which already flattens the arrays) 2. Use $map() in the Property Name to match against array items

Filter Module:
  Name:                  types_filter
  List Name:             content_library_list
  Mode:                  Data-Schema
  Filter Query:          schema.properties[name='values'].properties[name='types'].properties[name='name'].values^(value)
  Filter Name Query:     object.value
  Filter Label:          <p>[[object.value]]</p>
  Filter Property Name:  $map(values.types, function($v) {$v.name})
  Filter Value Query:    object.value
  Filter Operator:       Contains Token
  URL Parameter:         true
  URL Parameter Name:    cltype

The $map(values.types, function($v) {$v.name}) expression is evaluated against each data item. It extracts all name values from the types array, creating a flat list that the Contains Token operator can search through.

Data-Schema Example: CRM Product Category Filter

For CRM datasources that provide a schema endpoint, the schema comes from HubSpot’s property definitions rather than from scanning the data:

Filter Module:
  Name:                  category_filter
  List Name:             product_list
  Mode:                  Data-Schema
  Style:                 Dropdown
  Filter Query:          schema.properties[name="category"].options
  Filter Name Query:     object.value
  Filter Label:          [[object.label]]
  Filter Property Name:  category
  Filter Value Query:    object.value
  Filter Operator:       ==
  URL Parameter:         true
  URL Parameter Name:    category

This reads the category CRM property’s dropdown options and creates a filter option for each one. The label comes from object.label (the human-readable name defined in HubSpot), and the value comes from object.value (the internal value).

Filter Operators Reference

When to Use Which Operator

• Single-value fields (text, number, single-select dropdown): Use == for exact matching.

• Multi-select fields (HubDB multi-select, arrays): Use Contains Token and combine with $map() in the Property Name.

• Date fields: Use >= and < for date ranges.

• Tags/categories with OR logic: Use ONE_OF — when the visitor selects multiple options, items matching ANY of them are shown.

• Excluding items: Use !=, NOT_IN, or Not Contains Token in default list filters. For example, the Wishlist’s “Recommended Products” uses NOT_IN with $cartProductIds() to exclude products already in the cart.

Combining Multiple Filters

You can place multiple filter modules on the same page, all targeting the same list. Filters combine using AND logic — results must match ALL active filters simultaneously. For example, if the visitor selects “Electronics” in the category filter and “Large” in the size filter, only items that are BOTH in the “Electronics” category AND the “Large” size are shown.

For OR logic within a single filter (e.g. “show Electronics OR Clothing”), use the ONE_OF operator with checkbox or multiselect dropdown style. This lets the visitor select multiple options, and items matching ANY selected option are shown.