Display a message when an element in a collection list is empty

Ask us anything How do I?
1

I have a collection list which holds a repeating group. Is there a way to display a message when there are no items in the enclosed repeating group? Hopefully the image below will help explain the question:

Screenshot 2024-02-15 at 8.19.56 PM
Screenshot 2024-02-15 at 8.19.56 PM1854×1018 100 KB

Thanks!

2

Hey @SteveB !

You can create a new component — a sibling element to your collection — and add a conditional rendering on it. The condition should be bound to the collection list length: if the collection length is less than 1 (or equal to zero), then display the element.

Hope that helps :slight_smile:

3

Thanks for the suggestion Jean-Philippe. I’m sorry to say I couldn’t make it work. When I made a sibling of the repeating group it would never show (of course because if there were no items there was nothing to repeat). When I tried at the collection level, I could not “see” the index of the repeating group. I tried a no code formula to duplicate the array processing but got a list of objects which I couldn’t figure out how to count … looked like this “[Object, object], [Object, object]”. If you have any suggestions I’d be grateful.

Thanks no matter.

Best regards,

Steve

4

The empty state div should be outside of the repeating group — a completely separate element.
And on its conditional rendering option, you can still refer to the collection properties. Here’s a quick demo to make it a bit clearer.