A dynamic list is a list that can pull in variable data from outside the design editor and display it dynamically as a list. Instead of using the properties table that's typically used to manage list data, it connects to data sources from inside or outside Studio.Design.
Element in the editor | Where data (properties) is managed or referenced from |
Properties 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 an RSS connection (RSS list) |
Features with limitations when connecting external data
The features available for dynamic lists differ between CMS lists (which link Studio CMS data) and API/RSS lists (which link external data retrieved via APIs or RSS).
Feature | API list | RSS list | Notes |
○ | ○ | You can link variable data retrieved from an external data connection as properties. | |
△ | × | Some features are not available. For details, see Display settings with limitations when connecting external data below. | |
△ | × | Not available for RSS lists. | |
× | × | Not available. |
Add a dynamic list
Use one of the methods below to place a dynamic list on a page in the design editor.
*Make sure the data you want to link to the list is prepared in advance.
Add a preset dynamic list
If your data is already connected, you can add CMS lists and RSS lists with the data already linked. For API lists, use the Convert an existing list into a dynamic list method described below.
In the navigation on the left side of the screen, click the [Connect] icon
.Select either the [CMS] or [RSS] tab.
From the list, choose the dynamic list you want to add and place it on the screen by dragging and dropping or clicking.
If you need to change the linked data, follow the steps in Change linked data.
Convert an existing list into a dynamic list
Link data to a manually created list after the fact to convert it into a dynamic list. API lists must 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] for the list.
Select the data you want to link to convert the list into a dynamic list.
Unlink the linked data
When you unlink the data, the dynamic list is automatically converted into a static list.
Unlinking the data won't affect the list's design.
Select the dynamic list you want to update.
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 name of the model or collection linked to the list.
Select [Unlink data] to disconnect the link.
Change linked data
You can change the data linked to a dynamic list you've already placed to any CMS model, CMS collection, API, or RSS source at any time.
Changing the data won't affect the list's design.
Select the dynamic list you want to update.
Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Click the linked data field under [List].
Select the new data from the data list that appears.
Link variable data (properties) to box elements
You can link variable data (properties) to text, image boxes, and other elements inside a list to display that data.
Link variable data (properties) to box elements inside a CMS list
For details on how to link Studio CMS properties to box elements inside a CMS list, see the article below.
Link variable data (properties) to box elements inside an API/RSS list
For details on how to link data retrieved through an API or RSS connection to box elements inside a list, see the articles below.
Configure list item display settings
For dynamic lists, you can configure settings like how many items to display and what to show when there are no items.
The display settings available differ between CMS lists (which link internal Studio.Design data) and API/RSS lists (which link external data).
Select the dynamic list you want to configure.
Make sure to select the list itself, not an item inside the list.
(If you're selecting the 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 you've finished configuring. Your changes won't appear 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 keywords to narrow down the items shown in the list.
For details, see Filter: Narrow down the items shown in a CMS list.
Number of items displayed
You can set the maximum number of items shown in the list. Any items beyond this number won't appear in the list.
Empty state display
You can customize the design shown when the list has no items.
Turn on "Empty state display" to edit the design while previewing how it will look.
Load more button (available for CMS and API lists)
This setting sets a maximum number of items displayed. When that limit is exceeded, a [Load more] button automatically appears at the bottom of the list.
When clicked, it loads the specified number of additional items.
You can set up to 50 items to display.
The button won't appear when there are no more items to load.
You can preview and customize the button design on the screen.
Note: This can't be set on CMS lists linked to a CMS collection.
Hide current item (available for CMS lists)
When you place a related articles list on a CMS article's detail page, this setting hides the article currently being viewed from the list.
The checkbox for this setting only appears when both of the following conditions are met:
A CMS list is placed inside a dynamic page or dynamic modal.
The CMS list and its parent dynamic page or dynamic modal are linked to the same CMS model.
Note: Conditions for "Hide current item" in dynamic modals
To enable [Hide current item] in a dynamic modal, the page linking to the modal must be a dynamic page.
Configure the list layout and appearance
You can edit the design and styling of a dynamic list just like any other box element.
You can also apply special designs or styling to specific items only by configuring conditional styles or display conditions.
Conditional styles (available for CMS 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 styles > First item.
Display conditions (available for CMS lists)
You can show list or page elements only when certain conditions are met.
Example: Using a boolean property to only show articles where a flag is set to "true."
For details on how to set this up, see the articles below.
blog article list API RSS