Nested collection view on mobile

I'm trying to achieve something similar to what I see here in Nested List Views however the nested content might have text and number inputs. is it possible to achieve it in mobile?

I've tried to nest collection views, however the nested collection view seems a bit off, as if I can't work with its elements. any way to solve it?

For instance, CollectionView5 has setCollectionView nested
however, the components inside setCollectionView can not be seen. For example, the number inputs have a label and a place holder, the text component also has something written in its value, but it's not shown in the app.
Consider the image below

does anyone have a suggestion in how to work with it or fix it?

Hi @lmolenda, welcome to the forum! :wave:

Currently, nesting Custom Collection Views does not work. Thank you for your feedback, I added it to the internal report. As a workaround, we can set one Collection View to render the workouts, and add a button to the repeatable to send the user to another page, where we have the inputs for that specific workout.

Alternatively, we could find another way to collect user input.

For example, I created a workout tracker app that uses a form to add one set at a time:

hi Paulo :wave:,

oh, really sad that nesting Collection Views doesn't work, but thank you for the suggestions!

Let me just confirm, I guess is not possible to create the components programatically with JS either? For example, not adding one set at the time with the click of a button, but adding all the components needed for all sets (which something can be 2, 3 or 4 depending of the exercise :wink:)

We can definitely create the components programmatically using the Custom Collection view, we just can't nest another one. If we have different pages for each exercise, we should be able to make this work.

Here is an example of a Collection View with 'x' amount of containers based on external data:

If the amount of sets is saved in a State variable:

Note: The value could come from user input or data in a table, I'm manually setting it to 4 to keep it simple.

We can create a "Custom Collection" with "numSets.value" subarrays by setting the "Data" to {{new Array(numSets.value).fill().map(() => [])}}. Then, set up our repeatable to a container with the inputs we need for each set:

Use {{ i }} within the repeatable to reference the index.
For example, The set number is set by referencing it in the "Text" component:

I added border and padding to the container so it's easier to differentiate each set:

Just make sure to reference the inputs instead of the collection to reference the values, because we set the "Data" to empty arrays to create the layout (this is ok). The data property won't get populated:

But if we use the inputs:

Let us know if you have any questions. Happy building! :hammer_and_pick:

1 Like