Collection List "Live State" - ability to show a div ONLY if a collection list has items

Hi Guys,

In the same way that you can use empty states to show content if a collection list has no items, how do you conditionally show a div, say, if a collection list does have items?

Here is a simple example:

We have a collection list called “team members”. We have a separate collection list called “testimonials”, which has a multi-reference to “team members”. We could not have “team members” multi-reference “testimonials” as this would then not allow for options such as filtering, sorting and pagination.

We then wish for the ‘Testimonials:’ header to only be shown if indeed the “testimonials” collection list, when filtered, has items for the team member.

It is not possible to do this using conditional visibility, as this cannot filter for a multi-reference (“Team Member”) in a different collection list (in this case the “testimonials” collection list).

image

Of course here we won’t see testimonials as tutors are referenced within testimonials, not the other way around (for the reason above with pagination considerations).

Essentially, we need exactly what the “Empty State” offers, but for live state, so that we can put the header in the “live state” which shows when there are collection list items, but hides when there are no items.

Found a solution to this:

You can create a faux second collection list above with the following properties:

  1. The faux collection list is the same as the actual collection (same conditional filters as needed)
  2. You set number of items to 1
  3. You put whatever you want in there (e.g. headings)

This enables the stuff that needs to be displayed once if the actual collection list is to be displayed to be outputted.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.