Repeating Card/Panel layout with subtitles in between

UI Builder
1

I want to have a repeating group of cards/panels, showing information about a certain topic, but delimited by topics, e.g.:

Topic:
Card1, Card2, Card3
Card4, Card5

Topic:
Card6, Card7, Card8

etc.

So - I want to fetch data from a table, ordered by Topic, and then whenever Topic changes, I want a new delimiter row with the name of the next Topic before the cards “belonging” to that Topic are shown.

How do I set this up the best way wrt Repeaters and data containers so that I can have a flexible layout for various screen sizes etc?

If there are any good videos already showing this I apologize, and just need a link :slight_smile:

2

To make this happen you need two levels of repeaters: first one will render topics and each topic container (or a Block if you decide to use it) will have its own repeater to render the cards which belong to the topic.

Something similar I explored in the following video, with the difference that I render images in the second level of repeaters, however, the approach would be identical:

Regards,
Mark

3

Perfect Mark. I’ll definitely have a look at that, thanks!

4

One thing I am not clear about after watching this video, @mark-piller, is how I can relate this to fetching the right data.

I want to fetch data once, with one query, and in that query I have both the name of the rows as a property, but also the rest of the data (for the cards within each row) as other properties. e.g.:

[
  {
  "topic": "Topic A",
  "name": "Name of card",
  "image": "Image of card",
  "description": "..."
  },
  {
  "topic": "Topic A",
  "name": "Name of this other card",
  "image": "Image of card",
  "description": "..."
  },
  {
  "topic": "Topic B",
  "name": "My name",
  "image": "Image of card",
  "description": "..."
  },
  {
    ...
  }
]

How can I either get this one data set to work across two repeaters, or split it into two to avoid having additional data traffic against the server?

5

For reference, what I am doing now to solve my problem, is this:

  1. I fetch all data into Page Data
  2. I create a list of all unique values of the topic field from the data
  3. I convert this list to a list of objects with one property, topic
  4. The topic list is used as repeater data for the rows
  5. In the repeater logic for the cards, I filter the list of data in Page data that have matching topic value and use as repeater list data

So I have it working, but would like to know if this is a subpar solution or not… :slight_smile: