Skip to main content

Dynamic Lists

Dynamic Lists let you connect external data from Studio.Design CMS, APIs, or RSS feeds to the design editor, automatically populating list content. Learn how data connections work and get an overview of the feature.

A Dynamic List is a list that connects to variable data from outside the design editor and displays it dynamically as a list. Unlike the Property Management Table used for managing list data, Dynamic Lists connect to data sources inside or outside of Studio.Design.

Element in the editor

Where the data (properties) is managed / referenced from

The Property Management Table in the [Data] tab of the right panel

Dynamic List

• Studio CMS content (CMS List) created in the CMS Dashboard
• External data retrieved via Data Connect API (API List)

• External data retrieved via RSS integration (RSS List)


Features with limitations when using external data

The features available for Dynamic Lists differ between CMS Lists (which use Studio CMS data) and API / RSS Lists (which use external data from APIs or RSS feeds).

Feature

API List

RSS List

Notes

Variable data retrieved through external data integration can be connected as properties.

×

Some features are not available.

×

Not available for RSS Lists.
For API Lists, only the "First Item" conditional style can be set.

×

×

Not available.


Adding a Dynamic List

Use one of the following methods to place a Dynamic List on a page in the design editor.

Note: The data you want to connect to the list must be prepared in advance.

Adding a preset Dynamic List

If your data is already connected, you can add CMS Lists and RSS Lists that come with the data already linked. For API Lists, use the method described below in Converting an existing list into a Dynamic List.

  1. From the navigation on the left side of the screen, click the [Connect] icon .

  2. Select either the [CMS] or [RSS] tab.

  3. Choose the Dynamic List you want to place from the list, then drag and drop or click to add it to the screen.

  4. If you need to change the connected data, refer to Changing the connected data.

Converting an existing list into a Dynamic List

Connect data to a manually created List to convert it into a Dynamic List. API Lists must always be created using this method.

  1. Select the list you want to convert into a Dynamic List.

  2. Open the [Data] tab in the right panel.

    If the panel is closed, open the right panel.

  3. Click [Connect Data] for the list.

  4. Select the data you want to connect to convert the list into a Dynamic List.


Disconnecting the connected data

When you disconnect the data, the Dynamic List is automatically converted back into a static List.

Disconnecting the data does not affect the design of the list.

  1. Select the target Dynamic List.

  2. Open the [Data] tab in the right panel.

    If the panel is closed, open the right panel.

  3. Click the model or collection name connected to the list at the top right of the [Data] tab.

  4. Select [Disconnect Data] to disconnect the data.


Changing the connected data

You can change the data connected to a placed Dynamic List to any of the following at any time: CMS model, CMS collection, API, or RSS.

Changing the data does not affect the design of the list.

  1. Select the target Dynamic List.

  2. Open the [Data] tab in the right panel.

    If the panel is closed, open the right panel.

  3. Click the connected data input field under [List].

  4. Select the data you want to switch to from the data list that appears.


Connecting variable data (properties) to box elements

You can connect variable data (properties) to text, image boxes, and other elements within a list to display the data.

Connecting variable data (properties) to box elements in a CMS List

For instructions on connecting Studio CMS properties to box elements in a CMS List, see the following help article.

Connecting variable data (properties) to box elements in an API / RSS List

For instructions on connecting data retrieved via API or RSS to box elements in a list, see the following help articles.


Configuring list item display settings

In Dynamic Lists, you can configure settings such as the number of items to display and what to show when there are no items.

The available display settings differ between CMS Lists (which connect to Studio.Design's internal data) and API / RSS Lists (which connect to external data).

  1. Select the Dynamic List you want to configure.

    Make sure to select the list itself, not an item inside the list.

    (When selecting the element in the layer panel, choose the layer with the list icon .)  Open the [Data] tab in the right panel. If the panel is closed, open the right panel.

  2. Configure each setting.

  3. If your site is already published, update the site from the Publish panel after configuring the settings. Changes won't be reflected on the live site until you do this.

Supported features

Feature

CMS List

API List

RSS List

×

×

×

×

×

×

×

(1) Filter (available for CMS Lists)

Set filter conditions based on preset CMS properties or search terms to narrow down the items shown in the list.

(2) Number of items to display

You can specify the maximum number of items to show in the list. The upper limit is 100 items.

Note: Increasing the number of items may affect performance

The more items you display, the more likely you are to see the following:

  • Slower performance in the design editor

  • Slower loading on the published site

The impact depends not only on the number of items, but also on the structure of the CMS model.

If display or performance feels slow, reducing the number of items shown may help.

(3) Empty state display

You can customize the design shown when there are no items in the list.

Enable the "Empty state display" option to edit the design while previewing the result.

(4) Show More button (available for CMS Lists and API Lists)

If there's more data than the display limit, a [Show More] button appears automatically at the bottom of the list.

Clicking it loads additional items in the amount you've specified.

  • If there are no more items to load, the button won't appear.

  • You can view and adjust the button's design directly on the screen.

Note: Not available for CMS Lists connected to a CMS Collection.

(5) Hide same item (available for CMS Lists)

This setting excludes the currently displayed article from the list when you've placed a related articles list on a CMS article detail page.

The checkbox to enable this setting appears only when both of the following conditions are met:

  1. The CMS List is placed on a dynamic page or dynamic modal.

  2. The CMS List and the dynamic page or dynamic modal it's placed on are connected to the same CMS model.

Note: Conditions for "Hide same item" to work in dynamic modals

To enable [Hide same item] in a dynamic modal, the page linking to the modal must be a dynamic page.

It won't work if the linking source is a static page such as HOME or a regular Page.

(5) Sort (available for CMS Lists)

You can use CMS properties to change the order in which CMS items are displayed in the list.


Setting the layout and appearance of the list

You can edit the design and styling of a Dynamic List just like any other box element.

By using Conditional Style or Display Conditions, you can also apply special designs or styling to specific items only.

Conditional Style (available for CMS Lists and API Lists)

Apply the "First Item" style to a list element to give a different design to just the first item in the list.

Display conditions (available for CMS Lists)

Show elements within a list or page only when specific conditions are met.

Example: Use a boolean property to display only articles whose flag is set to "true".

For details on how to set this up, see the following help articles.


blog article list API RSS

Did this answer your question?