The dynamic list to display the CMS data you manage in the CMS dashboard and API data from API integration.
Place dynamic lists
On the CMS/API menu of the left add panel, you'll find a list of CMS models, collections, and API lists. Drag and drop to place it on the screen.
Changing data and setting
Change the model/collection or API request to reference
If you want to change the content of a list once it has been placed as another model's data, select the list box in the top left corner. Then select the model, API request, or RSS you want to reference from the settings panel.
The layout and style of the list remain when changing the referring data.
You might need to re-select the properties if the property structure differs before and after the change.
Item limit
You can edit the number of items to be displayed in the list by the settings panel.
Display 0 items
You can style the 0 items display when search results are not found. To style, enable the display and preview in the settings panel.
Load more Button
If you turn on the Load more Button switch, you will be able to make a reading motion to display more items on the site when there are any.
*You cannot set this to Collections and API lists.
Filters in CMS Lists
You can configure filter criteria using the following CMS Properties or by entering keywords into the search bar (keywords can only be used on the Search Page). You can also combine multiple criteria to refine your filters further.
Filter Types and How They Work
Filter Type | How You Can Filter | Usage Notes |
Filter based on numeric values, using any of the following conditions:
|
| |
Filter by “On” or “Off” status |
| |
Specify exactly one value to filter |
| |
Specify one or more values to filter | Can set up to 5 filter values | |
Reference Property/ Single-select | Specify one value to filter |
|
Reference Property/ Multi-select | Specify one or more values to filter | Can set up to 5 filter values |
Search Keyword | Filter by keywords entered in the search form | Only works when using the Search Page |
More Details:
For step-by-step instructions on filtering, check the article: Filter: Narrow Down Items in Dynamic Lists
Dynamic filter
When you display the data of the CMS model in the dynamic list, you can set the dynamic filter to switch the items to display on each page.
For example, add and set properties that reference the Tags model to the Posts model, as shown in the following image.
Place a dynamic list on the dynamic page of the Tags model.
You can select the Dynamic filter when you filter the Posts model by Tags in the list filter.
Hide Current Item
When adding a related articles list to a CMS detail page, you can prevent the currently viewed article from appearing in the list. This helps improve navigation and user experience.
The option to hide the current item appears as a checkbox only when both of the following conditions are met:
A dynamic list is placed inside a dynamic page or dynamic modal.
The dynamic list and the dynamic page (or modal) are linked to the same CMS model.
Note:
How Hiding Works in Dynamic Modals Items are hidden in dynamic modals only when linked from a dynamic page—not from a static page like Home.
Styling a dynamic list
Connecting properties
You can design elements such as text and image boxes in lists by connecting them to CMS or API properties.
You can connect properties from two places in the editor: the Data panel and the Box settings panel. Please refer to the following articles for details on how to link properties.
*The data panel button appears when an element in the list is selected on a regular page.
Tips:
If a linked property has no data and is left blank, it will be showed “(No data)” in the property list within the design editor. However, this message will not appear in your site preview or on your published site.
You can also adjust the display of text properties, such as changing the date format and specifying the number of characters displayed. To learn more, read Display filter.
Styling item
The style of each element in a dynamic list is basically the same for all items in the list.
However, you can make changes using other functions.
The first item conditional style changes the style only for the first item in the list.
With Boolean properties (conditional visibility and conditional style), you can display/hide or change the style, only the elements of a specific item, depending on the condition. For details, please read the following articles.
*Only the first item conditional style is available for API listings.