Documentation

This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

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 Create page folder dialog with its sections and the Add data source filter button highlighted

Data source filter editor interface

The data source filter editor consists of 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.

Data source filter editor layout with settings and preview

For further information on configuring data sources, see Developing a data source extension and Schemas.

Add 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.