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 linked to internal content data from Studio.Design CMS.
You can also dynamically edit the list based on CMS properties you've set up in advance.
What is a URL Query Filter?
You can set up a filter (URL Query Filter) that lets site visitors narrow down which items appear in a CMS List. It uses reference properties you've set up beforehand, allowing visitors to search by categories, tags, and similar criteria.
How URL Query Filters Work
The filter uses a URL query parameter as its value source. The CMS items shown are automatically narrowed down based on the parameter values included in the page URL.
When a site visitor uses the URL Query Filter to set search conditions, 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 with the filter conditions already applied.
Requirements for Setting Up URL Query Filters
URL Query Filters can only be set up 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 on the same site.
Setting Up a URL Query Filter
Follow the steps below to set up a URL Query Filter.
Step 1. Prepare your CMS Dashboard
Before setting up a URL Query Filter, create your content in Studio.Design CMS.
Create the content you want to display on your dynamic page.
Set up the reference properties you'll use as display items in the URL Query Filter.
Step 2. Add a Filter and CMS List
Add a filter and CMS List to your page using one of the methods below.
Use a Preset Part
Preset parts are available in the CMS tab of the Connect panel.
You can choose between a filter only, or a list + filter preset.
Select the [CMS] tab.
From the displayed CMS presets, choose [Filter] or [List + Filter] linked 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 placed.
This lets you quickly set up a search page where visitors can narrow down list items by keywords or search conditions.
Search field
URL Query Filter (only when reference properties are set up)
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. Be sure to select the entire CMS List, not just an individual list item.
Open the [Data] tab in the right panel and show the [Filter] menu. If the panel is closed, open the right panel.
Under [Filter], click [+] to add a filter.
From the dropdown list under [Model], select the reference property you want to use as the filter condition.
Make sure the filter condition is set to [URL Query Configured].
(URL queries are enabled by default.)
If you've set a property created as a Reference Property / Multi-select as the filter, choose either [Match All (AND condition)] or [Match Any (OR condition)] as the search criteria.
Configure the list display settings.
For details on each setting, see the help articles below.
For editing 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 for a single CMS List.
When you set multiple display items, only AND conditions are supported. OR search is not supported.
Select the filter.
Open the [Data] tab in the right panel and show 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 display items, click [+] next to the [Display Items] menu.
Configure the display items.
From your existing reference properties, select the ones you want to use as search criteria as display items.
Label: A field for editing the label of the filter item.
Clear Filter Label: A field for editing the label of the button that clears the filter selection.
Delete Item: Deletes the filter item.
Configure [Navigate to Another Page].
Depending on your setup, you may need to configure [Navigate to Another Page]. Turning the toggle on shows the field for setting the destination page.
For examples of when this setting is needed, see Use Cases for Navigate to Another Page.
Use Live Preview to confirm that the URL Query Filter is correctly narrowing down the list items.
If you're editing a published site, update the site from the publish panel.
Use Cases for [Navigate to Another Page]
Depending on where the filter is placed, you may need to configure [Navigate to Another Page].
Example 1. Placing the URL Query Filter in a Modal
If you place the URL Query Filter in a modal and want to display the search results on the page that links to the modal, turn [Navigate to Another Page] on.
Example 2. Placing the Filter Somewhere Other Than the Top of the Page
If the filter is placed somewhere other than the top of the page, the page may scroll to the top after a condition is selected. You can prevent this with the following steps.
Select the parent box containing the filter.
Open the [Settings] tab in the right panel and enter any string in [ID] (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 details on anchor links, see Set an ID on a Box for Anchor Links.