CMS UI States: Success, Loading, Error, Empty
Dynamic elements such as CMS Lists or Items have different states such as loading or error, all of which are completely customizable.
Types of UI States
Let’s go over all of the CMS states you will encounter in a dynamic project:
- Success - the default state, it displays the data from the CMS when elements and data are correctly bound
- Error - displays when there the data is incorrectly bound or there are connectivity issues
- Loading - displays while the data from the CMS is being pulled from the CMS
- Empty - displays when the data you want to pull exists but the fields are empty
How to switch UI States
To switch between different states to customize or preview the content within:
- Select the CMS element you’re working on ( Item, List or Array mapper)
- Go to the Right panel -> Collection settings
- In the UI state section check Override state
- From the new dropdown menu select one of the UI states available
How to edit UI States
The UI states of a CMS element are practically uneditable fragments that are displayed in different circumstances, and to which containers and elements can be added.
After switching to the UI state you want to work on, to add content to it:
- Go to the Left panel - Layers and Files tab
- In the Layers panel under the main CMS element select the UI state you want: Success, Error or Loading
- From the Left panel -> Elements drag and drop any container or element you want to add to the canvas or in the correct state container
- Edit the elements you want to add from the **Right panel **
Updated on: 28/03/2025
Thank you!