Point: What is a CMS List?
A CMS List is a type of dynamic list that displays data from inside or outside Studio.Design on your site. Specifically, it's a list connected to internal content data from Studio CMS.
You can also dynamically edit the list based on CMS properties you set up in advance.
What is a URL Query Filter?
You can add a filter (URL Query Filter) that lets site visitors narrow down the items displayed in a CMS List. By using reference properties you've set up in advance, categories, tags, and similar values can be used as search conditions.
How URL Query Filters Work
URL query parameters are used as the source for values, and the CMS items shown are automatically filtered based on the parameter values included in the page URL.
When a site visitor sets filter conditions using the URL Query Filter, a query like
/page?key=valueis appended to the end of the URL.By sharing a link with the query attached, you can share a page link that already has filter conditions applied.
Requirements for Setting Up a URL Query Filter
A URL Query Filter can only be added when the following conditions are met:
The target model of the URL Query Filter has a property that references another CMS model (a reference property) set up.
A CMS List linked to the same CMS model as the URL Query Filter's target model is placed somewhere within the same site.
Adding a URL Query Filter
Follow the steps below to add a URL Query Filter.
Step 1. Prepare in the CMS Dashboard
Before adding a URL Query Filter, create your content in Studio CMS.
Create the content you want to display on your dynamic pages.
Set up the reference properties you want to use as display items in the URL Query Filter.
Step 2. Add the Filter and CMS List
Add the filter and CMS List to your page using one of the methods below.
Use Preset Parts
Preset parts are available in the CMS tab of the Connect panel.
You can choose either a filter only, or a list + filter as your preset part.
Select the [CMS] tab.
From the CMS presets shown, choose a [Filter] or [List + Filter] connected to your target CMS model, and place it on the screen.
Add a Search Page
A search page comes with the following set of elements already in place.
This lets you quickly set up a search page where site visitors can narrow down list items by search terms or conditions.
Search field
URL Query Filter (only when a reference property is set)
CMS List
Step 3. Configure the CMS List
Set the CMS List's filter condition to the URL query, and adjust the list's settings, layout, and appearance.
Select the CMS List you want to filter on the screen. Make sure to select the entire CMS List, not just an individual list item.
Open the [Data] tab in the right panel and bring up the [Filter] menu. If the panel is closed, open the right panel.
Under [Filter], click [+] to add a filter.
From the dropdown list, select the reference property you want to use as the filter condition under [Model].
Confirm that the filter condition is set to [URL Query Set].
(URL Query is enabled by default.)
If you've set a property created with Reference property/Multi-select as your filter, choose either [Match all (AND)] or [Match any (OR)] as the search condition.
Configure the list display settings.
See the help articles below for details on each setting.
Show More button (Read more)
For editing the layout and appearance, refer to the help pages below.
Step 4. Configure the URL Query Filter
Note: URL Query Filter limitations
You can add up to 5 display items per filter on a single CMS List.
When you set multiple display items, only AND conditions can be used as the search condition. OR searches are not supported.
Select the filter.
Open the [Data] tab in the right panel and bring up the [Filter Settings] menu. If the panel is closed, open the right panel.
Check the [Target Model].
If you want to change the CMS model from the default selection, you'll also need to change the model linked to the CMS List at the same time.
Add display items.
To add a display item, click [+] next to the [Display Items] menu.
Set up the display items.
From your existing reference properties, select the property you want to use as a search condition as a display item.
Label: Field for editing the label of the filter item.
Clear Filter Label: Field for editing the label of the button that clears the filter item selection.
Delete Item: Removes the filter item.
Set up [Navigate to another page].
If the CMS List that displays the filter results is placed on a different page from the URL Query Filter, turn on [Navigate to another page].
When the toggle is turned on, fields for setting the destination page will appear.
Tips: Placing a URL Query Filter in a modal
If you want to place a URL Query Filter in a modal and show the search results on the page that links to the modal, turn on [Navigate to another page].
5. Check the filter behavior
Use the live preview to confirm that the URL Query Filter properly narrows down the list items.
If you're editing a site that's already published, update your site from the Publish panel.