Help - Toggle component view with data from single list item

Hi everybody.

Here is a small layout I have.
-Container 1
—Container 2 — Repeat this item with backend data.
-----List item 1
-------Container 3
---------Text Box with more data from List item 1.

I want to have Container 3 hidden by default and toggle view on tap of List item 1.
I have tested some things like:

  • Add show component flow on List item tap and select Container 3. No luck.
  • Tried an IF formula but it looks like I’m not grabbing the visibility property of Container 3 correctly.

Any tips or help is greatly appreciated.

I’m joining the conversation because I would also like to learn how to do this. Thanks for posing the question, @Silenux!

@Harri_Sarsa et al, any thoughts for us to try?

1 Like

I started writing a somewhat related tutorial yesterday and it will likely be ready today. I’ll let you know when it’s published.

Short answer to this is to have a Page variable that includes all IDs (or other unique properties) of the repeated data records that should show more info in the repeated list. Then Container 3 visibility should be bound to this kind of formula: IS_IN_ARRAY_BY_KEY(pageVars.openedItems, "id", current.id)

Thanks Tomi.
I’ll wait for your tutorial.

Hi @Silenux and @Erin_Wagner here’s the tutorial I was talking about: https://docs.appgyver.com/tutorials/button-with-loading-indicator

The advanced section is very close to what you’re looking for. Just instead of button tap, you would use List item tap to add the ID of the repeated object to your page variable List that contains all opened containers. Then use IS_IN_ARRAY_BY_KEY() to make Container 3 visible when the related in is in the List.

Also, you wouldn’t automatically remove the ID from the List after the action, but rather in some other tap event if you have a place where to close Container 3 again. (Or if it should use same List item tap event, you can use If condition to check if the ID is in the List and then add or remove it depending on the situation.)

1 Like