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
How to switch UI States
How to edit UI States

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: 27/03/2024