How to use CMS List, CMS Item, Rich Text and Mixed Type

TeleportHQ has four elements for headless CMS content (Strapi, Contentful, WordPress, caisy.io, Flotiq). CMS list shows many entries, CMS item shows one entry, Rich Text shows formatted content such as an article body, and Mixed Type shows a different component depending on the type of a related entry. They're in the CMS group of the Elements panel, which only appears after you finish connecting a headless CMS.

Before you start#

• Connect a headless CMS first. Until the connection is complete, the CMS group isn't shown. See How to connect a headless CMS.
• Using a database, an API or a spreadsheet instead? These CMS elements don't apply. Use the Array Mapper from the List group. See How to show a list of items.

Show many CMS entries with CMS list#

1. On the canvas, select the container that should hold the list.
2. In the left sidebar, click Elements, and make sure the Primitives tab is open.
3. In the CMS group, click CMS list. It's added inside the selected container.
4. In the right panel, under Collection Settings, choose the Source, for example the Article content type.
5. Inside the list's Success branch in the layers tree, add the elements for one entry, for example a heading and an image.
6. Bind each element to the entry's fields with the plug icon. See How to show data from a data source on your pages.

Every entry repeats that design. Styling one entry styles all of them. Collection Settings also has Paginated, Sorting, Filtering and UI State: see How to split a long list into pages, How to sort a list, How to filter a list and How to design loading, empty and error states.

Show one CMS entry with CMS item#

1. In the CMS group, click CMS item.
2. In the right panel, under Collection Item Settings, choose the Source, for example Author.
3. In id, type the entry's ID from your CMS, or click the plug icon and bind it, for example to the author ID of the article in a surrounding CMS list.
4. Inside the item, add elements and bind them to the entry's fields.

TeleportHQ uses a CMS item automatically on CMS details pages. See How to create a page for each item (details pages).

Show formatted content with Rich Text#

1. In the CMS group, click Rich Text while an element inside a CMS list or CMS item is selected.
2. In the right panel, at the right of the Richtext Content title, click the plug icon.
3. Choose the rich-text field, for example the article's body.
4. Click Bind property.

To style headings, paragraphs or images inside the rich text, give the Rich Text element a CSS class, then style the elements inside it with combinators, for example h2 or img. See How to style elements inside a class (combinators).

Show different components per entry type with Mixed Type#

Use TeleportHQ's Mixed Type when a CMS field can hold entries of different types, for example a "related content" field with articles, authors or videos.

1. In the CMS group, click Mixed Type while an element inside a CMS list or CMS item is selected.
2. In the right panel, set Item Source to the related field, and type a Context name.
3. Under Mappings, click Add Mapping and choose a content type, for example Author.
4. In that mapping, next to Component, click Choose Component and pick a component, for example AuthorCard. "After choosing a component you will be able to choose what props to pass to it".
5. Repeat for each type.
6. Set the Default mapping, used "when the type of element received is not handled by any other mapping in this element", and the Error mapping, used in rare cases when something goes wrong on the live site.

Click a mapping's play button (tooltip Preview) to see its component on the canvas, and click it again (tooltip Stop Preview) to go back.

Check that it worked#

The canvas shows real content from your CMS in each element. Publish to check the live site.

Troubleshooting#

The CMS group is missing from Elements No headless CMS is connected, or the connection isn't finished. Complete the CMS connection, or use the Array Mapper for other data sources.

"The selected content type no longer exists. Please select another or remove this collection list." The content type was deleted or renamed in your CMS. Choose another Source, or delete the element. A CMS item shows the same warning.

Pagination, sorting and filtering are greyed out The source is a CMS single type (one entry only): "Pagination, filtering and sorting are disabled for single types".

Filters on a WordPress list have no operand WordPress filters only compare for equality: the value box reads Equals To.

Good to know#

• New entries in your CMS show on the live site after a republish, or without one when the CMS webhook is on. See How to update your site's content without republishing (CMS webhook).
• The Elements panel also has a Rich Text Editor element. That's a different element: an editable text box for your site's visitors, not CMS content.
• In the layers tree, a CMS list's row is called CMS List.