Using the data source filter editor
Learn how to use the data source filter editor.
The data source filter editor lets you manage the data source filters associated to page folders, dynamic pages, component groups, and Frontend components.
Open the data source filter editor
You can open the data source filter editor from:
- The Site builder area: hold the pointer over a page folder, click the Settings icon, and expand the Data source section. Then, click the Edit icon of an existing data source or click + Add data source filter.
- The Dynamic pages area: select a dynamic page to open the Dynamic page rules pane. In the Page rules section, click the Settings icon of a page rule, expand the Data source section, and click + Add data source filter. You can also open the editor to manage the Data source for preview by clicking Add data source/Edit data source.
- The Templates area: click Component groups, click the Settings icon of a component group, and expand the Data source section. Then, click the Edit icon of an existing data source or click + Add data source filter.
- The page builder when editing a page version: add a Frontend component to your page version that has a data source, then click + Add data source filter
The data source filter editor contains two sections:
Settings: contains the data source input fields specified in the data source schema. You can edit the data source filter settings by editing these fields.
Preview: displays the preview data returned by the data source for the current configuration without having to check the preview of the entire page.
To display the data source preview, you must add preview data for the Studio.
Multiple data sources
You can add multiple data source filters to your page folder and configure each with a different name and filters to display different information inside your Frontend components.
Each data source filter is independent of the other, so you can configure each individually and use it in different Frontend components.
For example, you can have two instances of a product slider Frontend component using two different data source filters: one configured to show only Red shirts and the other to show Blue shirts.