How to use the Mixed type CMS element

Mixed type elements are versatile helper elements used to display related entries of different types from the CMS.

The Mixed type element acts like a switch that displays components with data from the CMS based on different rules (mappings) for each data type.

For example, a blog post entry can have related articles, related authors, related categories. Some blog posts may have one type of relation but not others. The Mixed type element can be set up to account for any situation that may arise.

Adding a Mixed type element to a project
Setting up a mixed type element

Set up a new mapping
Set up default and error

Adding a Mixed type element to a project

Mixed type elements ONLY work when used inside a CMS Item or List to use as a data source.

To add an Mixed type element to a project:

Go to the Left panel -> Elements tab -> CMS section
Drag the Mixed type element the Success Layer in a CMS element with a source set up
Go to the Right panel
Select a Mixed type Source from the available collections

Setting up the Mixed type element

Once a Mixed type element has been added to another CMS element or page you can:

Set up mappings - will display a component based on the data type you want
Set up a Default behavior - will be used when the types of element received is not handled by a mapping
Set up an Error behavior - will be used in situations when something happens in the deployed website

Setting up a new Mixed type mapping

To set up a new mapping in the Mixed type element:

Select the Mixed type element
Go to the Right panel
Click the “+” icon in the Mappings section
Select one of the available content types
In the newly added section, select one of your components
Bind data to the component elements with the Dynamic panel



To preview the component you have mapped to, click the play icon in the Mapping section you are currently working on.

Setting up the default and error behaviors

To customize the default and error behaviors for the Mixed type element:

Select the Mixed type element
Go to the Right panel
In the Default or Error section click Choose component
Select one of your components
Bind data to the component elements with the Dynamic panel

Updated on: 27/03/2024