A dynamic list is a list that connects to external variable data outside the design editor and displays it dynamically as a list. Instead of using the property management table for managing list data, it connects to and uses data sources inside or outside Studio.Design.
Element in the editor | Where the data (properties) is managed / referenced from |
Property management table in the [Data] tab of the right panel | |
Dynamic list | ・Studio CMS content created in the CMS dashboard (CMS list) ・External data retrieved through RSS integration (RSS list) |
Features with limitations when connecting to external data
The features available in dynamic lists differ between CMS lists (which connect to Studio CMS data) and API / RSS lists (which connect to external data retrieved from APIs or RSS).
Feature | API list | RSS list | Notes |
○ | ○ | You can link variable data retrieved through external data integration as properties. | |
△ | × | Some features are not available. For details, see Display settings with limitations when connecting to external data below. | |
△ | × | Not available for RSS lists. | |
× | × | Not available. |
Adding a dynamic list
Use one of the following methods to place a dynamic list on a page in the design editor.
*The data to link to the list must be prepared in advance.
Adding a preset dynamic list
If data is already connected, you can add pre-linked CMS lists and RSS lists. API lists must be created using the Convert an existing list into a dynamic list method described below.
From the navigation on the left, click the [Connect] icon
.Select either the [CMS] or [RSS] tab.
Choose the dynamic list you want to place from the list, and place it on the screen by dragging and dropping or clicking.
If you need to change the linked data, refer to the steps in Change the linked data.
Converting an existing list into a dynamic list
Link data to a manually created list afterward to convert it into a dynamic list. API lists must always be created using this method.
Select the list you want to convert into a dynamic list.
Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Click [Link data] on the list.
Select the data you want to link to convert the list into a dynamic list.
Unlinking data
When you unlink data, the dynamic list is automatically converted back into a static list.
Unlinking data does not affect the list's design.
Select the target dynamic list.
Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
In the upper right of the [Data] tab, click the model/collection name linked to the list.
Select [Unlink data] to unlink.
Changing the linked data
You can change the data linked to a placed dynamic list to any of a CMS model, CMS collection, API, or RSS at any time.
Changing the data does not affect the list's design.
Select the target dynamic list.
Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Click the linked data input field for [List].
Select the data you want to change from the displayed data list.
Linking variable data (properties) to box elements
You can link variable data (properties) to text and image boxes inside a list to display the data.
Linking variable data (properties) to box elements inside a CMS list
For how to link Studio CMS properties to box elements inside a CMS list, refer to the help article below.
Linking variable data (properties) to box elements inside an API / RSS list
For how to link data connected via API or RSS to box elements inside a list, refer to the help articles below.
Configuring list item display settings
In a dynamic list, 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 internal Studio.Design data) and API / RSS lists (which connect to external data).
Select the dynamic list you want to configure display settings for.
Make sure to select the list itself, not an item inside the list.
(When selecting an element in the layer panel, select the layer with the list icon
.)Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Configure each setting.
If your site is already published, update the site from the publish panel after configuring the settings. The changes will not be reflected on the published site until you do this.
Supported features
Feature | CMS list | API list | RSS list |
○ | × | × | |
○ | ○ | ○ | |
○ | ○ | ○ | |
○ | ○ | × | |
○ | × | × |
Filter (available for CMS lists)
You can set filter conditions based on preset CMS properties or search terms to narrow down the items shown in the list.
For details, see Filter: Narrow down items displayed in a CMS list.
Display count
You can specify the maximum number of items to display in the list. The maximum is 50 items.
Note: Increasing the display count may affect performance
The more items you display, the more likely you are to see the following effects:
The design editor may become slower to operate.
The published site may load more slowly.
The extent of the impact depends not only on the number of items but also on the structure of the CMS model.
If the display or operation feels sluggish, reducing the display count may help.
Empty state display
You can adjust the design shown when there are no items in the list.
Enable "Empty state display" and edit the design while previewing how it will look.
Load more button (available for CMS lists and API lists)
When there is more data than the display limit, a [Load more] button is automatically shown at the bottom of the list.
Clicking it loads additional items in the number you specified.
If there are no more items to load, the button is not shown.
You can check and adjust the button's design directly on the screen.
Note: This cannot be set for CMS lists linked to a CMS collection.
Hide the same item (available for CMS lists)
This setting excludes the article currently being viewed from a related articles list when the list is placed on a CMS article detail page.
The checkbox for this setting only appears when both of the following conditions are met:
The CMS list is placed on a dynamic page or dynamic modal.
The CMS list and the dynamic page / dynamic modal it is placed on are linked to the same CMS model.
Note: Requirements for the "Hide the same item" feature in dynamic modals
To enable [Hide the same item] on a dynamic modal, the page that links to the modal must be a dynamic page.
Configuring the layout and appearance of a list
You can edit the design and styling of a dynamic list just like any other box element.
By setting conditional styles or display conditions, you can also apply special designs or styling to specific items only.
Conditional style (available for CMS lists and API lists)
You can set a "First item" style on a list element to apply a different design to just the first item in the list.
For details, see Conditional style > First item.
Display conditions (available for CMS lists)
You can show list or page elements only when specific conditions are met.
Example: Use a boolean property to display only articles where the flag is "true".
For details on how to set this up, see the help articles below.
Blog Article List API RSS