CMS+ Filters+

Each supported Framer collection field has its own Filter+, allowing you to apply dynamic, on-demand filters to Collection+.

All CMS Plus filter components are toggle-driven, meaning they must be placed inside a design component to apply and remove its filter. Learn about toggle-driven components and their requirements.

Common Controls

Most filters will have these common controls, or similar variations. Be sure to check each filter type for any unique controls, its filtering conditions, and additional feature details.

  • Collection+ ID Number of the Collection+ ID you want to control.

  • Filter This control triggers the apply or clear filter function. Learn about this concept.

  • Field Name Must match exactly as the field is named in its collection.

  • Preserve Enable/disable syncing with the filter state. Read about preserving.

  • Condition A dropdown menu displaying the available filter options. Check each filter type to explore its specific selection choices.

  • Value The specific criteria for the filter.

Interactions

  • Active Filter Set the variant to be used when the filter is applied.

  • Inactive Filter Set the variant to be used when the filter is cleared.

Both interactions are required when Preserve is enabled. Read about preserving.

Basic Setup

While these steps apply to most filters, be sure to check each filter type for any exclusive features or specific controls. If a filter has unique options, you'll find more details in the Filter+ Types section below.

  1. Check the collection field type you want to filter. This will guide you to choosing the appropriate Filter+ component.

  2. Integrate the Filter+ component that matches the field type you're targeting into your component. Learn how.

  3. Configure the Filter+ component controls in the primary variant. The available controls and options vary by component, so take time to explore each type to understand its specific requirements.

    Important

    If selecting to Preserve the filter state, add the required Interactions:

    Displays the required interactions for all CMS Plus Filter+ components when preserving.


  4. Override Filter in the other variant. This is what triggers the sorting when transitioning between variants. Learn about triggering functionality.

    CMS Plus filter with its Filter control overridden, this triggers its function.

Filter+ Types

Below is a list of every CMS Plus Filter+, each corresponding to a supported collection field. While most filters share consistent controls, some omit unnecessary ones, and others include unique controls. Each Filter+ details its filter condition options first, followed by any specialized features, controls, or setup instructions specific to that filter.

* Conditions exclusive to CMS Plus, offering additional options beyond Framer's native filters.

Date

Conditions

  • Equals

  • Doesn't Equals

  • Is Before

  • Is Before or Equal

  • Is After or Equal

  • Is Between Dates

    • Is Before

    • Is Before or Equal *

    • Is After

    • Is After or Equal *

Specialized Controls

  • Value Type Select the type of value to use.

  • Date Value Set a date.

  • Text Value Input the date as a text in ISO 8601 format.

Using A Dynamic Date

Currently, Framer’s native fetching only supports text fields. Learn how to enable fetching for your project. Fetching is necessary to use dynamic dates, which requires an API that provides the time in ISO 8601 format.

With fetching, you can pass the current date in local time or specify a timezone. This functionality can be applied to both single date filters and date ranges. When selecting an API, it's important to carefully review its documentation for usage guidelines, pricing, and any limitations.

For the following example, I will be using TimeAPI.

  1. Set the Value Type to Text to enable Framer's native fetching.

  2. Click the + symbol next to Text Value and select Add Fetch.

  3. Enter your API's URL in the provided text box.

  4. Set Path to the property returning a text value in ISO 8601 format (e.g., dateTime in this example).

    An example of using fetching with Filter+ Date. Setting the path based on the used API.


  5. (Optional) In Advanced, set Cache to 1 Day to minimize fetch requests, as the date updates every 24 hours.

    Showing optional, but highly recommending setting to cache the value for 1 day.

    Support for Errors

    If any errors arise, consult your API's documentation for troubleshooting. CMS Plus cannot assist with Framer fetching errors.

File

Conditions

  • Is Set

  • Isn't Set

Key Note

The Value control is not needed because this Filter+ only checks whether a value is set or not.

Formatted Text

Conditions

  • Is Set

  • Isn't Set

Key Note

The Value control is not needed because this Filter+ only checks whether a value is set or not.

Image

Conditions

  • Is Set

  • Isn't Set

Key Note

The Value control is not needed because this Filter+ only checks whether a value is set or not.

Link

Conditions

  • Is Set

  • Isn't Set

Key Note

The Value control is not needed because this Filter+ only checks whether a value is set or not.

Number

Conditions

  • Equals

  • Doesn't Equals

  • Greater Than

  • Greater Than or Equal

  • Less Than

  • Less Than or Equal

  • Is Between Numbers *

    • Greater Than

    • Greater Than or Equal

    • Less Than

    • Less Than or Equal

Specialized Controls

Enable number ranges by selecting the Is Between Numbers condition.

  • Start Condition Is the start value inclusive or exclusive.

  • Start The minimum value of the range.

  • End Condition Is the end value inclusive or exclusive.

  • End The maximum value of the range.

Option

Conditions

  • Equals

  • Doesn't Equal

Plain Text

Conditions

  • Is Set

  • Isn't Set

  • Equals

  • Doesn't Equal

  • Starts With

  • Doesn't Start With

  • Ends With

  • Doesn't End With

  • Contains

  • Doesn't Contain

Reference

Conditions

  • Is Set

  • Isn't Set

  • Equals

  • Doesn't Equal

  • Is Included In

  • Isn't Included In

Specialized Controls

  • Slug When setting a reference field for your CMS item, the available options are determined by the slugs in the referenced collection.

Example Walkthrough

  • I have a field called Dealership, which is a reference to another collection.

  • I want this Filter+ to target Los Angeles from the referenced collection.

    1. Navigate to the referenced collection.

    2. Find the Los Angeles item.

    3. Copy its slug.

    4. Paste in the Filter+.

    5. Follow the rest of the basic setup steps for all Filter+ components.

Slug

Conditions

  • Equals

  • Doesn't Equal

  • Starts With

  • Doesn't Start With

  • Ends With

  • Doesn't End With

  • Contains

  • Doesn't Contain

Key Note

The Field Name control is not needed because it is always named "Slug".

Toggle

Key Note

The Condition control is not needed because this Filter+ only checks whether the value is true or false.

← Previous

CMS+ Count+

← Previous

CMS+ Count+

← Previous

CMS+ Count+

Next →

CMS+ Search+

Next →

CMS+ Search+

Next →

CMS+ Search+