The dynamic list to display the CMS data you manage in the CMS dashboard and API data from API integration.
1. 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.
2. Changing data and setting
2-a. 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.
2-b. Item limit
You can edit the number of items to be displayed in the list by the settings panel.
2-c. 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.
2-d. 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.
2-e. Filter
When you set the filter to CMS models, it will narrow down the CMS items to display.
In Filter: select a referenced model
In Filter condition: select an item
In addition to the reference model, the filter allows you to select Text Search. This is used to search for CMS items. To learn more read Search page｜STUDIO U.
2-e-i. 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.
3. Styling a dynamic list
3-a. 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.
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 l STUDIO U.
4. 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.