Point: What is a CMS list?
A CMS list is a type of dynamic list — a list that pulls in data from inside or outside Studio.Design and displays it on your site. Specifically, it's a list connected to internal content data from Studio CMS.
You can also edit the list dynamically based on the CMS properties you've set up in advance.
What is a URL query filter?
You can add a filter (a URL query filter) that lets site visitors narrow down the items shown in a CMS list. It uses the reference properties you've already set up, so categories, tags, and similar values can be used as search conditions.
How URL query filters work
A URL query parameter is used as the value source, and the CMS items shown are automatically narrowed down based on the parameter values included in the page URL.
When a visitor sets filter conditions using the URL query filter, a query like
/page?key=valueis added to the end of the URL.By sharing a link that includes the query, you can share a page link with the filter conditions already applied.
Requirements for using URL query filters
You can only add a URL query filter when the following conditions are met:
The target model for the URL query filter has a property that references another CMS model (a reference property).
A CMS list connected to the same CMS model as the filter's target model is placed somewhere on the same site.
Adding a URL query filter
Follow the steps below to add a URL query filter.
Step 1. Get things ready in the CMS dashboard
Before adding a URL query filter, create your Studio CMS content.
Create the content you want to show on your dynamic pages.
Set up the reference properties you want to use as filter items.
Step 2. Add the filter and CMS list
Use one of the methods below to add a filter and CMS list to your page.
Use a preset part
Preset parts are available in the CMS tab of the Connect panel.
You can choose either a filter on its own, or a list + filter set.
Select the [CMS] tab.
From the CMS presets shown, choose either [Filter] or [List + Filter] connected to the CMS model you want, and place it on the screen.
Add a search page
A search page comes with the following elements already in place.
This lets you quickly set up a page where visitors can narrow down list items using search terms and filter conditions.
Search field
URL query filter (only if reference properties are set up)
CMS list
Step 3. Configure the CMS list
Set the CMS list's filter condition to URL query, then adjust the list's settings, layout, and appearance.
On the screen, select the CMS list you want to make filterable. Be sure to select the entire list, not just a single list item.
Open the [Data] tab in the right panel and go to the [Filter] menu. If the panel is closed, open the right panel first.
Under [Filter], click [+] to add a filter.
From the dropdown, under [Model], select the reference property you want to use as the filter condition.
Make sure the filter condition is set to [URL query set].
(URL query is enabled by default.)
If the filter uses a property created as a reference property / multi-select, choose either [Match all (AND)] or [Match any (OR)] as the search condition.
Configure how the list displays.
See the help articles below for details on each setting.
To edit the layout and appearance, see the help pages below.
Step 4. Configure the URL query filter
Note: URL query filter limits
You can add up to 5 filter items to a single CMS list.
When you set multiple filter items, only AND conditions are supported. OR search is not supported.
Select the filter.
Open the [Data] tab in the right panel and go to the [Filter settings] menu. If the panel is closed, open the right panel first.
Check the [Target model].
If you change the CMS model from the one selected by default, you'll also need to change the model connected to the CMS list.
Add filter items.
To add a filter item, click the [+] next to the [Filter items] menu.
Configure each filter item.
From your existing reference properties, select the ones you want to use as search conditions.
Label: A field for editing the filter item's label
Clear filter label: A field for editing the label of the button that clears the filter selection
Selection type: Appears when the filter item uses a property created as a reference property / multi-select
Multiple: Visitors can select several options at once
Single: Each time an option is clicked, the previous selection is cleared, so only one option is ever active
Delete item: Deletes the filter item.
Set up [Navigate to another page].
Depending on your setup, you may need to turn on [Navigate to another page]. When the toggle is on, a field for choosing the destination page appears.
For examples of when this is needed, see Examples of using "Navigate to another page".
Use Live Preview to confirm that the URL query filter correctly narrows down the list items.
If you're editing a site that's already live, update your site from the Publish panel.
Examples of using [Navigate to another page]
Whether you need to turn on [Navigate to another page] depends on where you place the filter.
Example 1. Placing the URL query filter in a modal
If you place the URL query filter in a modal and want the results to appear on the page that opened the modal, turn on [Navigate to another page].
Example 2. Placing the filter somewhere other than the top of the page
If the filter isn't at the top of the page, the page may jump back to the top after a visitor selects a condition. Here's how to avoid that:
Select the parent box that contains the filter.
Open the [Settings] tab in the right panel and enter any text in the [ID] field (for example,
list).Turn on [Navigate to another page] for the filter.
From the destination page dropdown, select the same page's URL with the anchor (for example,
/page#list).
For more about anchor links, see Setting an anchor link ID on a box.